Phase 3: UI/UX Mockups and Wireframe Design. Create wireframes, screen flows, and user journey maps. Next: $phase-4-api. Triggers: mockup, wireframe, UI design, UX, screen design, prototype, 목업, 와이어프레임, 화면 설계, UI 디자인, モックアップ, ワイヤーフレーム, 原型设计, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup Do NOT use for: coding conventions (use $phase-2-convention), components (use $phase-5-design-system).
Quickly install phase-3-mockup AI skill to your development environment via command line
Source: 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 |
Phase 3: UI/UX Mockups and Wireframe Design. Create wireframes, screen flows, and user journey maps. Next: $phase-4-api. Triggers: mockup, wireframe, UI design, UX, screen design, prototype, 목업, 와이어프레임, 화면 설계, UI 디자인, モックアップ, ワイヤーフレーム, 原型设计, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup Do NOT use for: coding conventions (use $phase-2-convention), components (use $phase-5-design-system). Source: popup-studio-ai/bkit-codex.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/popup-studio-ai/bkit-codex --skill phase-3-mockupPhase 3: UI/UX Mockups and Wireframe Design. Create wireframes, screen flows, and user journey maps. Next: $phase-4-api. Triggers: mockup, wireframe, UI design, UX, screen design, prototype, 목업, 와이어프레임, 화면 설계, UI 디자인, モックアップ, ワイヤーフレーム, 原型设计, 线框图, maqueta, wireframe, maquette, Wireframe, Mockup Do NOT use for: coding conventions (use $phase-2-convention), components (use $phase-5-design-system). Source: popup-studio-ai/bkit-codex.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/popup-studio-ai/bkit-codex --skill phase-3-mockup Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/popup-studio-ai/bkit-codex