design-html

Convert design mockups and plans into Pretext HTML/CSS markup.

1|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/devs6186/claude-private-skills-agents-commands --skill design-html-devs6186
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/devs6186/claude-private-skills-agents-commands/tree/main/skills/gstack/design-html
Command: npx skills add https://github.com/devs6186/claude-private-skills-agents-commands --skill design-html-devs6186

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. 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. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

Core Features & Use Cases

  • Auto-convert mockups or briefs into production-ready HTML/CSS with responsive layouts.
  • Adaptive design patterns: selects the appropriate Pretext HTML/CSS patterns for each design type.
  • Proactive design-to-code assistance: suggests HTML/CSS concrete implementations when a design is approved or a plan exists.

Quick Start

Provide an approved design mockup or user brief 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 a design mockup into production-ready HTML and CSS?

You can convert approved design mockups into production-ready HTML and CSS by providing the mockup or brief. The system applies smart routing to select Pretext patterns, generating responsive markup with zero external dependencies and dynamic text reflow.

Can I generate responsive HTML from a text description without a visual mockup?

Yes, you can generate responsive HTML from a text description without a visual mockup. The system accepts fresh user descriptions or approved plans, applying smart routing to output production-ready HTML and CSS with dynamic layouts.

Does design-to-code conversion work with zero external dependencies?

Yes, design-to-code conversion works with zero external dependencies. The generated production HTML and CSS relies entirely on native Pretext patterns, resulting in a 30KB overhead with no required external libraries.

What is the best way to implement an approved design plan into HTML?

The best way to implement an approved design plan into HTML is to input the plan directly after the planning phase. The system proactively suggests concrete implementations by selecting the correct Pretext patterns for the specific design type.

How does Pretext pattern routing work for HTML and CSS generation?

Pretext pattern routing works by analyzing the design type and automatically selecting the matching HTML and CSS patterns. This smart routing ensures the generated production markup adapts its layout structure accurately to the specific design input.

When should I use an automated design-to-code workflow for HTML?

You should use an automated design-to-code workflow for HTML when you have an approved mockup or finalized plan. It is triggered by phrases like finalize this design or build me a page, ensuring text reflows and layouts are computed dynamically.