whit3rabbit/designer-mcp

Designer MCP — 研究优先的设计

在实施之前，将每个设计都建立在真实的产品证据之上。本技能将研究优先的方法论与一个本地、免费的、包含1,342个已提取设计系统的库相结合。

研究库包含一个层次：

1. 样式 — 从真实的网页营销/产品页面中提取的视觉方向和品味。

屏幕和流程存在于付费的Refero产品中，但不包含在此部署中。对于涉及屏幕级别或旅程级别的问题，请使用附带的手册参考资料和用户提供的材料，并如实说明，而不是凭空捏造先例。

不可妥协的原则

• 先研究，后设计。 每个设计在实施之前都必须有参考依据。不要依赖模型的通用设计品味。
• 对于视觉工作，优先使用样式。 如果MCP服务器不可用，请使用附带的手册参考资料，并保持同样的参考锁定工作流程。
• 不要照搬单一参考。 研究几个强有力的参考，并为用户的产品综合出一个新的方向。
• 不要把参考平均化成安全的中庸。 当参考之间存在冲突时，选择一个主导方向并保留其鲜明的特征。次要参考只能增加狭窄的细节。
• 不要改变Token的含义。 如果某个参考指出某种颜色、字体、圆角、阴影、渐变或组件用于特定角色，请仅将该元素用于该角色，否则放弃使用。
• 尊重图像指导。 如果某个样式依赖于摄影、插图、产品照片或图形，请保留该媒介的角色。在有可用素材时，使用真实/生成/图库素材；否则，创建一个有意为之的占位符，并附上美术指导。不要用弱CSS、文本或装饰性方框来伪造复杂的图像。
• 当本技能可用时，不要将通用的前端/产品设计技能作为平行的设计权威。 这是设计方法论；通用的设计技能往往会使工作回归到通用的人工智能设计。
• 研究输出必须具体。 指明参考的名称，描述具体的选择，并解释将进行哪些改编。
• 拒绝基于感觉记忆的设计。 每一个重大的视觉、布局、内容或交互决策都必须追溯至研究、用户的简报或手册参考。
• 在实施之前进行综合。 在开始绘制或编码之前，将研究转化为一个概念、Token方向和具体的决策记录。
• 简报不是构建目标。 在实施之前，必须锁定用户提供的视觉源、现有的产品/设计系统目标、选定的生成模拟图，或者一个明确锁定参考并获准直接构建的方向。
• 仅在能改变结果时使用图像生成。 图像生成可能很慢，并且并非每个编码环境中都存在。将其用于视觉探索、模拟图、图像、插图、纹理和困难的素材；对于小修复、明显的生产编辑或代码原生的UI工作，则跳过。
• 构建视觉工作后进行验证。 在交接之前，将渲染后的实现与锁定的目标/参考进行比较。修复可操作的设计偏差，而不是认为研究就足够了。

MCP 设置

本技能作为研究优先的设计方法论和手册参考，本身就很有用。无论哪种方式，研究都是强制性的 —— 当可用时，使用MCP工具进行实时的样式研究；否则，使用附带的手册参考资料和用户提供的任何参考资料进行研究。

本地服务器在Docker中运行：

# 注册MCP服务器（Hermes / 任何stdio MCP客户端）
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

然后重启网关（或执行 /reload-mcp）以使工具注册。

如需查看相同数据的浏览器画廊 —— 缩略图、色板、字体尺度：

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

有关完整工具详情，请阅读 references/mcp-tools.md。

发现

在研究之前，形成一个简短的简报。只询问那些会实质性地改变结果的缺失信息；否则，做出合理的假设并继续。

需要澄清的问题：

• 正在设计什么
• 平台：web、iOS，还是两者
• 受众和技术水平
• 主要用户目标
• 期望的感觉或品牌方向
• 需要克服的业务/用户异议
• 约束：现有品牌、框架、截止日期、无障碍、内容
• 任务是需要视觉方向、具体的UI模式、旅程逻辑，还是组合
• 任务是应该直接进入代码、先生成视觉选项，还是在实施过程中创建生成的素材

简报格式：

正在设计 [什么] 面向 [谁] 在 [平台] 上。
目标：[主要用户目标]。
基调：[期望的感觉]。
主要异议/风险：[异议]。
必须记住：[钩子或独特想法]。
约束：[约束]。
需要的研究：[样式/屏幕/流程]。
途径：[直接构建 / 视觉探索 / 审计 / 素材生成]。

工作流程路由

选择能够产生高质量结果的最轻量级工作流程。

• 直接构建： 用于小的UI修复、明确的生产编辑、现有的设计系统工作，或具有具体源需要匹配的任务。研究并锁定方向，然后编码。
• 视觉探索： 当用户要求提供变体、新的视觉语言、重大重新设计、落地页或具有几种可能方向的高可见度表面时使用。默认为三个锁定参考的选项，并让用户选择；请参阅 references/visual-workflow.md。
• 审计： 在批评之前，使用捕获的屏幕截图或样式参考作为证据。
• 素材生成： 仅当参考锁定位图媒介且代码、图标或现有素材无法忠实地提供时，才使用生成的图像；请参阅 references/visual-workflow.md。

工具路由

对于视觉工作，优先使用样式

当用户要求设计、重新设计、改进、打磨或创建任何具有视觉成分的东西时，使用 refero_search。

样式是从真实网页营销/产品页面中提取的语义设计参考。它不是屏幕截图，也不是组件库。搜索结果提供预览；来自 refero_get 的完整样式参考提供设计指导，如视觉论题、Token、排版、布局/构图、章节节奏、间距、层级、表面、组件、图像处理、实施说明和做/不做规则。

覆盖范围：网页营销/产品页面 —— 落地页、定价页面、产品营销网站、编辑品牌网站和SaaS网站。应用内仪表盘、认证屏幕、设置屏幕和iOS应用屏幕不作为样式系统涵盖。对于产品UI任务，从样式中建立视觉语言，然后使用手册参考资料处理产品逻辑。

样式可用于：

• 外观和感觉
• 品牌方向
• 落地页和营销页面
• 排版、调色板、布局、章节结构、间距、圆角、层级、表面
• 组件处理，有时也包括组件/代码示例
• 图像和产品截图处理
• 设计系统灵感
• 使通用界面看起来更有品味

找到强样式后：

• 使用 refero_get 获取完整详情
• 使用 refero_design_md 渲染一个可移植的 DESIGN.md 文件
• 使用 refero_facets 查看目录中实际包含的字体、颜色、主题和行业，然后再锁定方向

针对产品模式和旅程

此部署没有屏幕或流程层。当任务需要具体的UI模式（特定的屏幕类型、表单状态、定价页面布局）或旅程逻辑（入门、结账、取消）时：

• 使用附带的手册参考资料——它们涵盖了表单、焦点、空状态、入门模式和转换工艺
• 使用用户提供的现有产品、屏幕截图或设计系统
• 明确说明这些是基于工艺的而不是基于参考的

不要捏造你没有查过的先例。

为图像和QA使用视觉工作流程

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

研究工作流程

1. 用样式研究视觉方向

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

推荐的循环：

1. 搜索3-5个不同的视觉角度。
2. 包括一个广泛的审美查询。
3. 包括一个领域/类别查询。
4. 在相关时，包括一个知名品牌或强势产品的查询。
5. 使用 refero_get 检索3-4个强样式；完整的样式很大，因此将较大的研究分解为多个批次。
6. 比较每个样式贡献了什么。
7. 选择一个主要基础，并从其他样式中借鉴1-2个具体细节。
8. 在实施之前锁定主要参考的标志性特征。

良好的样式查询和完整的提取清单（从每个样式中提取什么：论题、类型、色彩角色、间距、布局、组件、图像、媒介策略、做/不做规则）列在 references/research-playbook.md 中。

综合规则：

• 主要样式：整体情绪、密度和结构。
• 次要样式：具体借鉴的细节。
• 用户上下文：根据产品、受众和任务调整一切。
• 不要使用所有参考的平均值/交集。如果一个参考是暗色的，一个是酸性的，一个是衬线的，那答案就不是暖奶油色 + 柔和橙色 + 优雅的衬线。

永远不要将结果呈现为“复制X”。将其呈现为一个受多个参考启发的新方向。

在实施之前，创建一个参考锁定：

主要参考/方向：[一个主导来源]
保留：[3-5个必须保留的特征：画布、类型、强调色、布局、密度、媒介]
仅借鉴：[1-2个具体的次要细节]
角色规则：[保留的源Token/组件含义，例如仅限CTA、仅限代码、仅限装饰]
媒介策略：[真实/生成/图库/代码原生/占位符，包含宽高比和艺术指导]
拒绝：[会使方向坍塌的默认值/平均值]
Token承诺：[背景、类型、强调色、圆角、边框/阴影、图像处理，包含角色]

如果实施偏离了锁定，请停止并纠正。不要将鲜明的特征弱化为更安全的颜色、更安全的字体、更柔和的圆角或通用的章节布局。参考锁定不是克隆；它在保持所选特征的同时，将内容、品牌和交互细节适应用户的产品。

当组合样式时，为每个来源分配一个有边界的任务。例如：一个来源可能拥有画布/类型，另一个拥有代码窗口处理，另一个拥有主要CTA。永远不要将Token移出其来源角色：CTA颜色保持仅限CTA，语法颜色保持在代码内部，装饰性渐变保持装饰性，卡片/按钮规则保持指定的圆角、阴影和状态行为。

如果主要样式是以图像为主导的，不要用纯文本布局取代它。如果你无法制作所需的图像或图形，请使用稳定的尺寸、宽高比、说明文字/替代文本和简短的艺术指导说明来保留该位置。仅在能与源样式匹配时，才构建简单的图表、图标、代码窗口或几何图形。

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

2. 无屏幕层的产品模式

当任务需要了解界面应包含什么或真实产品如何解决特定的UI问题时，请使用手册参考资料。

需求	参考
表单设计、焦点状态、空状态、表格、入门模式	references/craft-details.md
CTA文案、信任信号、异议处理、转化结构	references/copywriting.md
组件/图标选择	references/icons.md
类型角色和层次决策	references/typography.md
色彩角色、对比度、调色板纪律	references/color.md

从这些中提取：

• 布局结构
• 信息层次
• 组件选择
• CTA模式
• 内容/文案模式
• 状态和边缘案例
• 信任或转化策略
• 值得改编的具体细节

3. 无流程层的旅程逻辑

当任务涉及多个步骤或用户随时间改变状态时，从交互模式进行推理，而不是声称先例：

• 入口点和出口状态
• 步骤数
• 用户做出的决策
• 摩擦减少因素
• 所需的确认
• 保存/恢复状态
• 错误处理
• 保留或说服时刻
• 每个步骤的系统响应

研究深度与综合

将研究深度与任务风险相匹配，然后将发现分为三个部分：视觉方向（来自样式）、产品模式（来自手册参考资料和用户材料）和旅程逻辑（来自交互推理）。

关于每种任务类型对应的深度阶梯、每个部分的输出格式、研究摘要模板和决策记录表，请阅读 references/research-playbook.md。

设计工艺

研究之后，要像高级产品设计师一样执行。仅当相关时才使用附带参考资料；不要默认加载每个文件。

• 排版：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