mcpField
D
design-html

design-html

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

关于 design-html

design-html 是 gstack 中的技能，可将已批准的模型稿、计划或简要说明转为可用于生产的 HTML 和 CSS。它会生成适配所检测框架的代码，通过实时预览和验证截图迭代，并提取设计令牌。

主要功能

  1. 01将设计稿和说明转为 HTML/CSS
  2. 02支持原生 HTML 或检测到的框架
  3. 03通过预览和截图迭代优化
  4. 04使用 Pretext 计算文本布局
  5. 05提取设计令牌

适用场景

  1. 01将已批准的模型稿实现为网页
  2. 02根据计划或简要说明构建 HTML/CSS
  3. 03迭代修改此前生成的设计

安装

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

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

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

附带文件stub.yaml

详细介绍

design-html

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

决策树

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

    • f=~/.claude/skills/gstack/design-html/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 本身，而非单独安装此技能。./setup 需要 Bun、会构建二进制文件、下载 Chromium，并在 Claude 设置中注册 Stop hook；运行前请先征求用户同意。

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

注意事项

  • 需要： Bun；Claude Code
  • 许可证： MIT
  • 下载量较大（约 185 MB）： skills CLI 克隆超过 300 秒后会放弃；如果超时，请使用 SKILLS_CLONE_TIMEOUT_MS=900000 重试。

安装后调用

  • 技能名称：design-html（上游使用的短语：“build the design”“code the mockup”“make design real”）
  • 触发短语：“design html”“design to HTML”“implement design”“mockup to code”
  • 在 gstack 的 /design-shotgun 生成获批的样稿后使用效果最佳；也可以根据计划或自由形式的说明来生成
  • 更轻量、效果有所下降的替代方案（仅提供说明，不包含 gstack 的 bin/ 辅助工具）：npx skills add garrytan/gstack --full-depth --skill design-html

功能

这是 Garry Tan 的 gstack 的一部分：将获批的设计转化为最终的、适合生产环境的 HTML/CSS。其引擎是 Pretext，因此文本布局由计算得出，而非近似估算；窗口尺寸变化时，文本也会重新排版。它会识别输入内容（来自 /design-shotgun 的获批样稿、计划、自由形式的说明，或需要进一步完善的早期输出），分析设计，生成 HTML（原生 HTML 或适配检测到的框架），通过实时预览和验证截图进行迭代优化，并在最后提取设计令牌。Figma 并非文档中列出的输入类型；此技能依赖 gstack 的共享工具和工作流。

不适用场景

  • Figma 文件或规范是事实来源 → 使用 figma-official-skills
  • 仍在定义视觉语言和设计系统 → 使用 design-consultation
  • 希望在构建前评审计划或实时 UI 设计 → 使用 plan-design-review 或 design-review-garrytan

评论

支持 Markdown