skills.rest
benrapport
benrapportCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert approved UI mockups into production-ready HTML/CSS with responsive behavior.

Updated Mar 31, 2026
Search Tags:#automation#design#html#layout#frontend#pretext
One-click install
npx skills add https://github.com/benrapport/Vote-Better --skill design-html-benrapport
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/benrapport/Vote-Better/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/benrapport/Vote-Better --skill design-html-benrapport

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts approved UI mockups into production-ready HTML/CSS with precise layout and responsive behavior.

Core Features & Use Cases

  • Design finalization: converts approved mockups into production-ready Pretext-native HTML/CSS with computed layouts and responsive behavior.
  • Frontend handoffs: supports marketing pages, dashboards, and editorial layouts requiring consistent typography and spacing.
  • Output management: saves design artifacts under ~/.gstack/projects/$SLUG/designs and respects design tokens from DESIGN.md.

Quick Start

Approve a mockup with design-shotgun, then run the design-html workflow to produce production-ready HTML.

Frequently Asked Questions about design-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert UI mockups into production-ready HTML?▼

Converting UI mockups into production HTML requires approving a mockup first, then running the design-html workflow. It generates production-ready HTML/CSS with computed layouts and responsive behavior for frontend handoffs.

What is the best way to automate frontend design handoffs for marketing pages?▼

The best way to handle frontend design handoffs for marketing pages is using the design-html workflow. It converts approved mockups into production-ready HTML/CSS with precise layout and responsive behavior.

Does design-html require a DESIGN.md file for brand tokens?▼

Yes, design-html requires a DESIGN.md file to read brand properties and design tokens. It uses these tokens to ensure consistent typography and spacing across the generated HTML/CSS output.

Can I use Pretext to generate responsive dashboards and editorial layouts?▼

Yes, you can use Pretext to generate responsive dashboards and editorial layouts. The design-html workflow supports these use cases by producing HTML/CSS where text flows and components adapt to different viewports.

Where are design artifacts saved when converting mockups to HTML?▼

Design artifacts are saved under the ~/.gstack/projects/$SLUG/designs directory. This output management ensures your generated HTML/CSS files are organized within your project structure.

Related Skills

Explore More Software Engineering Skills→
jayzalowitzjayzalowitz
2

design-html

Convert approved AI mockups into Pretext-native HTML and CSS.

Community
Advanced
mulyovedmulyoved

design-shotgun

Generate and compare multiple AI design variants on a side-by-side board.

Community
Advanced
Jesse-L-MJesse-L-M

design-html

Convert approved design mockups into production-ready Pretext HTML/CSS.

Community
Advanced
SL-IT-AMAZINGSL-IT-AMAZING

frontend-ui-ux

Translate visual UI concepts into accessible HTML/CSS/JS frontend components.

Official
Basic