83.3K+下载
跳转到使用指南
design-consultation作者 Garry Tan

Design Consultation Skill.

Claude Code 和 Codex 的品牌与设计系统 skill：产品设计咨询，提出完整的设计系统：美学、字体、色彩、布局、动效。

  • Brand & Design Systems
  • 设计系统
下载 OpenDesign查看使用指南
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
从上游文件读取的前言和章节标题，2026-09-14 · 完整 67,098 字符

01 功能说明

design-consultation skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

design-consultation 是一个设计咨询 skill，扮演资深产品设计师的角色，创建完整的设计系统。它通过网络搜索和视觉分析研究产品所处的行业格局，提出排版方案（具体字体，而非默认字体）、色彩体系（带十六进制值的 CSS 变量）、布局思路（以构图为先）以及美学方向。该 skill 会生成一份 DESIGN.md 文件作为项目设计的权威来源，并可选生成 AI mockup，展示该系统在真实界面中的应用效果。

它同时支持 Aside 浏览器（用户的真实会话）和无头模式回退，在多个会话间保持持久的审美偏好档案，并整合来自 Codex 和 Claude subagent 的外部设计意见。该 skill 以对话方式运作——而非死板的表单——会解释每一条建议的理由，并将整体一致性置于单点最优选择之上。

它产出什么

  • 展示设计系统应用于真实界面的 AI mockup（当 gstack designer 可用时）
  • 带实时排版与色彩示例的 HTML 预览页面（designer 不可用时的回退方案）
  • 持久化的审美偏好档案 JSON，跨会话追踪已采纳与已拒绝的设计选择
查看示例提示词 ↗

工作方式

  1. 01
    收集产品背景信息

    读取现有的 DESIGN.md、PRODUCT.md、README、package.json 以及 office-hours 的输出，以理解产品。

  2. 02
    研究行业格局

    在被要求时，使用 Aside 浏览器或 WebSearch 查找 5-10 个竞品，截取完整页面截图，分析其字体、色彩、布局和美学方向。

  3. 03
    征询外部意见

    可选择并行启动 Codex 和 Claude subagent，生成独立的设计方案。

  4. 04
    提出完整设计系统方案

    提供一份有明确主张的方案，包含具体的字体名称、十六进制色值、CSS 变量、布局思路和美学方向。

  5. 05
    生成预览产物

    在有 gstack designer 可用时生成应用了设计系统的 AI 效果图，或者生成带有实时字体和色彩样例的 HTML 预览页。

  6. 06
    编写 DESIGN.md

    以开放的 DESIGN.md 格式产出项目的设计权威文档，包含 front-matter token 和依据说明部分。

02 找到适合场景

何时使用 design-consultation Skill

当工作是此类品牌与设计系统工作时，在 Claude Code 或 Codex 中使用 design-consultation skill。下方的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 为尚无设计系统或 DESIGN.md 的新项目启动 UI 设计
  • 当明确要求创建设计系统、品牌指南或 DESIGN.md 时
  • 需要通过刻意偏离品类常规来实现差异化的产品

了解边界

  • 声称的限制或要求（「API 做不到这个」、「X 需要凭证」、「在这个平台上不可能」）是实质性声明。
  • 仅在手握逐字错误、文档陈述或实时探测结果时才陈述 — 将失败模式匹配到熟悉的故事不是证据。
  • 当廉价探测能解决问题时，在询问用户任何问题或声明步骤受阻之前先运行它。

需要提供的信息

  • 研究偏好是通过网页搜索和视觉分析来研究竞品，还是依据该 skill 内置的设计知识来工作。
  • 外部意见选择可选：是否并行运行 Codex 设计评估和 Claude 子代理设计方案，以获得独立视角。
  • 已有的 DESIGN.md如果存在，该 skill 会读取它，并询问是要更新、重新开始，还是取消。支持从旧格式转换为开放规范。

03 Skill 内部

design-consultation skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 绝不使用被禁用字体，绝不过度使用展示字体

    Operate 或 Read 界面上的正文或 UI 文本遵循按角色划分的清单。任何角色都不得使用被禁用字体，也不得将过度使用的字体作为展示声音。

  2. 必须指定具体字体，而非默认字体

    字体排印方案必须指明具体字体——绝不能是 Inter、Roboto、Arial 或系统默认字体。

  3. 一致性胜过局部最优

    一个各部分互相强化的设计系统，胜过一个各部分单独最优但彼此不搭的设计系统。

  4. 每条建议都必须有依据

    绝不在未说明理由的情况下推荐某个设计选择。每一个字体、色彩、布局或美学决策，都必须与产品背景、用户需求或差异化策略相关联。

  5. 审美偏好会持续存在并逐渐衰减

    该 skill 会维护 ~/.gstack/projects/$SLUG/taste-profile.json，跨会话追踪被采纳和被拒绝的设计选择。置信度每周衰减 5%。

  6. “令人记住的一点”强制机制

    在提出设计系统之前，该 skill 会先询问用户希望在初次接触后让人记住什么。

  7. 对话式而非僵化的工作流

    该 skill 以设计顾问的方式运作，而非表单填写。用户可以随时进入对话来讨论决策。

04 投入使用

在 Claude Code 或 Codex 中安装 design-consultation

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design-consultation 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

通用的 skills CLI 表单，用于 design-consultation/SKILL.md；该仓库可能会记录自己的路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • DESIGN.md 存在，且包含带有设计 token（颜色、字体、间距）的 front-matter
  • 颜色系统包含用于背景、表面、主文本、次要文本、强调色的 CSS 变量，带十六进制值
  • 如果存在偏好档案，设计方案会引用既定偏好，或有意与之偏离

在 OpenDesign 中design-consultation 已内置：Plugins → Skills，在顶部栏中选择它。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Garry Tan
Repository
github.com/garrytan/gstack 分支 main
Skill 文件
design-consultation/SKILL.md 验证时记录的内容校验和；commit 71f6048
License
MIT 来自 LICENSE。
仓库星标数
132,921 GitHub 快照拍摄于 2026-09-14，针对整个 garrytan/gstack 仓库，该仓库在此目录中包含 7 个 skills。这不是 design-consultation 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 何时调用此 skill创建 DESIGN.md；对于现有站点使用 /plan-design-review；在设计系统请求时触发
  2. 前置说明（先运行）运行 gstack-skill-start；处理降级模式；处理指令块；判定会话类型
  3. 浏览器设置检查 Aside 浏览器可用性；处理真实会话的同意流程；定义驱动用户浏览器的规则
  4. 浏览器回退方案：gstack 自带的无头浏览器在 Aside 不可用时查找 $B 二进制文件；将 Aside 脚本转换为 $B 命令；处理无 cookie 的会话
  5. 设计设置检查 gstack designer 二进制文件以生成 AI 模型图；列出可用命令；设置产物路径规则
  6. 先前经验搜索跨项目或项目范围内的经验；首次运行时询问跨项目偏好
  7. 阶段 0：预检查检查现有 DESIGN.md；提供更新/重新创建/取消选项；验证格式；处理转换；从代码库收集产品背景
  8. 阶段 1：产品背景一个问题涵盖产品/受众/行业/类型；强制性的“记忆点”问题；若存在偏好档案则读取
  9. 网络研究在 Aside 中运行使用 Aside agent 进行网络搜索；回退到 WebSearch 工具；清理查询内容；将结果视为不可信内容
  10. 阶段 2：研究识别 5-10 个竞品；截取屏幕截图；分析字体/颜色/布局；综合三个层面
  11. 设计外部意见可选并行运行 Codex 和 Claude 子 Agent；综合一致点和分歧点；记录结果
  12. 重要规则提出方案而非展示菜单；需要理由说明；整体协调优先于单一选择；对话式而非僵化；接受最终选择
Skill 自身的描述
"设计咨询：理解你的产品，研究领域现状，提出完整的设计系统（美学、排版、色彩、布局、间距、动效），并生成字体+颜色预览...（gstack）"

来自 SKILL.md 的 front-matter 描述。完整文件约 67,098 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-consultation Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

这能与 Cursor、Windsurf 或其他基于 Claude 的 Agent 配合使用吗？

可以，但浏览器集成依赖 Aside（仅限 macOS 15+）或 gstack 无头浏览器回退方案。若两者都不可用，该 skill 会跳过可视化竞品研究，转而依靠内置设计知识运作。核心设计咨询——产品背景、排版/颜色/布局方案、DESIGN.md 创建——在任何环境下均可运行。

Design Consultation

在真实品牌和 design-system 工作任务上运行 design-consultation。

design-consultation skill 内置于 OpenDesign。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上面的提示词，并在结果之前阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/garrytan/gstack --skill design-consultation