skills.rest
a29paul
a29paulCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generate Pretext-native HTML/CSS layouts with dynamic text reflow from mockups or descriptions.

1|Updated Apr 13, 2026
Search Tags:#html#layout#frontend#css#design-system#pretext
One-click install
npx skills add https://github.com/a29paul/hexlens --skill design-html-a29paul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/a29paul/hexlens/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/a29paul/hexlens --skill design-html-a29paul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the gap between approved designs and production-ready frontend code. Instead of manually translating mockups into HTML and CSS, it generates Pretext-native layouts where text reflows correctly, heights compute dynamically, and cards size themselves automatically.

Core Features & Use Cases

  • Pretext-Native Layout Engine: Generates HTML/CSS with computed text reflow, dynamic heights, and responsive card sizing using the Pretext library.
  • Multiple Input Sources: Works from approved mockups, CEO plans, design review context, or a plain text description.
  • Zero Dependencies: Produces a self-contained 30KB output with no external dependencies.
  • Smart Pattern Routing: Automatically selects the right Pretext patterns for different design types.

Quick Start

Use the design-html skill to turn your approved mockup or design description into a complete, production-ready HTML page 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 generate production-ready HTML from an approved design mockup?▼

You can generate production-ready HTML from approved mockups by using an automated layout engine that translates visual designs into self-contained HTML and CSS, applying computed text reflow and dynamic heights without external dependencies.

What is the best way to handle dynamic text reflow and responsive card layouts in frontend development?▼

Dynamic text reflow and responsive card layouts are best handled using a zero-dependency layout engine that computes heights automatically, ensuring self-contained HTML output that sizes cards dynamically without external libraries.

Does this HTML generation approach support complex typography like CJK text and bidirectional scripts?▼

Yes, complex typography including CJK text, emoji correction, and bidirectional scripts is supported through the Pretext layout engine, handling these scripts natively while generating zero-dependency, self-contained HTML output.

Can I use plain text descriptions or CEO plans as input instead of visual mockups?▼

Yes, you can use plain text descriptions, CEO plans, or design review context as input instead of visual mockups, automatically selecting the right layout patterns for different design types based on the provided input source.

Do I need external CSS frameworks or JavaScript libraries to run the generated HTML?▼

No, you do not need external CSS frameworks or JavaScript libraries. The generated HTML is a self-contained 30KB output with zero external dependencies, ensuring it runs independently without external resources.

Why does my frontend layout break when translated from a design mockup to HTML?▼

Frontend layouts break during translation when static designs fail to account for dynamic text reflow and computed heights. Using a native layout engine solves this by automatically sizing responsive cards and handling complex typography natively.

Related Skills

Explore More Software Engineering Skills→
GrassHopper42GrassHopper42

design-html

Convert design mockups into HTML/CSS with dynamic layouts and text reflow.

Community
Advanced
EmasoftEmasoft

amvcp-share-pages

Deploy a self-contained HTML page to Vercel and return a public live URL.

Community
Intermediate
cegit27cegit27
3

design-html

Convert design mockups into Pretext-native HTML with computed layouts and dynamic text reflow.

Official
Advanced
traylinxtraylinx
2

frontend-design

Create production-grade frontend interfaces with design tokens and responsive layouts.

Official
Advanced