design-html

Convert approved mockups or planning inputs into production-ready HTML/CSS.

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

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

  • Produces production-ready HTML/CSS from design inputs, ready to deploy
  • Smart routing selects the appropriate Pretext pattern per design type
  • Integrates with mockups, planning documents, or free-text descriptions to deliver HTML/CSS

Quick Start

Use design-html to convert an approved mockup or plan into production HTML/CSS in one step.

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

Converting design mockups into production HTML and CSS involves routing approved mockups through smart pattern selection to generate zero-dependency, deployable code with computed layouts, text reflow, and dynamic heights.

What is the best way to generate HTML from a planning document?▼

The best way to generate HTML from a planning document is using smart routing to select appropriate design patterns, yielding production-ready code with text reflow, computed heights, and zero dependencies.

Can I build a web page from a fresh text description without existing mockups?▼

You can build a web page from a fresh text description without existing mockups by supplying a free-text description to generate production-quality HTML and CSS with dynamic layouts and small footprint.

Does this HTML generation approach support dynamic text reflow and computed heights?▼

This HTML generation approach supports dynamic text reflow and computed heights, ensuring layouts adapt correctly while maintaining a small 30KB footprint and zero external dependencies.

Do I need external dependencies or frameworks to deploy the generated CSS layout?▼

No external dependencies or frameworks are needed to deploy the generated CSS layout, because the output is production-ready, has zero dependencies, and maintains a small 30KB overhead.