Design HTML

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.

infometa Updated 228 repo stars

File contents

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

infometa/workbuddyskills/tree/main/experts/gstack/skills/design-html commit d972638bb7

Frequently asked questions

npx skillmds@latest add infometa/design-html