디자인 워크플로우
/plugins·/skills·/mcp·/ide를 Figma, ImageGen, Playwright와 연결해 UI를 설계·구현·검증하는 공식 Codex 디자인 흐름
핵심 요약
- Codex CLI에는 별도의
/design명령이 없습니다. 디자인 작업은/plugins,/skills,/mcp,/ide를 Skill·Plugin·MCP 도구와 조합합니다. - Figma 구현은 정확한 node 링크와
get_design_context,get_metadata,get_screenshot을 기준으로 시작합니다. - UI 목업은
$imagegen으로 방향을 탐색하고, 선택한 이미지를 새 Codex 작업에 다시 첨부해 구현합니다. - 구현 후
$playwright로 실제 브라우저의 데스크톱·모바일 화면과 동작을 비교하고/diff,/review로 마무리합니다.
명령과 디자인 기능을 구분하세요
/skills, /plugins, /mcp, /ide는 디자인 기능으로 들어가는 명령입니다. Figma,
$imagegen, $playwright, build-web-apps는 명령 자체가 아니라 Skill·Plugin·MCP 기반의
작업 기능입니다. 설치 상태와 제품 표면에 따라 표시되는 이름이나 mention 문법이 다를 수 있으므로
/skills, /plugins, /apps의 picker가 삽입한 값을 우선합니다.
디자인 작업에 쓰는 명령
| 명령 | 디자인 작업에서의 역할 | 확인할 것 |
|---|---|---|
/plugins | Figma·Build Web Apps 같은 기능 묶음 탐색·설치 | 공급원, 버전, bundled hook, 활성 상태 |
/skills | Figma·ImageGen·Playwright 같은 작업 지침 선택 | 현재 세션 노출 여부와 정확한 skill token |
/mcp | Figma MCP 서버와 실제 도구 목록 확인 | get_design_context, get_metadata, get_screenshot 노출 여부 |
/apps | Slack·Linear·Google Drive 같은 제품 자료 연결 | picker가 삽입한 app mention과 권한 |
/ide | 현재 컴포넌트·선택 영역을 구현 컨텍스트에 포함 | 열린 민감 파일과 선택 범위 |
/permissions | 브라우저·외부 도구·파일 변경 권한 통제 | 읽기와 쓰기 도구의 승인 정책 |
/diff, /review | 구현 결과와 회귀 위험 검토 | 디자인 일치뿐 아니라 코드 품질·테스트 |
Figma 디자인을 코드로 구현
1. 기능과 연결 상태 확인
/plugins
/skills
/mcp/plugins에서 Figma 기능이 설치·활성화되어 있는지 확인합니다./skills에서 Figma와 Playwright interactive 스킬을 찾습니다./mcp에서 Figma 서버와get_design_context,get_metadata,get_screenshot을 확인합니다.- 도구가 보이지 않으면
/mcp verbose로 인증·서버·도구 노출 상태를 진단합니다.
2. 정확한 Figma 선택에서 시작
상위 파일이나 주변 frame이 아니라 구현할 frame·component·variant의 정확한 링크를 제공합니다. 첫 구현 전에 다음 순서를 프롬프트에 명시합니다.
- 정확한 node에
get_design_context실행 - 응답이 잘리면
get_metadata로 구조를 파악하고 필요한 node만 다시 조회 - 코딩 전에 정확한 variant에
get_screenshot실행 - 저장소의 기존 컴포넌트·디자인 토큰·아이콘·라우팅 패턴 재사용
- Figma가 반환한 구조를 그대로 복사하지 않고 프로젝트의 실제 유틸리티와 컴포넌트 규칙으로 번역
Figma 스킬을 사용해 이 정확한 frame을 구현해줘: <FIGMA_NODE_URL>
먼저 get_design_context를 실행하고, 응답이 잘리면 get_metadata로 필요한 node를 좁혀줘.
코딩 전에 get_screenshot으로 대상 variant를 확인해줘.
기존 디자인 시스템의 컴포넌트와 토큰을 재사용하고 desktop/mobile 반응형을 모두 맞춰줘.3. 브라우저에서 시각 검증
구현이 끝나면 Playwright interactive 스킬로 실제 앱을 열어 Figma reference와 비교합니다.
- 데스크톱과 모바일 breakpoint 확인
- spacing, layout, hierarchy, typography, asset 비교
- hover, focus, loading, empty, error 같은 상호작용 상태 확인
- console error와 깨진 asset 확인
- 차이가 남으면 수정한 뒤 같은 viewport에서 다시 캡처
사용자 스토리에서 UI 목업 만들기
1. 제품 맥락 모으기
필요하면 /apps 또는 설치된 plugin을 통해 Slack, Linear, Google Drive 자료를 연결합니다. mention 문법은 표면별로 다를 수 있으므로 picker가 삽입한 값을 사용합니다.
2. ImageGen으로 방향 탐색
$imagegen에 사용자 스토리, 정보 구조, 디자인 시스템 제약, 기존 스크린샷이나 Figma reference를 함께 제공합니다. 한 번에 완성본을 요구하기보다 2~3개의 방향을 만든 뒤 선택한 안을 좁혀갑니다.
$imagegen을 사용해 이 사용자 스토리를 해결하는 UI 목업 방향 3개를 만들어줘.
현재 정보 구조와 디자인 시스템을 유지하고, 첨부한 화면을 시각 기준으로 사용해줘.
각 방향은 핵심 상호작용과 desktop/mobile 차이가 드러나야 해.3. 목업을 프로토타입으로 전환
최종 목업을 선택한 뒤 새 Codex 작업을 열고 이미지를 다시 첨부합니다. 웹 앱이라면 Build Web Apps plugin을 선택해 구현하고, Playwright interactive로 목업과 실제 결과를 비교합니다.
완료 체크리스트
- 정확한 Figma node 또는 최종 목업 이미지를 source of truth로 지정했습니다.
- 저장소의 기존 디자인 시스템과 토큰을 재사용했습니다.
- placeholder나 불필요한 새 icon package를 만들지 않았습니다.
- 데스크톱·모바일 화면과 핵심 상호작용을 실제 브라우저에서 확인했습니다.
- 접근성 상태와 console error를 확인했습니다.
-
/diff와/review로 코드 변경과 회귀 위험을 검토했습니다.
출처
- Figma designs to code: https://learn.chatgpt.com/use-cases/figma-designs-to-code
- User stories to UI mocks: https://learn.chatgpt.com/use-cases/user-stories-to-ui-mocks
- Codex slash commands: https://learn.chatgpt.com/docs/developer-commands?surface=cli
- Codex MCP customization: https://learn.chatgpt.com/docs/customization/overview#mcp
- OpenAI Figma plugin: https://github.com/openai/plugins/tree/main/plugins/figma
- OpenAI Playwright interactive skill: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
- OpenAI Build Web Apps plugin: https://github.com/openai/plugins/tree/main/plugins/build-web-apps