ui-wireframe-to-htmllisted

# ui-wireframe-to-html ## 中文速查 - 中文名：PRD 到 UI 线框 / 结构阶段 - 英文稳定名：`ui-wireframe-to-html` - 分类：产品与 PRD - 你可以这样叫我：`把 PRD 变成线框`、`先出 UI 结构`、`先做 ASCII 布局`、`只确认页面结构和状态`、`生成低保真 HTML wireframe` - 适合：从 PRD 界面定义输出 screen inventory、状态模型、ASCII layout 和低保真 HTML mockup，先明确结构和状态再决定是否进入高保真。 - 不适合：直接做高保真视觉；让前端复刻 UI；对齐真实项目组件、token、icon；输出 component map 或 implementation notes。这些场景用 `ui-mockup-desktop-workbench`。 ## Relationship To `ui-mockup-desktop-workbench` This Skill is the structure-only stage of the broader UI mockup workflow. Use this Skill when the user explicitly wants to stop at structure, wireframe, information architecture, state model, or low-fidelity HTML. Use `ui-mockup-desktop-workbench` instead when the user wants: - high-fidelity visual handoff - real frontend project alignment - project-native preview route/component - production component mapping - implementation notes - screenshots for final UI approval - "开发完全复刻这个 UI" The normal staged path is: `PRD -> ui-wireframe-to-html -> structure confirmation -> ui-mockup-desktop-workbench -> visual handoff / preview -> implementation` When `ui-mockup-desktop-workbench` is already active, do not call this Skill separately. The main Skill includes this structure stage internally. ## Overview 将 PRD 中的界面定义逐步推进为： 1. Screen inventory 2. State model 3. ASCII layout 4. Optional low-fidelity HTML wireframe The purpose is to make the page structure, state coverage, and interaction skeleton reviewable before anyone spends effort on