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
Install command
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.

Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.25

Published

Sep 25, 2026

Category

Uncategorized

License

MIT

Source path

skills/design-html

Default branch

main

Latest commit

c3fac4c

Tree SHA

4419447