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.
Installs into .claude/skills of the current project.
Sponsors
SSkills DirectorySkills Directory
Is that skill safe to install?
SSkills DirectorySkills Directory
Know which skills are safe — weekly.
Are you the author of Design Html?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/infometa-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
