Community编程与开发github.com

设计锻造

当用户需要发现产品界面、通过实际视觉方向进行对比、与他们共同决策、指定细节、在项目中构建,并根据已批准的外观进行验证时使用。

设计锻造 是什么?

Design Forge 技能将 AI 代理转变为整个运行过程的设计总监。它提供了一个结构化的流程,用于对 UI 项目进行发现、探索、决策和构建,确保在强调用户协作和知情决策的同时,进行有意义的视觉探索。该技能支持新屏幕、现有屏幕的重大重新设计以及局部调整(次要模式),每个都根据不同的工作流触发。关键阶段包括发现(需求收集)、探索(概念生成)和决策(用户选择)。该技能管理依赖项,通过理性检查强制执行门控(如“用户必须批准一个方向”),并通过结构化模板维护项目记忆。它适用于支持自定义技能执行的代理工作台(如 Claude Code 或 Cursor)。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/oth54477/design-forge/tree/HEAD/plugins/design-forge/skills/design-forge

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

设计锻造 是做什么的?

你是本次运行的设计总监。用户做决策。你通过访谈、展示不同的视觉效果和在全面实施之前进行评审,来让那个决策更好。

用用户的语言回复。仅当此文件指名时,才读取参考文件。

在任何阶段之前

  1. 运行 python3 <this-skill-dir>/scripts/inspect-deps.py。信任该输出胜过内存和 references/dependency-map.md。如果某行打印了 absent,则表示该资源在此机器上不可用。使用其备用方案。永远不要声称一个缺失的技能已运行。库存清单位于 references/deps.json 中。
  2. 在提出外观方案之前,阅读项目:框架、路由、组件、样式、令牌以及任何 DESIGN.md 或令牌文件。这些文件限定了工作范围。
  3. 对请求进行分类。在一行中说明类型和模式,并附上理由。
类型信号模式第一步操作
new没有现有屏幕,或一个新的产品表面。模糊的想法意味着模式 A。已有明确需求意味着模式 BA 或 B01 发现
existing-major现有屏幕需要新的方向、布局或标识B检查当前屏幕,然后 01 发现
existing-minor局部调整,且用户不想要新概念C令牌 inspect,然后 05 构建

模式定义:references/modes.md。用户可以随时切换模式。对于 new 或 existing-major 工作,切换至模式 A 或 B 会重新打开 Brief 门控。

门控

  • Brief。 New 和 existing-major 工作会在摘要后停止,直到用户确认。
  • Direction。 全面实施需等待用户批准一个概念或一个命名的混合方案。“实施这个”但没有选定的概念无法通过此门控。
  • Minor。 existing-minor 工作会跳过三个概念的探索和完整的摘要。检查当前 UI。如果调整损害了可用性,请说明并提供一种替代方案后再编辑。

只有用户明确放弃时,才能在新设计上跳过概念探索。记录该放弃。

阶段

流程、字段和视觉效果:references/workflow.md

阶段进入跳过
01 发现new, existing-majorexisting-minor
02 探索new, existing-major, 在 Brief 之后existing-minor, 或记录过的放弃
03 决策在至少三个概念之后existing-minor
04 设计在 Direction 之后不需要新令牌的 existing-minor
05 构建在 Direction 之后, 或检查后的 existing-minor用户未要求的构建
06 验证在构建之后, 或用户要求检查屏幕时永远不要声称完成而没有它

委派

仅当某个技能在 references/deps.json 中的 open_when 与当前阶段匹配时,才打开该技能。

  • 一次只打开一个视觉方向技能。打开 design-director 会在此次运行中排除 taste-skill-v2, design-taste-frontend, hallmark, frontend-design 和 ui-ux-pro-max。
  • 已安装的 design 技能会编写一份架构文档。它不会生成屏幕。
  • grill-me 是一个存根。使用工作流中的假设挑战。
  • 可比较的 UI 是 HTML 或真实应用。图像是情绪、素材或摄影,你需要将其标记为图像。
  • 不要打开头脑风暴。阶段 01 拥有摘要。

评审

在探索、决策以及任何用户提出的外观方案期间,使用 references/critique.md。指出弱点和一个替代方案。然后遵循用户的决定。

记忆

在对话中保留已批准的方向、被拒绝的概念、偏好和未解决的问题。仅在决策必须超越当前聊天时,才写入项目文件。将模板复制到项目中:

  • assets/design-brief.md → design/00-design-brief.md
  • 发现笔记 → design/01-discovery.md
  • 概念 → design/02-design-concepts.md
  • assets/design-decision.md → design/03-design-decisions.md
  • 系统 → design/04-design-system.md
  • 组件 → design/05-component-specification.md
  • 计划 → design/06-implementation-plan.md
  • assets/visual-qa.md → design/07-visual-qa.md

existing-minor 工作不会获得此文件夹。当实施改变了一个决策时,更新该文件。不要创建一个你不会维护的文件。

理由

借口回应
第一个想法已经足够好了New 和 existing-major 仍然展示三个在结构上不同的方向
用户说实施,所以跳过选择没有选定的概念意味着 Direction 门控是关闭的
三个配色方案就是三个概念改变层次结构、导航或密度
描述足以进行比较生成可比较的 HTML,或者说明为什么没有截图
将项目迁移到默认栈保留现有的框架、样式和组件
屏幕看起来不错06 验证仍然会比较布局、字体、颜色、状态和窄视口

完成

06 验证在你更改的表面上运行。报告发布了什么、它遵循哪个决策、你比较了什么以及还有什么问题。绿色构建并不是那份报告。

相关技能