设计简报 是做什么的？
如果放任不管，编码代理会从记忆中设计，而记忆给出的是平均值：居中的英雄区、紫色渐变、三个带图标的卡片。真实产品已经解决了你即将构建的每一个屏幕，且已经存在比一次即兴创作更好的完成组件。因此，把你的设计本能当作“平均值”，停止发明。你的工作是寻找、比较、挑选和适配。
两个来源各司其职，各自完成不同的工作：
| 来源 | 提供的内容 | 用途 |
|---|---|---|
| Refero | 来自真实已发布产品的屏幕、流程和样式 | 决定一个屏幕应该做什么以及长什么样 |
| 21st.dev | 由人制作、社区评分的完成组件 | 放入代码的实际组件 |
Refero 告诉你构建什么；21st.dev 直接提供零件。两者都要用。没有参考就挑选的组件通常好看但不适合屏幕；有参考但没有组件，则会由手工硬编码且效果糟糕。
设置
# Refero（一个 MCP 服务器）。然后运行 /mcp 并登录。
claude mcp add --transport http refero https://api.refero.design/mcp
# 21st.dev CLI
npx @21st-dev/cli login # 打开浏览器；之后命令为 `21st`
21st whoami # 检查是否已登录
在 21st.dev 上搜索和预览是免费的。拉取组件的代码会使用每日配额（21st usage 显示剩余量），所以先比较，只拉取你选定的组件。
如果某个工具缺失或未登录，向用户报告一次，附上修复命令，然后用可用的工具继续。不要静默回退到手工构建的 UI。
工作顺序
- 确定方向：颜色和字体。
- 在 Refero 中找到每个屏幕和流程的模式。
- 从 21st.dev 挑选每个区块的组件。
- 将一切适配到一套令牌。
- 在运行中的应用中检查结果是否符合质量标准。
对于大于一个组件的工作，在编码之前写下 UI 计划（模板在末尾）。这是一张小表格，用以防止屏幕在构建过程中被即兴修改。
1. 方向
- 颜色和字体来自用户已有的内容：他们的
DESIGN.md、现有的设计系统，或他们给出的参考。不要覆盖它。 - 如果用户没有提供任何东西，则从最佳产品的 Refero 样式中确定方向：
refero_search_styles，然后对最强的两三个样式执行refero_get_style。不要默认使用框架的默认主题，或你正在构建的平台本身的品牌调色板——那是每个项目都看起来一样的原因。 - 挑选一个主导风格并保留其鲜明特征。从其他风格中借用一两个细节。平均多个参考会得到你想避免的“安全中间值”。
- 支持亮色和暗色模式。
- 交付一个设计。不要给用户三个方案供选择，除非他们要求；选择是用户交给你的工作。
- 在安装任何组件之前，将结果写为令牌（颜色角色、字体比例、间距、圆角、阴影），以便后续每个选择都归因于一个令牌。
2. 来自 Refero 的模式
| 工具 | 解答的问题 | 示例查询 |
|---|---|---|
refero_search_styles，然后 refero_get_style | 它应该是什么样子和感觉？ | 高级金融科技网站，克制排版 |
refero_search_screens，然后 refero_get_screen | 这个屏幕上有什么，以及各种状态？ | 仪表盘空状态，数据表格筛选 |
refero_search_flows，然后 refero_get_flow | 这个流程的步骤是什么？ | 注册引导流程，订阅取消流程 |
屏幕和流程搜索需要指定 platform：web 或 ios。
- 搜索屏幕上实际存在的内容（如“定价页面年每月切换”），而不是形容词。形容词属于样式搜索。
- 每个屏幕尝试三到五个角度，包括一个做得好的知名产品。第一个结果很少是最好的。
- 也要查找状态，不仅仅是正常屏幕：空、加载、错误、成功。
- 当一个屏幕很接近时，
refero_get_similar_screens可以快速找到其相关屏幕。 - 每个屏幕保留两三个参考，并记录你从每个参考中提取的内容：结构、层次、状态、措辞。参考为屏幕提供信息，不是要复制的模板。
3. 来自 21st.dev 的组件
21st.dev 是一个精选的完成组件目录，不是 AI 生成。对于每个 UI 片段（头部、输入框、卡片、下拉菜单、聊天、加载状态、动画），搜索、比较并使用最好的那个。
21st search "<组件>" --type c --limit 10 # 仅限组件
21st get <id> # 打印所选组件的代码和演示
21st add <作者>/<slug> # 安装（底层使用 shadcn）
npx shadcn@latest add "https://21st.dev/r/<作者>/<slug>" # 使用标准 shadcn 的相同安装
21st logo <品牌> # 真实品牌 Logo 的 SVG，免费
如何挑选：
- 按槽位搜索，而非按“感觉”搜索。“定价表”“命令菜单”“文件上传”，而不是“现代简洁区块”。尝试两三种措辞。
- **比较多个，绝不取第一个结果。**打开预览。名称和描述无法告诉你组件看起来或动起来如何。
- **优先选择下载或收藏最多的。**这些计数在 21st.dev 上每个组件的页面中。受欢迎程度表明组件在真实项目中工作。但它不能证明匹配度，这是下一步检查的内容。
- **检查与屏幕的 Refero 参考是否匹配。**它应该以正确的密度完成相同的工作，并具备你需要的状态（悬停、焦点、禁用、加载、空）。检查它在手机宽度下、键盘操作时是否依然良好，并查看它引入的依赖项。
- 适配一到两项内容到你的令牌：颜色、圆角、字体。如果你发现自己正在重写组件，说明你挑错了。回去重新挑选。
- **保持兄弟组件风格一致。**来自不同作者的组件在被重新赋色后，必须读起来像一个产品。
- 仅手工构建没有候选的“胶水代码”，并说明原因。
报告每个选择，以便用户可以替换它：区块 · 组件 · 作者 · 一行原因。
4. 质量标准
- 真实 Logo，而非通用图标和色点。
- 少量文本。没有大段复制文案；让界面承载内容。
- 真实 UI 模式：标签页、下拉菜单、模态框、开关、图表。不全是卡片堆叠。
- 良好的加载、空和错误状态，以及慢操作的进度指示。
- 动效，以及合适的音效和触觉反馈。
- 一切可发现：每个页面从用户所在位置都能到达，任何可点击的看起来都可点击。
- 低摩擦的引导流程。
- 流程保持在应用内部，而不是将用户引向第三方网站。
- 响应式，移动端感觉原生而非缩小的桌面。
- 一次抱怨即代表模式。当用户指出一个问题时，在应用中查找并修复其兄弟问题。
平庸永远不是一个选项。
5. 在运行的应用中检查
在浏览器或模拟器中打开应用并使用它：亮色和暗色模式、桌面和手机宽度、空和加载状态。将每个屏幕与其参考进行比较，修正偏差。研究不是终点线，渲染出的屏幕才是。
UI 计划模板
**方向：** <用户的 DESIGN.md，或 Refero 样式：名称、名称> · 亮色和暗色
**令牌：** <颜色角色、字体、圆角、间距>
| 屏幕或流程 | Refero 参考 | 我们提取的内容 | 21st.dev 组件 |
|---|---|---|---|
| 引导流程 | <应用：屏幕>，<应用：流程> | 三步、进度条、跳过 | <作者>/<slug> |
**手工构建（无候选）：** <什么，以及原因>