design-html

Convert approved design inputs into production HTML/CSS with Pretext patterns.

1|Updated May 27, 2026

Search Tags:#design #html #layout #css #mockups #pretext

Ready to run

npx skills add https://github.com/mi179/claude-skills --skill design-html-mi179

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/mi179/claude-skills/tree/main/user/gstack/design-html
Command: npx skills add https://github.com/mi179/claude-skills --skill design-html-mi179

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the finalization of design work by translating approved mockups and plans into production-ready HTML and CSS, reducing manual handoffs and rework.

Core Features & Use Cases

Generates production-quality HTML/CSS from approved mockups or design plans.
Reads design context from /design-shotgun, /plan-ceo-review, /plan-design-review, or builds from scratch from a user-provided description.
Computes layout metrics and applies the right Pretext patterns to produce responsive pages.

Quick Start

Provide a design description or an approved plan to generate production HTML/CSS.

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 and CSS?▼

To convert design mockups into production-ready HTML and CSS, provide an approved mockup or design plan and the tool generates responsive layouts by applying Pretext patterns and computing dynamic layout heights automatically.

Can I generate HTML and CSS from a text description of a design?▼

Yes, you can generate HTML and CSS from a text description. If you lack formal mockups, simply provide a user-described design and the system builds production-quality code from scratch.

Does this HTML layout generator work with approved CEO review plans?▼

Yes, this HTML layout generator works directly with approved CEO plans from plan-ceo-review contexts, as well as design mocks from design-shotgun and design-review contexts, translating them into final code.

How does the CSS layout handle responsive dynamic heights?▼

Responsive CSS layout handles dynamic heights by computing layout metrics during generation and applying specific Pretext patterns to ensure the final page adapts correctly across different screen sizes.

What is the best way to reduce manual HTML handoffs after a design is approved?▼

The best way to reduce manual HTML handoffs after a design is approved is to automate finalization, translating approved mockups and plans directly into production-quality HTML and CSS without manual rework.

Do I need formal mockups to start generating responsive HTML layouts?▼

No, you do not need formal mockups to start generating responsive HTML layouts. You can supply a direct user-provided design description instead of formal mocks or approved plans to generate the code.