mcpField
D
design-consultation

design-consultation

github.com/podo设计与 UI30171 次安装4 天前更新
代码仓库

关于 design-consultation

design-consultation 是基于 Garry Tan 方法、从零构建设计系统的结构化流程，帮助早期产品团队制定视觉语言、间距、字体、颜色令牌和组件库。

主要功能

  1. 01建立视觉语言
  2. 02定义间距和字体系统
  3. 03设定颜色令牌
  4. 04构建组件库
  5. 05遵循结构化咨询流程

适用场景

  1. 01为早期产品创建设计系统
  2. 02确定基础设计令牌和组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill design-consultation

安装后在 Claude Code 中输入/design-consultation确认已加载。

附带文件stub.yaml

详细介绍

design-consultation

目录占位条目 — 属于 garrytan/gstack（design-consultation）

决策树

  1. 是否已安装完整技能？

    • f=~/.claude/skills/gstack/design-consultation/SKILL.md; [ -e "$f" ] && ! grep -qs "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 调用该技能并继续
    • pointer → 前往第 2 步

  2. 安装（skills CLI 无法安装此技能）：

    此技能是 gstack 的一部分，并会调用 gstack 的共享工具（~/.claude/skills/gstack/bin/…），因此应安装 gstack 本身，而不是单独安装此技能（--skill design-consultation 会失败，因为 CLI 只能看到 gstack 的根路由；即使使用 --full-depth，复制的说明也缺少这些工具）。./setup 需要 Bun，会构建二进制文件、下载 Chromium，并在你的 Claude 设置中注册 Stop hook（使用 ./setup --no-timeline-stop-hook 可选择不启用）；运行前请征求用户同意。上游 README 还会告诉 Agent 在设置完成后向 CLAUDE.md 添加 gstack 部分。

    git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack && ./setup

注意

  • 需要： Bun（设置程序拒绝使用低于 1.3.3 的版本；上游使用 1.4.2+ 进行测试）、Git 和 Claude Code
  • 许可证： MIT
  • 下载大小： 约 98 MB。

安装后调用

  • 技能名称：design-consultation
  • 触发短语：“design consultation”“design system from scratch”“build design system”

功能

Garry Tan（Y Combinator 总裁）从零开始构建完整设计系统的方法。通过结构化的咨询流程，确立视觉语言、间距比例、排版系统、颜色令牌和组件库。观点鲜明、系统性强，适用于早期阶段的产品。

评论

支持 Markdown