用途:design-html 是 Garry Tan gstack 中的一项技能,用于把设计规范、模型图或 Figma 描述转换为可直接用于生产的 HTML/CSS,强调像素级还原,保留设计源中的排版选择、间距关系与视觉层级。
主要能力:忠实实现设计稿,产出生产级 HTML/CSS;触发短语包括 "design html"、"design to HTML"、"implement design"、"mockup to code"。
使用方式:先判断该位置的技能是完整版本还是仅指针。若 SKILL.md 中仍含 das: 块,说明只是指针,需要先安装。检测命令:全局用 grep -q "^das:" ~/.agents/skills/design-html/SKILL.md 2>/dev/null && echo "pointer" || echo "installed",项目用 grep -q "^das:" .agents/skills/design-html/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"。无 das: 块则表示已安装完整技能,可直接调用。
检测安装范围:[ -e ~/.agents/skills/design-html ] && echo "global" || echo "project"。全局安装(带 -g):npx skills add garrytan/gstack --skill design-html -g -y。项目安装(不带 -g):npx skills add garrytan/gstack --skill design-html -y。在 Claude Code 中,可将上述任一命令以 ! 开头作为聊天消息发送,无需离开对话即可运行。安装后以技能名 design-html 调用。
适用场景:把模型图、Figma 规范或设计描述落到 HTML/CSS 实现,需要较高视觉还原度的场景。
限制:资料未说明支持的框架、浏览器范围、响应式处理、还原度验证方法及收费情况;介绍中未提供具体代码示例之外的产出细节,更多能力需参考完整技能 garrytan/gstack。