跳转到使用指南
Hue作者 dominikmartn

Hue Skill.

创建指导未来界面工作的规则,而不只是完成一个界面。

  • 设计系统
  • Skill 创建
  • 设计令牌
来源审查 · HueSKILL.md
任务 设计系统 产出内容 • 一个以 design-model.yaml 为唯一事实来源的可复用设计 Skill。 • 令牌、组件和平台映射参考文件。 • 仪表板、组件库、落地页和应用界面的 HTML 预览。 开始之前 需要文件访问权限、合适的参考资料检查工具、用于运行 validate.mjs 的 Node,以及通过浏览器审查来增强视觉效果方面的可信度。工具的可用性会影响信息提取的保真度。
编辑摘要 · 已审查来源 2026-10-07 · 并非生成的示例

01 功能说明

将设计语言转化为可复用的 Skill

根据参考资料分析、共享的 YAML 模型、文档和四个经过验证的预览,生成可复用的设计 Skill。

基于来源的工作流并非执行基准测试

工作方式

Hue 是一种元 Skill,用于生成另一个设计语言 Skill。它可以从品牌、URL、代码库、截图、说明或用于混合改编的现有 Skill 开始。它将观察到的设计事实与推导出的选择分开,把决策记录在 design-model.yaml 中,并根据该模型生成下游文档和预览。

它的输出不只有颜色和字体。来源涵盖组件清单、图标后备方案的选择依据、主视觉区域构图、浅色与深色令牌、平台映射,以及四种视觉演示。它还要求进行验证和视觉审查。已审查的来源包含一些相互矛盾的字体来源指南,因此应核实具体字体的许可和可用性,不能认定所有建议都彼此兼容。

预期交付成果

  • 一个以 design-model.yaml 为唯一事实来源的可复用设计 Skill。
  • 令牌、组件和平台映射参考文件。
  • 仪表板、组件库、落地页和应用界面的 HTML 预览。
查看示例简报

从简报到审查

  1. 01
    分析输入

    尽可能从源文件或计算样式中收集真实值,并标明从截图或文本抓取结果中得出的可信度较低的观察。

  2. 02
    确认方向

    在生成规模更大的文件集之前,审查美学诠释和核心令牌。

  3. 03
    先构建模型

    在 YAML 中记录基础值、语义角色、组件、图标后备方案和主视觉区域决策。

  4. 04
    生成并验证

    根据模型生成参考资料和预览,运行随附的验证器,并在两种模式下检查渲染输出。

02 适用场景

适用场景

需要文件访问权限、合适的参考资料检查工具、用于运行 validate.mjs 的 Node,以及通过浏览器审查来增强视觉效果方面的可信度。工具的可用性会影响信息提取的保真度。

适合的场景

  • 可复用的品牌指南适用于需要在多次助手会话中采用更明确视觉语言的情况。
  • 设计 Skill 混合改编支持在保留现有理念和未受影响规则的同时,更改选定的设计维度。

需要检查的限制

  • 不代表拥有资产观察到的专有字体、图标、摄影作品和产品渲染图不会自动获得再分发许可。
  • 并非精确克隆品牌必须如实标明后备套件和推导出的组件。
  • 依赖环境的分析计算样式检查、浏览器截图和本地验证需要相应工具可用;输入质量越低,可信度也越低。

请提供这些输入

  • 设计参考资料提供品牌 URL、代码库、截图、书面方向或现有 Skill。
  • 范围和平台指定产品领域,以及 CSS、Tailwind 或 SwiftUI 映射是否有用。
  • 资产和品牌约束明确专有材料、获准使用的后备方案,以及必须保持不变的决策。

03 关键决策

关键决策

  1. 观察所得与推导所得

    不应把来源中发现的按钮与新推导出的开关描述为经过同等程度的验证。

  2. 单一模型可减少偏差

    根据同一个 YAML 生成文档和预览,可以减少声明的令牌与渲染值之间的不一致。

  3. 在应用界面上测试

    仅适用于主视觉区域的设计语言可能无法用于信息密集的应用界面;第四个预览会检验这种差异。

04 示例任务

尝试聚焦的简报

以下示例简报尚未经过测试。使用前请检查该 Skill 的设置。

检查设置

使用包含模板和验证脚本的完整生成器仓库。生成的 Skill 文件夹有自己的发现命名方式和安装位置,具体因智能体而异。

上游源文件
https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

需要文件访问权限、合适的参考资料检查工具、用于运行 validate.mjs 的 Node,以及通过浏览器审查来增强视觉效果方面的可信度。工具的可用性会影响信息提取的保真度。

从一项交付成果开始

运行该 Skill 前,请调整此简报中的范围、源材料和约束。

示例简报
使用 hue,根据提供的本地 UI 代码和截图创建可复用的设计语言 Skill。区分观察到的组件与推导出的组件,保留我们实际使用的强调色和圆角处理,并提出获得许可的字体和图标后备方案。确认设计方向和核心令牌,然后生成模型、参考资料和四个预览,并提供验证证据。

检查结果

依据以下可观察标准检查实际输出。

  • 每个渲染出的令牌都可追溯至 design-model.yaml。
  • 清楚地区分观察到的专有资产和后备方案选择。
  • 所有生成的 HTML 文件均通过结构验证和实际视觉审查。

OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该 Skill 已捆绑提供,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源和许可证

本页描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
dominikmartn
Skill 文件
SKILL.md
许可证
MIT
已审查的快照
2026-10-07 · a910e31cd24b
编辑来源摘要
根据参考资料分析、共享的 YAML 模型、文档和四个经过验证的预览,生成可复用的设计 Skill。

由 OpenDesign 根据链接来源撰写的原创摘要。仓库 Star 数是具有日期属性的受欢迎程度信号,不代表 Skill 使用量或质量评分。

06 开始前的问题

开始前的问题

Hue 是否只构建落地页?

不是。落地页预览只是生成的设计 Skill 的一种演示,此外还有仪表板、组件库和应用界面。

它能否修改现有的设计 Skill?

可以。来源中的混合改编流程会先修改模型,并只重新生成受影响的文件,而不是替换整个系统。

它是否声称源品牌使用了后备图标套件?

不应如此。来源明确区分了观察到的图标风格与为预览选择的自由许可套件。

OpenDesign

为下一轮设计迭代留出空间。

将简报、源材料和设计工作集中保存在本地工作区中。将该 Skill 添加到工作流之前,请检查其自身设置。

上游源文件
https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md