Codex로 디자인하기: OpenAI Codex로 UI 만들기

OpenAI Codex는 실제로 무엇인가 (그리고 무엇이 아닌가)

먼저, “Codex”를 검색하는 거의 모든 사람을 헷갈리게 하는 구분부터. 원래의 OpenAI Codex는 초기 GitHub Copilot을 구동하던 2021년의 코드 자동 완성 모델이었고 2023년에 폐기되었습니다. 이 페이지가 다루는 것은 그것이 아닙니다. 오늘날의 Codex는 OpenAI의 에이전트형 코딩 도구로, 자연어 작업으로부터 코드를 계획하고, 작성하고, 실행하고, 검증합니다.

현대의 Codex는 네 가지 표면으로 제공됩니다: 터미널 CLI(Rust로 다시 작성, Apache-2.0 라이선스), VS Code·Cursor·Windsurf용 IDE 확장, 위임된 비동기 작업을 위한 클라우드/웹 환경, 그리고 인앱 브라우저와 Computer Use를 갖춘 데스크톱 앱.

• 기본 모델: 2026년 중반 기준 권장 모델은 gpt-5.5이며, gpt-5.4는 OpenAI가 프런트엔드와 컴퓨터 사용을 위해 명시적으로 학습시킨 모델입니다.
• 지시 파일: Codex는 프로젝트 규칙을 위해 프로젝트의 AGENTS.md 파일(도구 간 표준)을 읽습니다, 디자인 컨벤션을 담기에 자연스러운 곳입니다.
• 샌드박스: 커널 수준 샌드박스(기본은 workspace-write)에서 실행되므로, UI를 편집하는 에이전트가 프로젝트 밖으로 벗어날 수 없습니다.

• 공급사: OpenAI
• 자격 증명: OpenAI API 키(BYOK) 또는 ChatGPT 구독(Free / Go / Plus / Pro / Business / Enterprise)
• CLI 라이선스: Apache-2.0, 오픈소스

이제 Codex가 디자인에 강한 이유

2026년 초에 세 가지가 맞물리며 Codex를 평범한 코드 생성기가 아닌 진짜 디자인 도구로 만들었습니다.

• 프런트엔드로 학습된 모델: OpenAI는 프런트엔드와 컴퓨터 사용을 위해 학습된 첫 번째 메인라인 모델 GPT-5.4를 선보였습니다. 디자인 워크플로 전반에서 이미지 이해가 훨씬 좋아졌고 자기 검증도 더 강해졌습니다. 최종 에셋을 확정하기 전에 무드보드와 시각적 선택지를 생성할 수도 있습니다.
• 공식 frontend design skill: openai/skills 카탈로그에는 진짜 감각을 강제하는 엄선된 frontend design skill이 들어 있습니다. 카드 없는 레이아웃, 화면을 꽉 채우는 hero, 브랜드 우선 위계, 절제된 모션, 서체는 최대 두 종류에 강조색은 하나, 그리고 Codex가 만들기 전에 먼저 '비주얼 논지(visual thesis)'를 쓰게 만듭니다. 이 frontend design skill을 추가하는 것이 Codex의 결과물을 끌어올리는 가장 빠른 한 방입니다.
• 브라우저 검증: Playwright skill과 함께 Codex는 실제 브라우저를 열어 브레이크포인트로 크기를 바꾸고, 단지 빌드가 통과하는지만 확인하는 대신 결과물을 레퍼런스와 다시 비교합니다.

세 가지 모두의 바탕에 깔린 교훈: Codex는 기본적으로 감각을 가지고 있지 않습니다. 제약, 디자인 시스템, 미학 skill, 구체적 레퍼런스, 을 주면 좋은 디자인을 만들어 냅니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞물립니다(아래에서 자세히).

디자인 작업을 위한 Codex 설정하기, 처음부터

깨끗한 머신에서 UI를 만들고 검증할 수 있는 Codex까지 가는 전체 경로는 다음과 같습니다.

원클릭 경로를 원하시나요? Open Design 데스크톱 앱 다운로드, Codex를 엄선된 skill 및 디자인 시스템 라이브러리와 함께 묶어 두었기 때문에, Codex를 agent로 선택하기만 하면 CLI 설정 없이 바로 디자인을 시작할 수 있습니다. 아래 단계는 Codex를 직접 연결하고 싶은 경우의 수동 경로입니다.

# 1. Codex CLI 설치
npm install -g @openai/codex
# 또는: brew install --cask codex
# 또는: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. 인증 (한도를 높이려면 ChatGPT 로그인 권장)
codex            # 그런 다음 “Sign in with ChatGPT” 선택

# 3. 프로젝트 컨텍스트 생성
codex            # 프로젝트 안에서 /init 실행해 AGENTS.md 생성

# 4. 공식 프런트엔드 skill 추가 후 Codex 재시작
# (Codex 앱에서) $skill-installer frontend-skill

# 5. Figma MCP 서버 연결 (선택, 디자인 핸드오프용)
codex mcp add figma --url https://mcp.figma.com/mcp

• 디자인 규칙을 담기: tokens, 기본 요소, 컨벤션을 AGENTS.md 또는 DESIGN.md에 담고 Codex가 그것을 보도록 가리키세요. 그러면 결과물이 평범한 모습으로 기본 회귀하지 않고 브랜드에 맞춰집니다.
• 올바른 추론 수준 고르기: OpenAI는 낮음~중간 추론 수준이 종종 최고 설정보다 더 강한 프런트엔드 결과를 낸다고 밝힙니다.

스크린샷-투-UI 워크플로

Codex로 얻는 가장 효과적인 디자인 루프는 레퍼런스 이미지를 동작하는 반응형 UI로 바꾸고 맞아떨어질 때까지 반복하는 것입니다. OpenAI 자체의 안내는 다섯 단계로 압축됩니다.

1. 가지고 있는 가장 명확한 시각 레퍼런스에서 시작하세요, 그리고 히어로 한 컷이 아니라 여러 상태(데스크톱과 모바일, hover, 빈 상태, 로딩)를 포함하세요.
2. 프롬프트에서 구체적으로 쓰세요. 모호한 프롬프트는 평범한 UI를 낳습니다.
3. 디자인 시스템을 준비하고, tokens와 정식 기본 요소가 어디에 있는지 Codex에게 알려 주세요.
4. Codex가 실제 브라우저에서 렌더링하고 브레이크포인트로 크기를 바꾸도록 Playwright 대화형 skill을 활성화하세요.
5. Codex가 자신의 구현을 스크린샷과 다시 비교하게 하여 반복하세요, 단지 빌드가 되는지만 확인하지 마세요.

스크린샷을 터미널로 끌어다 놓거나 image 플래그로 이미지를 넣은 다음, 구체적인 제약과 함께 프롬프트하세요:

codex -i reference-desktop.png -i reference-mobile.png \
  "이 디자인을 React + Vite + Tailwind + TypeScript로 구현해줘.
   기존 디자인 시스템 컴포넌트와 token을 재사용해줘.
   간격, 레이아웃, 위계를 맞추고 반응형으로 만들어줘.
   Playwright skill로 UI가 참고 이미지와 일치하는지 검증하고
   일치할 때까지 반복해줘."

두 번째 터미널에서 dev 서버를 띄우고, 프롬프트는 작고 집중되게 유지하며, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때 Codex에게 알려 주세요). 그래야 각 패스가 깨끗한 기반 위에서 쌓입니다.

프런트엔드 및 UI 디자인을 위한 Codex

스크린샷 하나를 페이지로 바꾸는 건 데모이고, 실제 프런트엔드를 출시하는 것이 진짜 일입니다. Codex의 UI 디자인 작업은 단 한 장의 히어로 샷이 아니라 시스템을 구축하는 것으로 다룰 때 좋아집니다, 재사용 가능한 컴포넌트, 반응형 레이아웃, 그리고 모든 인터랙션 상태까지. GPT-5.4의 향상된 이미지 이해와 자기 검증이 이를 현실적으로 만들지만, 구조는 여전히 당신에게서 나옵니다.

• 컴포넌트 우선: 전체 페이지를 조합하기 전에, 당신의 tokens에 맞춰 원자적이고 재사용 가능한 컴포넌트(버튼, 입력창, 카드, 내비게이션)를 먼저 만들도록 Codex에 요청하세요. 그래야 프런트엔드가 일회성이 아니라 일관되게 유지됩니다.
• 기본은 반응형: 데스크톱과 모바일 레퍼런스를 주고 브레이크포인트의 이름을 명시하세요. 단일 뷰포트를 믿지 말고, Codex가 실제 브라우저에서 크기를 조절하며 깨지는 레이아웃을 고치게 하세요.
• 모든 인터랙션 상태: hover, focus, active, 빈(empty) 상태, 로딩, 에러 상태를 명확히 지정하세요, UI를 완성돼 보이게 만들지만 평범한 AI 결과물이 대개 건너뛰는 상태들입니다.
• 접근성 있는 마크업: 시맨틱 HTML, 레이블이 달린 컨트롤, 보이는 focus 링, 충분한 대비를 요구하고, Codex가 빌드의 일부로 이를 점검하도록 하세요.

컴포넌트와 그 상태들을 명시적으로 프롬프트한 다음, Codex가 레퍼런스와 대조해 검증하게 하세요:

codex "React + Tailwind + TypeScript로 반응형 pricing 섹션을 만들어 줘.
   내 디자인 시스템 tokens와 Button/Card 컴포넌트를 재사용하고,
   hover, focus, 모바일 세로 정렬 상태를 포함해 줘.
   Playwright skill로 pricing-desktop.png와
   pricing-mobile.png에 대해 375px와 1280px에서 대조하고, 맞을 때까지 반복해 줘."

좋은 프런트엔드 결과물을 “AI 티”와 구분 짓는 패턴은 검증입니다: Codex가 UI를 렌더링하고, 브레이크포인트 전반에서 당신의 레퍼런스와 비교하며 반복합니다, 빌드가 통과하는지만 확인하는 것이 아니라.

Codex로 디자인 시스템 구축하기

디자인 시스템은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다, Codex가 평범한 Inter-와-보라색 룩으로 기본 회귀하는 대신 당신의 색상, 타입 스케일, 간격, 컴포넌트를 알게 되는 방법이기 때문입니다. Codex에 맞춰 빌드할 디자인 시스템을 주면, 그것이 만들어 내는 모든 화면이 동일한 감각을 물려받습니다.

• tokens 정의하기: 색상, 타이포그래피, 간격, 반경, 그림자를 이름 붙인 tokens로 담아내세요, Codex가 화면마다 값을 지어내는 대신 재사용하는 어휘입니다.
• 프리미티브 담아내기: Codex가 매번 새로 그리는 대신 조합할 수 있도록, 당신의 정식 컴포넌트(Button, Input, Card, Modal)를 가리켜 주세요.
• Codex가 읽는 곳에 적어두기: 에이전트가 매 실행마다 로드하는 AGENTS.md나 DESIGN.md에 규칙을 담으세요: 히어로 카드 금지, 서체 최대 두 종, 강조색 하나, 브랜드 우선 위계.
• 매 패스마다 강제하기: 새 UI를 시스템과 대조해 점검하고 이탈을 표시하도록 Codex에 요청하세요. 그래야 디자인 시스템이 첫 화면 이후 쇠퇴하지 않고 실제로 유지됩니다.

반대 방향으로 작업할 수도 있습니다: Codex에 레퍼런스 화면 몇 개를 건네고, 이후 당신이 다듬을 시작용 디자인 시스템, tokens와 프리미티브, 을 추출하도록 요청하세요. 어느 쪽이든, 시스템은 결과를 반복 가능하게 만드는 산출물입니다.

Codex + Figma: 디자인 ↔ 코드 왕복 연동

2026년 2월, OpenAI와 Figma는 공식 파트너십을 발표하며 앞선 Figma MCP 베타를 일급의 양방향 통합으로 끌어올렸습니다. 양쪽 방향 모두에서 작동합니다.

• 디자인 → 코드: Figma에서 프레임의 “link to selection”을 복사해 get_design_context와 함께 Codex에 붙여넣고, 기존 컴포넌트 라이브러리를 사용해 디자인을 구현하도록 요청하세요.
• 코드 → 디자인: generate_figma_design 도구(“Code to Canvas”)는 실행 중인 라이브 UI를 편집 가능한 Figma 프레임으로, 화면 전체, 선택한 요소, 또는 파일 전체로, 되돌립니다.

Figma MCP는 원격 서버로 실행되며 요청 한도에서 면제됩니다. 한 번 추가하면 Codex, Claude Code, Cursor, VS Code 등에서 사용할 수 있습니다, 바로 Open Design이 오케스트레이션하도록 설계된 이식 가능한 멀티 에이전트 역량의 전형입니다.

디자인을 위한 Codex vs Cursor vs Claude Code

디자인 작업에 단 하나의 승자는 없습니다, 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 함께 쌓아 씁니다. 공정한 요약은 다음과 같습니다:

커뮤니티에서 반복되는 결론은 감각이 사람에게서 나온다는 것입니다: 셋 모두 skill, 레퍼런스, 제약이 없으면 평범한 미학으로 기본 회귀합니다. 그것이 풀어야 할 진짜 문제이며, 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

Codex 디자인 플러그인 비교 (Open Design 포함)

Codex의 디자인 능력은 거의 전적으로 무엇을 연결하느냐에 달려 있습니다. 오늘날 Codex와 함께 쓸 수 있는 주요 디자인 플러그인과 도구, 그리고 그 안에서 Open Design이 어디에 위치하는지 정리했습니다:

선택 방법: Codex 안에서 OpenAI 자체 디자인 플로우를 쓰고 싶다면 Product Design plugin이 방향 탐색, 플로우 점검, 라이브 URL 프로토타이핑을 커버합니다. 원본 출력 품질을 높이려면 frontend design skill이 레버리지가 가장 큰 추가입니다. 공식 Figma 연동은 팀이 Figma 중심으로 일한다면 필수이며, 이식 가능하므로 Claude Code와 Cursor를 포함한 다른 어떤 것과도 함께 쓸 수 있습니다.

이 중에서 처음부터 끝까지 오픈소스이고 로컬 우선이며 BYOK인 것은 Open Design뿐입니다. Codex를 엄선된 skill과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다, 그래서 Codex를 뛰어나게 만드는 디자인 컨텍스트가 첫 실행부터 갖춰져 있고, 프로젝트마다 손으로 짜맞출 필요가 없으며, 모든 산출물이 자신의 리포지토리에 남습니다.

코드를 모르는 디자이너를 위한 Codex

Codex로 디자인하기 위해 엔지니어일 필요는 없습니다. 에이전트는 평이한 언어로 된 의도와 실제 레퍼런스를 받아 동작하는 반응형 UI를 돌려줍니다, 덕분에 프런트엔드 개발자뿐 아니라 디자이너와 프로덕트 담당자에게도 진짜 도구가 됩니다. 요령은 코딩 세션이 아니라 디자인 브리프처럼 다루는 것입니다.

• 평이한 언어로 설명하기: 원하는 바를 디자인 용어로 말하세요, 레이아웃, 위계, 톤, 느낌, 그러면 Codex가 그것을 마크업으로 옮깁니다.
• 레퍼런스에서 시작하기: 스크린샷, 무드보드, 또는 어떤 브랜드의 사이트를 넣어 주세요. 룩을 제대로 잡는 데는 아무리 많은 설명글보다 구체적인 레퍼런스가 낫습니다.
• 실제 브라우저에서 미리보기: Codex가 결과를 렌더링해 열게 하여 당신의 눈으로 판단하고, 크기를 조절하고, 어긋난 부분을 짚어 주세요.
• 안전하게 반복하고 되돌리기: 에이전트는 샌드박스에서 실행되므로, 한 방향을 시도해 좋은 패스는 남기고 나쁜 패스는 아무것도 망가뜨리지 않고 되돌릴 수 있습니다.

함정, 그리고 “AI 티” 나는 결과물을 피하는 법

Codex가 생성한 디자인에 대한 가장 흔한 불만은 평범해 보인다는 것입니다, 부드러운 그라데이션, 떠 있는 패널, 과도하게 둥근 모서리, 극적인 그림자, “AI가 만들었다고 외치는” Inter-와-보라색 분위기. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃, 지시문이 UI 카피에 새어 나오는 것, 사용 한도에 빠르게 도달하는 것이 있습니다.

• 프런트엔드 skill 설치하기: 엄선된 미학 skill은 Codex가 기본 모습 대신 실제 방향에 전념하도록 강제합니다.
• Playwright 검증 활성화하기: Codex가 브레이크포인트 전반에서 렌더링하고 스스로 점검하게 하여 레이아웃이 모바일에서 조용히 깨지지 않도록 하세요.
• tokens와 레퍼런스 제공하기: 실제 디자인 tokens와 레퍼런스 스크린샷은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다.
• AGENTS.md에 규칙 담기: “히어로 카드 금지, 서체 최대 두 종, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 매번 읽는 곳에 두세요.

모든 완화책이 에이전트에게 엄선된 디자인 컨텍스트를 주는 것임에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고가 바로 Open Design이 없애는 것입니다.

BYOK: 당신의 OpenAI 키, 당신의 ChatGPT 요금제, 당신의 한도

Codex는 자기 키 사용(BYOK) 방식입니다: 당신 자신의 OpenAI API 키나 ChatGPT 구독으로 인증하며, 자격 증명은 당신의 것입니다. 이는 비용 통제와 프라이버시에 중요합니다, 당신의 키나 작업물에 관한 어떤 것도 제3자를 거칠 필요가 없습니다.

• 적절한 추론 수준 고르기: OpenAI에 따르면 낮음~중간 추론이 가장 높은 설정보다 프런트엔드 결과가 더 나은 경우가 많습니다, 게다가 비용도 더 적게 듭니다.
• 프롬프트는 작고 집중되게 유지하기: 짧고 구체적인 작업은 하나의 거대한 프롬프트보다 token을 덜 쓰고 더 깔끔한 diff를 만듭니다.
• 좋은 반복은 커밋하기: 동작하는 패스는 저장하고 나머지는 되돌리세요. 그래야 매번 깨끗한 기반을 다시 생성하는 데 비용을 치르지 않습니다.

Open Design 안에서 Codex로 디자인하기

Open Design은 위 워크플로가 계속 요구하던 그 오픈소스 디자인 레이어입니다. Codex를 일급 어댑터로 취급하고 엄선된 skill 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸 줍니다, 그래서 Codex를 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립하는 대신 첫 실행부터 갖춰져 있습니다.

1. Open Design을 설치하고 에이전트로 Codex를 선택하세요.
2. OpenAI API 키(BYOK) 또는 ChatGPT 구독으로 인증하세요, 자격 증명은 여러분의 머신에 머물며 결코 저희를 거쳐 프록시되지 않습니다.
3. 디자인 시스템과 skill을 고른 다음, 일관된 감각으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.
4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 여러분 자신의 레포에 존재합니다.

같은 Codex 에이전트, 같은 키, 그 위에 실제로 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. 로컬 우선이며 Apache-2.0이라, 여러분의 작업이나 자격 증명 중 어떤 것도 머신을 떠나지 않습니다.

자주 묻는 질문

1. 01 OpenAI Codex가 정말 디자인 작업을 할 수 있나요? +

   네, 프런트엔드 skill, 디자인 시스템, 그리고 실제 레퍼런스 이미지가 컨텍스트에 있으면 Codex는(특히 GPT-5.4에서) 양산 품질의 반응형 UI를 만들고 브라우저에서 검증할 수 있습니다. 그런 컨텍스트가 없으면 평범한 모습으로 기본 회귀하는 경향이 있는데, 그것이 바로 Open Design이 메우는 격차입니다.

2. 02 이것이 OpenAI Codex Product Design 플러그인인가요? +

   아니요. Open Design은 Codex를 에이전트로 통합하는 독립적인 오픈소스 프로젝트입니다. 로컬 우선의 개방적인 skill 및 디자인 시스템 라이브러리로 OpenAI 자체 도구를 보완합니다.

3. 03 Codex로 디자인하려면 ChatGPT 구독이 필요한가요? +

   OpenAI API 키(BYOK) 또는 ChatGPT 구독 중 어느 쪽이든 사용할 수 있습니다. ChatGPT 로그인은 대체로 더 넉넉한 한도를 주며, Open Design은 어느 경우든 결코 여러분의 자격 증명을 프록시하지 않습니다.

4. 04 프런트엔드 디자인에는 Codex인가요, Claude Code인가요? +

   둘 다 강력합니다. Claude Code는 구체적이고 코드베이스를 이해하는 디자인 결정으로 알려져 있고, Codex는 GPT-5.4 이후 강한 비주얼 완성도를 갖추었으며 위임된 샌드박스 빌드에 능합니다. 많은 팀이 둘 다 씁니다, Open Design을 쓰면 디자인 워크플로를 바꾸지 않고 에이전트를 전환할 수 있습니다.

5. 05 Codex를 Figma에 어떻게 연결하나요? +

   공식 Figma MCP 서버를 추가하세요(codex mcp add figma --url https://mcp.figma.com/mcp). 그러면 get_design_context로 Figma 프레임을 코드로 구현하고, generate_figma_design으로 실행 중인 UI를 편집 가능한 Figma 프레임으로 되돌릴 수 있습니다.

6. 06 평범한 “AI 티” 미학을 어떻게 피하나요? +

   프런트엔드 skill을 설치하고, 실제 디자인 tokens와 레퍼런스 스크린샷을 제공하며, 브랜드 규칙을 AGENTS.md에 담고, Playwright 검증을 활성화하세요. Open Design은 이것들을 엄선한 라이브러리로 제공하여 프로젝트마다 하는 설정을 건너뛰게 해 줍니다.

7. 07 Open Design은 OpenAI와 제휴되어 있나요? +

   아니요. Codex는 OpenAI의 제품이며, Open Design은 이를 일급 어댑터로 지원하는 독립적인 오픈소스 프로젝트입니다. OpenAI와 Codex는 OpenAI의 상표입니다.

8. 08 제 파일과 자격 증명은 안전한가요? +

   네, Open Design은 로컬 우선입니다. 여러분의 파일, 산출물, DESIGN.md는 여러분 자신의 레포에 머물고, OpenAI 자격 증명은 에이전트가 직접 사용하며 결코 Open Design 서버를 거치지 않습니다.

9. 09 Codex가 반응형 프런트엔드 UI를 만들 수 있나요? +

   네. 데스크톱과 모바일 레퍼런스, 그리고 Playwright skill이 있으면 Codex는 반응형 프런트엔드 UI를 만들고, 각 브레이크포인트에서 실제 브라우저에 렌더링하며, 맞을 때까지 반복합니다, 컴포넌트, 레이아웃, 인터랙션 상태까지 포함해서요. 결과물을 평범하지 않고 일관되게 유지하는 비결은 당신의 디자인 시스템 tokens를 주는 것입니다.

10. 10 Codex에 디자인 시스템을 어떻게 부여하나요? +

    당신의 tokens(색상, 타입, 간격)와 정식 컴포넌트를 Codex가 매 실행마다 읽는 AGENTS.md나 DESIGN.md 파일에 담고, 그에 맞춰 빌드하도록 요청하세요. Open Design은 엄선된 디자인 시스템 라이브러리를 제공하므로 처음부터 직접 작성하는 대신 시스템을 고를 수 있고, 이후 Codex가 모든 화면을 그에 맞춰 만들어 냅니다.

11. 11 코드를 모르는데 Codex로 디자인할 수 있나요? +

    네. Codex는 평이한 언어로 된 브리프와 레퍼런스 이미지를 동작하는 UI로 바꿔 주므로, 디자이너와 프로덕트 담당자가 코드를 쓰지 않고도 사용할 수 있습니다. Open Design의 데스크톱 앱은 터미널과 설정을 완전히 없앱니다, 에이전트, 디자인 시스템, skill을 고른 다음 로컬 UI에서 생성하고 미리보면 됩니다.

12. 12 Open Design은 Codex에서 BYOK를 지원하나요? +

    네. Open Design은 자기 키 사용 방식입니다: 당신 자신의 OpenAI API 키나 ChatGPT 구독으로 Codex를 인증하며, 자격 증명은 당신의 에이전트가 직접 사용하고 Open Design을 거쳐 프록시되지 않습니다. 로컬 우선이므로 파일과 DESIGN.md는 당신 자신의 리포지토리에 남습니다.

13. 13 Codex에 frontend design skill을 어떻게 추가하나요? +

    openai/skills 카탈로그에서 공식 frontend design skill을 설치하세요. Codex 앱에서 frontend-skill용 skill 설치 프로그램을 실행한 뒤 Codex를 재시작하면 됩니다. 이 frontend design skill은 Codex가 천편일률적인 기본 룩 대신 진짜 미학, 카드 없는 레이아웃, 브랜드 우선 위계, 서체 최대 두 종류에 강조색 하나, 에 전념하게 만들며, Codex의 디자인 품질을 좌우하는 가장 큰 지렛대입니다.