Design Html

---
name: design-html
description: |
  Generate production-quality HTML/CSS using the Pretext framework. Works with approved mockups or from scratch. 30KB overhead, zero deps.
  Triggers: design to HTML, implement design, generate HTML CSS, design implementation.
---

# Design HTML — Production HTML/CSS Generation

Generate production-quality HTML/CSS using the Pretext framework. Works with approved design mockups, CEO plans, design review context, or from scratch.

## Key Features

- 30KB overhead, zero external dependencies
- Smart API routing: picks the right Pretext patterns for each design type
- Self-contained output files

## Vendor

- `vendor/pretext.js` — Pretext framework library

## Workflow

1. **Input**: Receive design context (mockup, description, DESIGN.md reference)
2. **Pattern selection**: Choose appropriate Pretext patterns for the design type
3. **Generate HTML/CSS**: Production-quality output with the Pretext framework
4. **Verify**: Check output renders correctly, matches design intent
5. **Deliver**: Write final HTML/CSS files

## Output

- Self-contained HTML file with embedded CSS
- Mobile-responsive layout
- Clean, semantic markup
- Pretext framework patterns applied appropriately