3단계: UI/UX 모형 및 와이어프레임 디자인. 와이어프레임, 화면 흐름, 사용자 여정 지도를 만듭니다. 다음: $phase-4-api. 트리거: 목업, 와이어프레임, UI 디자인, UX, 화면 디자인, 프로토타입, 목업, 와이어 프레임, 디자인 설계, UI 디자인, 목크압, 와이야후레임, 원본, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup 다음에는 사용하지 마십시오: 코딩 규칙($phase-2-convention 사용), 구성요소($phase-5-design-system 사용).
명령줄에서 phase-3-mockup AI 스킬을 개발 환경에 빠르게 설치
출처: popup-studio-ai/bkit-codex.
Phase 3 creates visual blueprints for the application. Mockups prevent expensive redesigns during development and align stakeholders on the user experience.
| start | Begin Phase 3 | $phase-3-mockup start | | screens | List all screens needed | $phase-3-mockup screens | | flow | Create user flow diagram | $phase-3-mockup flow |
| Mobile | < 640px | Single column, hamburger menu | | Tablet | 640-1024px | Two columns, condensed nav | | Desktop | > 1024px | Full layout, sidebar visible |
3단계: UI/UX 모형 및 와이어프레임 디자인. 와이어프레임, 화면 흐름, 사용자 여정 지도를 만듭니다. 다음: $phase-4-api. 트리거: 목업, 와이어프레임, UI 디자인, UX, 화면 디자인, 프로토타입, 목업, 와이어 프레임, 디자인 설계, UI 디자인, 목크압, 와이야후레임, 원본, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup 다음에는 사용하지 마십시오: 코딩 규칙($phase-2-convention 사용), 구성요소($phase-5-design-system 사용). 출처: popup-studio-ai/bkit-codex.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/popup-studio-ai/bkit-codex --skill phase-3-mockup3단계: UI/UX 모형 및 와이어프레임 디자인. 와이어프레임, 화면 흐름, 사용자 여정 지도를 만듭니다. 다음: $phase-4-api. 트리거: 목업, 와이어프레임, UI 디자인, UX, 화면 디자인, 프로토타입, 목업, 와이어 프레임, 디자인 설계, UI 디자인, 목크압, 와이야후레임, 원본, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup 다음에는 사용하지 마십시오: 코딩 규칙($phase-2-convention 사용), 구성요소($phase-5-design-system 사용). 출처: popup-studio-ai/bkit-codex.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/popup-studio-ai/bkit-codex --skill phase-3-mockup 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/popup-studio-ai/bkit-codex