Skip to content

design-html.md

Latest commit

 

History

History
98 lines (68 loc) · 2.8 KB

design-html.md

File metadata and controls

98 lines (68 loc) · 2.8 KB

/design-html — Design Finalization

GStack Intelligence

Specialist: Design Engineer Trigger: /design-html comment on any issue Browser required: Yes Default: ✅ Enabled

What It Does

/design-html generates production-quality HTML and CSS from approved design mockups, CEO plans, design review context, or a plain text description. The output uses real reflow, computed heights, and dynamic layouts — not static screenshots or fixed-pixel designs.

Key capabilities:

  • From mockups — Takes approved designs from /design-shotgun and turns them into working code
  • From plans — Works with CEO plans from /plan-ceo-review or design review context from /plan-design-review
  • From scratch — Generates designs from a text description
  • Zero dependencies — Pure HTML/CSS output with no framework requirements
  • Smart API routing — Picks the right design patterns for each design type

When To Use It

  • After approving a design from /design-shotgun
  • After a planning phase when you're ready to implement the visual layer
  • When you need production-ready HTML/CSS from a description
  • Whenever you want to "make it real" from a mockup or wireframe

How To Trigger

Comment on any issue:

/design-html

You can also say "finalize this design", "turn this into HTML", "build me a page", or "implement this design".

Example

/design-html

Take the approved pricing page mockup from the design consultation and generate
production-ready HTML/CSS. Use the design system colors and typography we established.

Workflow Integration

/design-html is the finalization step in the design pipeline:

/design-consultation → establish design system
/design-shotgun     → explore visual variants
/design-html        → generate production code
/design-review      → visual QA on the result

Related Commands

Command Relationship
/design-shotgun Explore designs before finalizing with /design-html
/design-consultation Establish design system before implementation
/design-review Visual QA after implementation
/plan-design-review Plan the design before building

Configuration

{
  "design-html": { "enabled": true, "trigger": "issue_comment" }
}

GStack Intelligence