skills.rest
mi179
mi179COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/mi179/claude-skills --skill design-html-mi179
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
kunalrawat425kunalrawat425

design-html

Generate production HTML/CSS from approved design mockups and planning context.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
limzivectorlimzivector

design-html

Convert approved design mockups into HTML/CSS code using Pretext patterns.

Community
Intermediate
thanh-abaiithanh-abaii
34

gs:design-html

Convert design mockups into HTML/CSS using Pretext patterns and Python.

Community
Advanced