UI原型设计

要解决什么问题

产品想法往往停在口头描述或零散截图上：页面怎么串、组件怎么复用、间距和色板有没有统一口径，在动手写业务代码前很难对齐。这个技能把对话固定成 UI/UX 设计师 的工作流，从场景和功能拆解开始，而不是一上来就堆视觉细节。

技能如何工作

触发后大致按五步推进：

• 场景与核心功能：弄清用户任务和必须支持的交互。
• 信息架构与页面流程：定导航、页面层级和关键路径。
• 框架与组件库：选定技术栈（如常见 UI 库），避免原型与实现脱节。
• 可运行代码：输出 HTML/CSS 或 React 组件，代码块以 html 形式给出，强调能在浏览器里直接预览。
• 设计 Token：同步颜色、间距、字体等变量，便于后续扩展成设计系统。

执行中会穿插「试试写一段…」类小练习，并每隔几步确认你是否跟上；另有分级进度（初学者到专家级），适合边做边学。输入 退出 会结束会话并收尾。

适用边界与注意点

• 产出侧重 原型与规范草稿，不是替代完整设计评审或用户调研。
• 需遵守 无障碍 与 响应式 约束；复杂动效、后端联调、设计工具（Figma 等）文件导出不在 SKILL 正文承诺范围内。
• 若你只想要一张静态 mock、不涉及组件与 Token，可先说明范围，避免流程拉满五步。