第三階段：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 |
第三階段：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-mockup第三階段：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