skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

design-html

Generates production-quality Pretext-native HTML and CSS from approved design mockups.

Updated Jun 22, 2026
Search Tags:#html#frontend#css#mockup#text layout#pretext#design finalization
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill design-html-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/gstack/design-html
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill design-html-aicodepro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into real, working front-end code usually requires manual translation that loses layout fidelity. This Skill finalizes designs by generating production-quality HTML/CSS where text reflows naturally, heights are computed, and layouts are dynamic. ## Core Features & Use Cases - Design Finalization: Converts approved mockups from /design-shotgun, CEO plans, or design reviews into real HTML/CSS output. - Pretext-Native Layouts: Uses the bundled Pretext text-layout engine (vendor/pretext.js) for accurate text measurement, line breaking, and dynamic height computation with zero dependencies and ~30KB overhead. - Smart API Routing: Picks the right Pretext patterns for each design type, whether building a page from scratch or implementing an existing plan. - Use Case: After approving a landing page mockup in a planning session, invoke this Skill to produce the final responsive HTML/CSS implementation with real text flow instead of static placeholder boxes. ## Quick Start Ask the assistant to turn the approved mockup into a real HTML page using the design-html skill.

Frequently Asked Questions about design-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a design mockup into HTML and CSS?▼

Invoke the design-html skill after approving a mockup or plan. It generates production-quality HTML/CSS with real text reflow and computed heights, using the bundled Pretext layout engine rather than static placeholder markup.

What is the Pretext library used for in HTML generation?▼

Pretext is a zero-dependency text layout engine (vendor/pretext.js) that measures text, computes line breaks, and calculates dynamic heights. It lets generated layouts respond to real content instead of fixed-size boxes, at roughly 30KB overhead.

Can I build a page from scratch without an existing mockup?▼

Yes. The skill works from approved mockups, CEO plans, design review context, or a plain user description of the desired page. It routes to the appropriate Pretext patterns based on the design type.

Does design-html require external npm dependencies?▼

No. The Pretext engine is vendored directly in the skill directory and has zero runtime dependencies. It relies only on standard browser APIs like canvas text measurement and Intl.Segmenter.

When should I use design-html versus a design review skill?▼

Use design review skills to evaluate and iterate on mockups before approval. Use design-html afterward, when the design is finalized and you need the actual HTML/CSS implementation produced.

Related Skills

Explore More Design & Creative Skills→
algorithmbasicsalgorithmbasics

design-html

Translate approved design mockups into responsive HTML and CSS.

Community
Advanced
Impertio-StudioImpertio-Studio
163

frappe-ops-website-deploy

Deploy static HTML/CSS assets as ERPNext/Frappe Web Pages via REST API.

Official
Advanced
raduceucaraduceuca

Design Polish Skill

Review UI components against design guidelines for spacing, typography, color, and accessibility.

Community
Intermediate
organvm-i-theoriaorganvm-i-theoria

artifacts-builder

Builds React and shadcn/ui web apps and bundles them into single HTML artifacts.

Official
Intermediate