refero-design

Refero 设计

Refero 为 Agent 提供审美判断和产品依据。开始设计前先使用 Refero，而不是依赖大模型的通用知识。

Refero 有三个研究层面：

1. Styles - 视觉方向和审美。
2. Screens - 具体的 UI 模式和产品界面决策。
3. Flows - 多步骤旅程逻辑。

结合多个层面效果最佳：从 styles 获取视觉方向，从 screens 获取具体的 UI 模式；如果任务涉及多个步骤，则从 flows 获取流程安排。

不可妥协的原则

• 先研究，再开始设计。 每项设计在实施前都必须以参考资料为依据。不要依赖大模型通用的设计审美。
• 当 Refero MCP 工具可用时，视觉设计应先从 styles 入手。 如果工具不可用，请使用内置的工艺参考资料，并遵循相同的参考锁定工作流。
• 不要照搬单一参考。 研究多个优质参考，并综合出适合用户产品的新方向。
• 不要把多个参考折中成平庸的中间方案。 参考之间存在冲突时，选定一个主导方向，并保留其鲜明特征。次要参考只能补充少量细节。
• 不要改变设计 token 的含义。 如果参考资料指定了颜色、字体、圆角、阴影、渐变或组件的特定用途，就只将其用于该用途，否则不要使用。
• 遵循图像指导。 如果某种风格依赖摄影、插画、产品截图或图形，就保留相应的媒体类型。有可用素材时，使用真实、生成或图库素材；否则创建具有明确美术指导的占位内容。不要用效果粗糙的 CSS、文本或装饰框来伪造复杂图像。
• 当此技能可用时，不要将通用前端／产品设计技能用作并行的设计依据。 Refero 是设计方法论；通用设计技能往往会让成果回归通用的 AI 设计。
• 研究结果必须具体。 点明参考资料，描述具体选择，并说明将如何借鉴。
• 不要凭印象设计。 每项重要的视觉、布局、内容或交互决策都必须有 Refero 研究、用户简报或工艺参考资料作为依据。
• 先综合，再实施。 将研究转化为概念、token 方向和具体的决策清单，然后再绘制或编码。
• 简报不是构建目标。 实施前，必须锁定以下目标之一：用户提供的视觉素材、现有产品／设计系统目标、选定的生成式样稿，或已获批准、可直接用于构建的明确参考方向。
• 仅在能改变最终效果时使用图像生成。 图像生成可能很慢，也可能并非所有编码环境都支持。将其用于视觉探索、样稿、图像、插画、纹理和难以制作的素材；小型修复、显而易见的生产环境修改或原生代码 UI 工作则无需使用。
• 完成视觉设计后进行验证。 将渲染后的实现与锁定的目标／参考进行比较，再交付。修正可操作的设计偏差，不要认为完成研究就足够了。

MCP 设置

此技能本身即可作为以研究为先的设计方法论和工艺参考资料使用。 研究是强制要求。Refero MCP 可用时，请用它进行实时风格、界面和流程研究；否则，请使用内置工艺参考资料和用户提供的参考资料开展研究。

典型的 MCP 设置：

claude mcp add --transport http refero https://api.refero.design/mcp

然后在 Claude Code 中运行 /mcp，并在提示时登录 Refero。

如需查看完整的工具详情，请阅读 references/mcp-tools.md。

调研

开始调研前，先拟定一份简短的设计简报。只询问那些会实质性影响结果的缺失信息；否则，做出合理假设并继续。

明确：

• 设计内容
• 平台：Web、iOS 或两者兼有
• 目标受众及其技术水平
• 用户的主要目标
• 期望营造的感受或品牌方向
• 需要克服的业务或用户异议
• 约束条件：现有品牌、框架、截止日期、无障碍要求、内容
• 任务需要视觉方向、具体 UI 模式、流程逻辑，还是兼而有之
• 任务应直接进入代码实现、先产出视觉方案，还是在实现过程中创建生成素材

简报格式：

Designing [WHAT] for [WHO] on [PLATFORM].
Goal: [PRIMARY USER GOAL].
Tone: [DESIRED FEELING].
Main objection/risk: [OBJECTION].
Must remember: [HOOK OR DISTINCTIVE IDEA].
Constraints: [CONSTRAINTS].
Research needed: [styles/screens/flows].
Path: [direct build / visual exploration / audit / asset generation].

工作流路由

选择能产出高质量结果的最轻量工作流。

• **直接构建：**适用于小型 UI 修复、明确的生产环境修改、现有设计系统工作，或有具体参考对象的任务。先调研并确定方向，然后编写代码。
• **视觉探索：**适用于用户要求提供多个方案、建立新的视觉语言、进行重大改版、设计落地页，或其他存在多种可行方向的高曝光界面。默认提供三个以参考为准的选项，并请用户选择；参见 references/visual-workflow.md。
• **审查：**在提出评审意见前，使用捕获的屏幕截图、Refero 界面或流程作为依据。
• **素材生成：**仅当参考要求使用代码、图标或现有素材无法忠实呈现的位图媒体时，才使用生成图像；参见 references/visual-workflow.md。

工具路由

视觉工作优先使用 Styles

当用户要求设计、重新设计、改进、润色或创建任何包含视觉元素的内容时，使用 refero_search_styles。

样式是一种从真实的 Web 营销或产品页面中提取的语义化设计参考。它不是屏幕截图，也不是组件库。搜索结果会提供预览；refero_get_style 返回的完整样式参考则会提供设计指导，例如视觉主张、设计标记、排版、布局与构图、版块节奏、间距、层次、表面处理、组件、图像处理方式、实现说明以及应做和不应做的规则。

当前限制：Refero 样式目前涵盖 Web 营销和产品页面，例如落地页、定价页、产品营销网站、编辑类品牌网站和 SaaS 网站。目前不涵盖应用内仪表板、身份验证界面、设置界面或 iOS 应用界面的样式系统。产品 UI 任务仍应使用样式来确定视觉语言，然后使用界面或流程来处理产品逻辑。

在以下情况使用样式：

• 外观与感觉
• 品牌方向
• 落地页和营销页面
• 排版、配色、布局、版块结构、间距、圆角、层次、表面处理
• 组件样式，有时也包括组件或代码示例
• 图像和产品截图的处理方式
• 设计系统灵感
• 让通用界面更有品位

使用界面查找具体 UI 模式

在需要以下内容时，使用 refero_search_screens：

• 特定类型的界面
• 特定组件或 UI 模式
• 页面布局和内容层级
• 文案和 CTA 模式
• 表单或状态示例
• 仪表板、设置、模态框、表格、定价、空状态、身份验证或产品界面细节

找到合适的界面后：

• 使用 refero_get_screen 获取完整详情
• 使用 refero_get_similar_screens 从优质示例拓展搜索
• 仅在需要查看原始屏幕截图时使用 refero_get_screen_image

使用流程处理用户旅程

当任务涉及前后步骤的序列时，使用 refero_search_flows：

• 引导流程
• 注册
• 结账
• 订阅管理
• 取消
• 删除账户
• 重置密码
• 个人资料或设置更改
• 任何多步骤流程

找到合适的流程后，使用 refero_get_flow 获取逐步说明，包括目标、操作、系统响应和完成状态。

使用视觉工作流处理图像和 QA

对于图像生成、视觉选项、生成的素材和视觉 QA，请在任务需要时阅读 references/visual-workflow.md。

研究工作流

1. 使用风格研究视觉方向

对于任何视觉设计任务，都从这里开始。

推荐流程：

1. 搜索 3-5 种不同的视觉方向。
2. 加入一个宽泛的美学风格查询。
3. 加入一个领域／类别查询。
4. 在相关时，加入一个知名品牌或有鲜明特色的产品查询。
5. 使用 refero_get_style 获取 3-4 种有代表性的风格；完整风格内容较长，因此较大规模的研究应分成多批进行。
6. 比较每种风格各自的特点。
7. 选择一个主要基础风格，并从其他风格中借鉴 1-2 个具体细节。
8. 开始实现前，确定主要参考风格的标志性特征。

优质的风格查询：

• 编辑风、单色的 SaaS 落地页
• 温暖可信的医疗健康产品营销
• 字体设计克制的高端金融科技网站
• 点缀鲜艳色彩、充满趣味的创作者工具落地页
• 带产品截图的开发者工具网站
• 奢华电商编辑风产品页
• 留白充足的生产力 SaaS
• 暗色技术风格的数据基础设施网站
• Attio 编辑风 SaaS 排版
• Linear 暗色开发者工具更新日志
• shadcn 单色设计系统

从风格中提取：

• 北极星／视觉主旨
• 字体个性与字号层级
• 色彩角色与强调色的使用原则
• 间距密度与节奏
• 布局系统、版块节奏和构图模式
• 卡片／按钮／表面的处理方式
• 边框、阴影、圆角
• 层级和纵深规则
• 组件示例及实现／代码说明（如有）
• 图像、图形、插画或产品截图的处理方式
• 媒体素材策略：真实素材、生成／图库素材、代码原生图形、产品截图或占位内容
• 应做／不应做的规则
• 一个值得借鉴的鲜明视觉手法

综合规则：

• 主要风格：整体氛围、密度和结构。
• 次要风格：具体借鉴的细节。
• 用户背景：根据产品、受众和任务调整所有内容。
• 不要取所有参考的平均值或交集。如果一个参考是暗色，一个是荧光色，另一个是衬线体，最终结果不应是暖奶油色 + 柔和橙色 + 端庄衬线体。

切勿将结果描述为“复制 X”。应将其呈现为受多个参考启发的新方向。

开始实现前，创建一份参考锁定：

Primary reference/direction: [one dominant source]
Preserve: [3-5 traits that must survive: canvas, type, accent, layout, density, media]
Borrow only: [1-2 specific secondary details]
Role rules: [source token/component meanings to preserve, e.g. CTA-only, code-only, decorative-only]
Media strategy: [real/generated/stock/code-native/placeholder, with aspect ratio and art direction]
Reject: [defaults/averages that would collapse the direction]
Token commitments: [background, type, accent, radius, border/shadow, imagery treatment, with roles]

如果实现偏离了锁定内容，请停下来并修正。不要将鲜明特征弱化为更安全的色彩、更安全的字体、更柔和的圆角或通用的版块布局。参考锁定并非克隆，而是在调整内容、品牌和交互细节以适配用户产品的同时，保留选定的特征。

组合多种风格时，应为每个来源划定明确的职责。例如，一个来源负责画布／字体，另一个负责代码窗口的处理方式，还有一个负责主要 CTA。切勿让设计令牌超出其来源角色：CTA 颜色仅用于 CTA，语法高亮颜色仅用于代码，装饰性渐变仅用于装饰，卡片／按钮规则则应遵循指定的圆角、阴影和状态行为。

如果主要风格以图像为主，就不要将其替换为纯文本布局。如果无法生成所需的图像或图形，请保留相应位置，并保持尺寸、纵横比、说明文字／替代文本稳定，同时附上简短的美术指导说明。只有在符合来源风格时，才构建简单的示意图、图标、代码窗口或几何图形。

对于深入的视觉探索、生成的模型图、位图素材或构建后的视觉 QA，请遵循 references/visual-workflow.md。

2. 研究产品详情页面

当你需要了解界面应包含哪些内容，或真实产品如何解决特定 UI 问题时，请使用页面参考。

适合搜索的页面：

• 定价页面年度／月度切换
• 功能对比表
• 仪表板空状态
• 账单设置取消弹窗
• 新手引导进度指示器
• 2FA 设置恢复代码
• 数据表筛选器
• 破坏性操作确认

根据页面上的事实进行搜索：

• 页面类型
• 组件
• 状态
• 公司／产品
• 屏幕上的文本

如果任务侧重视觉效果，请勿将页面参考作为主要风格来源。先参考风格，再用页面了解结构和具体细节。

从页面中提取：

• 布局结构
• 信息层级
• 组件选择
• CTA 模式
• 内容／文案模式
• 状态和边缘情况
• 信任或转化策略
• 值得借鉴的具体细节

3. 研究用户流程的旅程逻辑

当流程包含多个步骤，或用户状态会随时间变化时，请参考用户流程。

适合搜索的流程：

• 注册新手引导
• 带促销码的结账流程
• 订阅取消
• 账户删除反馈
• 密码重置 2FA
• 工作区账单升级

如果流程搜索结果较少，请扩大搜索范围。如果仍然较少，请参考页面并重建旅程。

从用户流程中提取：

• 入口点和退出状态
• 步骤数量
• 用户需要做出的决定
• 减少阻力的方法
• 必要的确认
• 保存／恢复状态
• 错误处理
• 留存或说服时机
• 系统在每个步骤的响应

研究深度

根据任务风险调整研究深度。

对于快速的视觉改进：

• 2-3 次风格搜索
• 2-3 个完整风格参考
• 1 份简短综合总结

对于新建落地页、品牌方向或重大改版：

• 3-5 次风格搜索
• 一次批量研究 3-4 个完整风格参考；仅在需要时使用其他批次
• 研究页面，了解具体版块／组件
• 在实施前明确视觉方向

对于产品工作流：

• 参考风格，了解视觉语言
• 参考页面，了解关键状态／组件
• 参考流程，了解步骤顺序

对于高风险或不明确的任务：

• 从多个角度进行搜索
• 查看后续页面
• 比较优秀和独特的参考
• 设计前记录权衡

综合总结

将研究发现分为三类。

视觉方向

从风格参考中提取：

• 氛围
• 字体排印
• 配色
• 密度
• 表面样式
• 图像
• 独特细节
• 应做／不应做的规则

输出示例：

Use a precise analytics SaaS foundation: white canvas, compact UI copy, restrained black
primary actions, thin borders, and product screenshots in framed panels. Borrow disciplined
accent use from another reference, but keep color rare.

产品模式

从页面中提取：

• 界面需要包含的内容
• 常见布局
• 组件模式
• 状态
• 文案和 CTA
• 具体策略

输出示例：

Pricing pages commonly put the billing toggle above plan cards, highlight one plan, and
move detailed feature comparison below. We should adapt the comparison structure but keep
the hero quieter because this product sells trust, not hype.

旅程逻辑

从用户流程中提取：

• 步骤
• 决策点
• 系统响应
• 用户信心和阻力
• 成功／失败状态

输出示例：

Cancellation flows usually collect a reason, offer a relevant alternative, confirm the
destructive action, then state when access ends. The best flows give a clear return path.

呈现研究发现

不要罗列所有结果。对于不简单的任务，请在开始设计前向用户提供简短的研究总结。

建议格式：

Research summary:
- Styles reviewed: [count] across [directions]
- Screens reviewed: [count], if used
- Flows reviewed: [count], if used

Visual direction:
- [primary style foundation]
- [reference lock / signature traits to preserve]
- [borrowed detail 1]
- [borrowed detail 2]

Product patterns:
- [concrete UI decisions from screens]

Journey logic:
- [flow decisions, if applicable]

Recommendation:
- [what to design and why]

实施前，将研究结论整理成简短的决策记录：

决策	来源	来源规则／作用	原因
[配色／字体／布局／媒体／内容选择]	[风格／页面／流程／用户约束／工艺规则]	[需要保留的令牌／组件／媒体作用]	[具体理由]

如果重大决策没有来源，请勿将其作为设计决策交付。应进一步研究、将其与用户约束关联，或将其删除。

设计工艺

完成调研后，以资深产品设计师的标准执行。仅在相关时使用附带的参考资料；不要默认加载所有文件。

• 字体排印：references/typography.md
• 色彩：references/color.md
• 动效：references/motion.md
• 图标：references/icons.md
• 表单、焦点、图像、触控、性能、无障碍：references/craft-details.md
• 文案与说服力：references/copywriting.md
• 防止 AI 味设计检查：references/anti-ai-slop.md

核心工艺规则：

• 实现前先定义设计令牌：字号比例、颜色、间距、圆角、阴影。
• 保留主要参考中最突出的特征，不要将其标准化。
• 保留参考资料中的令牌用途。不要把 CTA 强调色用作背景、把仅用于代码的颜色用作 UI 装饰，或把装饰性渐变用作界面底色。
• 保留参考资料中图像的用途。有合适素材时就使用；否则，宁可使用诚实且尺寸合适的占位内容，也不要使用粗劣的仿制插画或照片。
• 根据调研选择符合品牌的颜色。除非用户明确要求，否则不要默认使用靛蓝色或紫罗兰色。
• 将“沉静的编辑风”视为当前 AI 味设计的风险。除非调研和产品背景足以支持，否则不要默认采用装饰性的标题词语替换：把一个词或短语换成不同的展示字体、衬线字体、手写体或斜体，或换成强调色；也不要默认使用暖象牙色或奶油色画布，以及橄榄色、陶土色或赤陶色调。
• 除非调研支持，否则不要采用“通用主视觉区 → 功能网格 → 定价 → 常见问题 → CTA”的结构。
• 文案、信任信号、异议处理和版块顺序都应基于真实的产品证据。
• 至少打造一个令人难忘的细节：用户会记住的视觉手法、交互、布局选择或文案细节。
• 对标题和简短展示文本使用 text-wrap: balance 以保持平衡；对正文有选择地使用 text-wrap: pretty。检查关键断点，避免出现落单词语和不自然的末行。
• 将无障碍和响应式行为纳入设计，而不是留到最后处理。

质量关卡

最终交付前，确认：

• 我是否运用了样式来体现视觉品味？
• 我是否避免直接照搬某一种风格？
• 我是否综合了多份参考资料，形成独特的设计方向？
• 我是否避免将参考资料折中成平庸安全的平均风格？
• 我是否保留了主要参考的标志性特征？
• 我是否保留了源令牌和组件的用途，而没有擅自挪作他用？
• 我是否使用真实素材、恰当的基础元素或有意设计的占位内容，保留了必需的图像和媒体用途？
• 需要具体 UI 模式时，我是否参考了界面截图？
• 任务包含多个步骤时，我是否参考了流程？
• 我能否说清哪些参考资料影响了设计，以及原因是什么？
• 每项主要设计决策是否都能追溯到参考资料、用户约束或工艺规则？
• 我是否在实现前制作了概念与决策记录？
• 实现是否避免了通用的 AI 设计默认套路？
• 除非参考资料和内容用途足以支持，否则我是否避免了装饰性的衬线、斜体或颜色词语替换？
• 结果是否符合用户的产品、受众和约束？

如果答案是否定的，请在交付前继续调研或完善。

对于较大型的视觉设计工作，请在交付前按照 references/visual-workflow.md 完成视觉 QA 检查。

示例

完整演练请参阅 references/example-workflow.md。