design-html

Convert approved AI design mockups into Pretext-native HTML/CSS with responsive layouts.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/huichen/gstack --skill design-html-huichen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/huichen/gstack/tree/main/design-html
Command: npx skills add https://github.com/huichen/gstack --skill design-html-huichen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization: takes an approved AI mockup from /design-shotgun and generates production-quality Pretext-native HTML/CSS. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type.

Core Features & Use Cases

  • Finalize UI mocks by generating production-ready HTML/CSS with responsive layouts and accurate text flow.
  • Compute dynamic heights and auto-layout to fit content, while keeping a small footprint (roughly 30KB).
  • Smart routing to the appropriate Pretext patterns based on design type, enabling consistent design-to-code workflows.

Quick Start

Run /design-shotgun to approve a mockup, then run /design-html to generate production 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 design mockups into production-ready HTML?

To convert design mockups into production-ready HTML, you must first approve a visual mockup using the /design-shotgun workflow, then run /design-html to generate the final HTML and CSS assets automatically.

Does the generated HTML handle responsive layouts and dynamic text reflow?

Yes, the generated HTML handles responsive layouts and dynamic text reflow. It computes accurate heights and auto-layouts to fit content natively, ensuring the final UI adapts correctly without fixed dimensions.

What is the best way to finalize UI features from approved design mockups?

The best way to finalize UI features from approved mockups is to use an automated generation workflow that maps approved visuals to Pretext-native HTML patterns, saving the finalized assets to a design-specific path for shipping.

Can I integrate generated frontend HTML with Pretext APIs without dependencies?

Yes, you can integrate generated frontend HTML with Pretext APIs without dependencies. The smart routing selects appropriate Pretext patterns for each design type, maintaining a small footprint of roughly 30KB with zero external dependencies.

Do I need an approved mockup before generating HTML code?

Yes, you need an approved mockup before generating HTML code. The workflow requires a finalized visual mockup from the /design-shotgun stage as the direct input to ensure the output matches the intended design exactly.