不会设计，怎样让产品界面清楚、统一又好用？
先安排内容和任务层级，再选择参考与现有组件，最后用实际页面检查一致性和可访问性。
本页目录
直接回答
从页面要帮助用户完成的事出发，再决定布局、字体和颜色。组件库、模板、Stitch 与 Pencil 等路线的价值，是复用已成形的界面基础，不是要求每个项目安装全部工具。先选一种适合当前任务的参考，沿用项目已有组件和样式，把标题、说明、输入、结果与下一步的层级排清楚。工具和视觉风格是手段，重点仍是可读、可操作，以及不同状态下保持一致。
适用场景
- AI 生成的页面像零散组件拼起来的
- 功能可用，但主操作不明显、说明过多
- 想参考成熟产品，而不知该学哪些部分
一步一步做
先列页面任务和内容顺序
写下访问者最先需要知道什么、接着需要相信什么、然后要做什么。工具页可以优先展示输入与示例；说明页需要先讲用途与边界。不要把营销首页的全部区块机械加到每个内部页面。
选择有限且具体的参考
截取参考产品中有帮助的布局、表单或结果呈现，并说明为什么适合自己的任务。学习信息结构和交互，不直接搬用品牌标识、专有文案或不能使用的资产。
沿用已有组件和统一规则
检查项目已有按钮、表单、卡片、字体、颜色和间距。能复用就复用，缺什么补什么。确定主按钮、次按钮、错误提示和选中状态的统一表现，避免同一种动作在不同页面出现不同颜色和名称。
分开还原结构与加入行为
使用设计工具导出交付物时，先还原主要页面和共用导航，再连接真实交互。让 AI 按页面或明确组件修改，给出截图与具体问题，例如“结果区太窄导致长文本难读”，比“高级一点”更容易得到可检查的改进。
检查真实内容与不同使用方式
整理建议：用长标题、空内容、错误信息和手机宽度检查排版；用键盘走过主要操作，确保焦点可见、表单有标签。重要内容不能只靠颜色表达。图片应服务说明，避免为了填满页面添加与任务无关的装饰。
把设计交付物接到现有项目
Stitch 导出路线导出每屏 code.html 与 screen.png，再转成 React；Pencil 路线则操作画布，两者不是同一套命令。先列页面、参考图、可用代码、图标字体及当前技术栈，再决定还原哪一屏。先复用项目已有布局、导航和组件，还原静态状态，然后接真实路由、数据、加载和失败；截图好看不证明按钮可用。MCP 配置中的本机路径与版本不能照抄，也不要整份覆盖已有配置。
案例拆解
假设示例：把翻译结果页改得更清楚
假设黑话翻译器把五种输出放在五张同样醒目的卡片里，用户不知道先看哪里。先突出“你现在要做什么”，把待追问信息放在其后，再展示可复制回复；词汇解释作为继续阅读的内容。统一复制按钮的位置，生成失败时保留输入。这里的改进来自内容优先级，而不需要重新更换整套 UI 框架。
补充假设示例：音乐界面有发现、播放、搜索和个人四屏。先把底部导航抽为一个已有项目组件，完成手机与桌面静态验收；再让搜索实际产生结果、播放按钮对应真实播放状态。若暂时没有音乐数据，明确标成演示，不把静态播放器当作完成播放功能。
行动检查
可复制模板
界面改进任务书
工作模板
页面：［位置］
用户在此要完成：［任务］
现在的问题：［截图位置＋具体影响］
内容优先级：［最重要→次要］
参考：［链接或截图］，只借鉴［结构／间距／交互］
请先检查现有组件和样式并复用，再修改必要部分。
同时覆盖桌面、手机、加载、空结果与错误状态；检查键盘操作与表单标签。完成后说明实际检查了哪些交互。
设计稿到功能页面交接单
目标页面与用户任务：
来源工具／文件：［截图、HTML、画布或组件］
实际项目：［框架、目录、组件库、路由、包管理器］
每屏交付：页面名｜参考图路径｜可用代码｜需要复用的组件
统一元素：［导航、按钮、间距、字体、颜色、错误提示］
真实行为：点击／输入／页面跳转／数据来源／空与失败状态
验收尺寸与键盘操作：
资源来源和使用权限：
实施顺序：先一屏静态→确认样式→其余页面→真实行为→逐项验收
请说明哪些只是视觉还原，哪些功能已接通，不新建重复认证和数据层。
易错点
- 只说“像苹果、漂亮、高级”：缺少任务、结构和具体参考时，AI 很难做一致选择。
- 连续安装多个组件库解决局部问题：先检查现有项目能否实现。
- 把视觉还原等同于可用：静态页面还要接入真实状态、数据和交互。