프런트엔드 & UI
Agent-Native Plans
텍스트 계획을 와이어프레임과 프로토타입이 딸린 검토용 문서로 바꿉니다.
무엇인가
코딩 에이전트를 위한 구조화된 계획 모드. 계획이 인라인 다이어그램, 코드, 데이터 모델, 미해결 질문, 그리고 선택적인 상단 캔버스나 라이브 프로토타입을 갖춘, 한눈에 훑히는 문서가 됩니다.
Generate rich visual plans as MDX with diagrams, API specs and zoomable wireframes, then recap what the agent did.
디자인에 왜 중요한가
- UI 계획은 사용자에게 보이는 상태마다 하나씩, 와이어프레임 아트보드로 시작합니다.
- 검토자가 채팅에서 옥신각신하는 대신 고정된 요소에 직접 코멘트합니다.
- 여러 단계짜리 플로에는 정적 목업 옆에 실제로 조작 가능한 프로토타입이 붙습니다.
다루는 내용
- When to use
- Plan discipline
- Core workflow
- Visual surface choice
- Wireframe quality
- Self-review before handoff
설치 방법
Agent-Native Plans
-
저장소를 클론하세요.
git clone https://github.com/BuilderIO/skills -
Codex에 스킬 파일 경로를 지정하세요.
skills/visual-plan/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
Agent-Native CLI로 설치한 뒤 /visual-plan 커맨드를 실행하세요.
-
기존 Codex나 Markdown 계획을 붙여 넣어 원본으로 쓰세요.
-
피드백을 읽고, 계획을 손보고, 저장된 결과를 확인하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.