design-first-frontend은(는) 무엇을 하나요?
이미지 생성 기반 프론트엔드 디자인-투-코드 구현을 위한 Codex 스킬 전용 플러그인
이미지 생성 기반 프론트엔드 디자인-투-코드 구현을 위한 Codex 스킬 전용 플러그인
이 스킬은 Codex AI 에이전트를 위한 전용 플러그인으로, 이미지 생성(ImageGen)을 선행하여 프론트엔드 디자인을 코드로 자동 변환하는 워크플로우를 제공합니다. 개발자는 디자인 구상을 이미지로 생성한 후, 해당 이미지를 기반으로 즉시 구현 가능한 프론트엔드 코드(HTML, CSS, JavaScript 등)를 생성할 수 있습니다. 이 접근 방식은 디자인과 개발 간의 간극을 줄이고, 반복적인 수동 코딩 없이 시각적 아이디어를 프로토타입으로 빠르게 전환할 수 있도록 도와줍니다. 특히 Codex 환경에서 이미지 생성 결과물을 직접 입력 소스로 활용하여 엔드투엔드 디자인-코드 파이프라인을 구축하고자 하는 사용자에게 적합합니다. 주요 지원 플랫폼은 Codex이며, 스킬 구성은 SKILL.md에 정의된 설정에 따라 이미지 기반 프롬프트 처리와 코드 생성 로직을 연동합니다.
npx skills add whmc76/design-first-frontend이미지 생성 기반 프론트엔드 디자인-투-코드 구현을 위한 Codex 스킬 전용 플러그인
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".