design-html

Generates Pretext-native HTML and CSS from approved mockups or design briefs.

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

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

  • Production-ready HTML/CSS from approved mockups or briefs
  • Smart API routing selects Pretext patterns per design type
  • Proactive proposals when designs or plans are ready

Quick Start

Supply an approved mockup or design brief and run the skill to generate production-ready 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 HTML and CSS?

To convert design mockups into production HTML and CSS, supply an approved mockup or design brief to generate Pretext-native code with dynamic layouts, computed heights, and reflowing text.

What is the best way to generate responsive HTML from a design brief?

Generating responsive HTML from a design brief is best handled by using smart API routing to select appropriate Pretext patterns, ensuring typography and responsive behavior are dynamically computed.

Do I need external dependencies to build production-ready HTML from mockups?

No dependencies are required to build production-ready HTML from mockups. The generation process operates with zero dependencies and a 30KB overhead, leveraging smart API routing independently.

Can I use approved CEO plans to generate dynamic web page layouts?

Yes, you can use approved CEO plans from /plan-ceo-review to generate dynamic web page layouts. The pipeline transforms these plans into production-quality HTML where text reflows and heights compute automatically.

How does smart API routing work when finalizing HTML and CSS designs?

Smart API routing finalizes HTML and CSS designs by analyzing the design type and automatically selecting the appropriate Pretext patterns to ensure production-quality code generation from the provided mockup.

Why does my generated HTML need computed heights and dynamic layouts?

Generated HTML needs computed heights and dynamic layouts to ensure text actually reflows and elements adapt naturally, moving beyond static mockup representations into production-quality, responsive web pages.