design-html

v2026.09.25

Implement designs as production-ready HTML/CSS with pixel-level fidelity. Garry Tan's design-html skill — translates mockups, Figma specs, or design descriptions into clean, semantic, accessible HTML output.

GitHub
安装命令
npx skhub add podo/design-html
Markdown
SKILL.md

design-html

Catalogue stub — full skill: garrytan/gstack

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/design-html/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/design-html/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2
  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/design-html ] && echo "global" || echo "project"
    

    Global (installed with -g):

    npx skills add garrytan/gstack --skill design-html -g -y
    

    Project (installed without -g):

    npx skills add garrytan/gstack --skill design-html -y
    

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

  • Skill name: design-html
  • Trigger phrases: "design html", "design to HTML", "implement design", "mockup to code"

What it does

Translates design specs, mockups, or Figma descriptions into production-ready HTML/CSS with pixel-level fidelity. Part of Garry Tan's gstack — focused on faithful implementation that preserves typographic choices, spacing relationships, and visual hierarchy from the design source.

发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.25

发布时间

Sep 25, 2026

分类

未分类

许可证

MIT

源路径

skills/design-html

默认分支

main

最新提交

c3fac4c

Tree SHA

4419447