design-html

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

Updated Mar 31, 2026

Search Tags:#design #ui #html #frontend #design-to-code #pretext

Ready to run

npx skills add https://github.com/huichen/gstack --skill design-html-huichen

💬 Prompt for ChatGPT / Claude Chat▼

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.