Design Html — Workflow

Overview

How the design-html skill works, step by step.

Source Workflow

Claude skill workflow.

Step-by-step Workflow

design-html — Workflow

Auto-generated from SKILL.md. The skill itself is the source of truth; this is a human-readable map of what it does and how it runs.

What it does & when to use

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

Triggers

  • finalize this design
  • turn this into HTML
  • build me a page
  • implement this design
  • build the design
  • code the mockup
  • make it real

How it works

Workflow outline (sections of SKILL.md):

  1. Preamble (run first)
  2. Plan Mode Safe Operations
  3. Skill Invocation During Plan Mode
  4. Skill routing
  5. AskUserQuestion Format
  6. Artifacts Sync (skill start)
  7. Model-Specific Behavioral Patch (claude)
  8. Voice
  9. Context Recovery
  10. Writing Style (skip entirely if EXPLAIN_LEVEL: terse appears in the preamble echo OR the user's current message explicitly requests terse / no-explanations output)
  11. Completeness Principle — Boil the Lake
  12. Confusion Protocol
  13. Continuous Checkpoint Mode
  14. Context Health (soft directive)
  15. Question Tuning (skip entirely if QUESTION_TUNING: false)
  16. Completion Status Protocol
  17. Operational Self-Improvement
  18. Telemetry (run last)
  19. Plan Status Footer
  20. DESIGN SETUP (run this check BEFORE any design mockup command)
  21. UX Principles: How Users Actually Behave
  22. SETUP (run this check BEFORE any browse command)
  23. Step 0: Input Detection
  24. Step 1: Design Analysis
  25. Step 2: Smart Pretext API Routing
  26. Step 2.5: Framework Detection
  27. Step 3: Generate Pretext-Native HTML
  28. Step 3.5: Live Reload Server
  29. Step 4: Preview + Refinement Loop
  30. Step 5: Save & Next Steps
  31. Important Rules

Components

Single-file skill — all instructions live in SKILL.md.

Invoke

  • Slash: /design-html
  • Or a natural-language request matching the triggers above.

Source: SKILL.md in this directory.

Execution Logic

The skill executes when its trigger fires (slash command, natural-language match, or direct invocation). It reads its references, applies its rules, and produces the documented outputs.

Edge Cases

See the source skill's references/ and scripts/ folders for edge-case handling.

Failure Handling

A skill failure surfaces as a tool error or a partial output; never a silent skip. Re-run with --verbose (where applicable) for diagnostics.

Integration Notes

  • Claude — invoked via the Skill tool with skill: "design-html".
  • Codex — referenced from AGENTS.md if mirrored.
  • Antigravity — referenced from the workspace agent rules if mirrored.
  • HQ Project — listed on the landing page Skills section + post-login sidebar.
  • MD Project (md.sgnk.ai) — file rendered from Skills/Design Html/workflow.md.
  • Obsidian — file rendered with frontmatter + tags.

Usage Examples

Invoke via slash command or natural language matching the skill description.

Source: ~/.claude/skills/design-html/WORKFLOW.md