skills.rest
Jia-Hong-Peng
Jia-Hong-PengCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generate Pretext-native HTML/CSS with dynamic text reflow and computed heights.

Updated Feb 24, 2026
Search Tags:#design#html#layout#frontend#css#mockup#pretext
One-click install
npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-html-jia-hong-peng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Jia-Hong-Peng/jolike.com/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-html-jia-hong-peng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building HTML that actually works correctly is hard. CSS approximations fail when text reflows, heights need to be computed, and layouts must be dynamic. This Skill eliminates the gap between design mockups and production code by generating HTML where text truly reflows, heights adjust automatically, and layouts adapt to content.

Core Features & Use Cases

  • Pretext-Native Generation: Produces 30KB of zero-dependency HTML/CSS using the Pretext layout engine for pixel-perfect text rendering.
  • Multiple Input Sources: Works with approved mockups from design-shotgun, CEO plans from plan-ceo-review, design review context, or a simple user description.
  • Smart Pattern Routing: Automatically selects the right Pretext patterns for different design types including cards, chat bubbles, editorial spreads, and responsive interfaces.
  • Use Case: A product designer approves a homepage mockup in design-shotgun. Use this Skill to instantly generate production-ready HTML that handles dynamic content, varying text lengths, and mobile responsiveness without manual CSS tweaking.

Quick Start

Use the design-html skill to turn the approved marketing page mockup into a production-ready HTML file with dynamic text reflow and computed layouts.

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

To convert a design mockup into production-ready HTML, you need a tool that generates code with dynamic text reflow and computed layouts. This Skill processes approved mockups or plain descriptions to output zero-dependency, pixel-perfect HTML/CSS.

Why does my generated CSS layout break when text reflows or content length changes?▼

CSS layouts break during text reflow because standard approximations fail to compute dynamic heights automatically. Generating HTML using a dedicated layout engine ensures text truly reflows and heights adjust to varying content lengths without manual tweaks.

How do I generate responsive HTML for card-based interfaces and chat bubbles?▼

Generating responsive HTML for card-based interfaces and chat bubbles requires smart pattern routing to select appropriate layout structures. This Skill automatically applies the correct Pretext patterns to ensure adaptive layouts for these specific design types.

Do I need external CSS frameworks or dependencies to build adaptive editorial spreads?▼

You do not need external CSS frameworks or dependencies to build adaptive editorial spreads. This Skill generates zero-dependency HTML with a 30KB overhead, handling dynamic text reflow and computed heights natively.

What is the best way to turn a CEO plan or user description into a functional frontend layout?▼

The best way to turn a CEO plan or user description into a functional frontend layout is using a generator that accepts multiple input sources. It instantly creates production-quality HTML that adapts to content without manual CSS tweaking.

Can I use design review context to generate zero-dependency HTML?▼

Yes, you can use design review context to generate zero-dependency HTML. The Skill accepts approved mockups, CEO plans, or design review context as input sources to produce production-quality HTML with computed layouts.

Related Skills

Explore More Software Engineering Skills→
tony30552001tony30552001

design-html

Convert design mockups into production-ready HTML/CSS with dynamic layouts.

Community
Advanced
stayconnectquickstayconnectquick

design-html

Convert design concepts into Pretext-native HTML/CSS with zero external dependencies.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
shekerkammashekerkamma

design-html

Generate Pretext-native HTML/CSS with computed layout from design mockups.

Community
Advanced