skills.rest
Simon-YHKim
Simon-YHKimCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generates production-quality HTML/CSS from approved design mockups using Pretext text layout.

Updated Apr 5, 2026
Search Tags:#html#frontend#css#design implementation#layout engine#pretext#mockup to code
One-click install
npx skills add https://github.com/Simon-YHKim/eject-button --skill design-html-simon-yhkim
Or copy as Structured Prompt for Agentâ–¼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Simon-YHKim/eject-button/tree/main/.claude/skills/design-html
Command: npx skills add https://github.com/Simon-YHKim/eject-button --skill design-html-simon-yhkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes references (resource) components.

What problem does it solve? Turning an approved design mockup or product plan into working HTML usually means hand-coding layouts where text overflows, heights break on resize, and the result drifts from the mockup. This Skill converts approved mockups, CEO plans, or plain descriptions into self-contained HTML where text reflows, heights are computed, and layouts stay dynamic. ## Core Features & Use Cases - Mockup-to-HTML conversion: Reads an approved design PNG (from /design-shotgun) or a CEO plan and generates a finalized HTML file with real content, never lorem ipsum. - Pretext-native layout: Uses the Pretext text layout engine (prepare, layout, walkLineRanges, layoutNextLine) so text reflows on resize, cards self-size, and chat bubbles shrinkwrap. - Smart API routing: Classifies the design type (landing page, dashboard, chat UI, editorial) and picks the right Pretext patterns for each. - Framework output: Detects React, Svelte, or Vue in the project and can emit framework-native components with TypeScript or JavaScript instead of vanilla HTML. - Use Case: After approving a landing page mockup in /design-shotgun, run this Skill to get a single self-contained finalized.html with inlined Pretext, design tokens from DESIGN.md, dark mode support, and responsive breakpoints at 375/768/1024/1440px. ## Quick Start Ask the assistant to turn the approved design mockup into a finalized 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?â–¼

Run the design-html skill after approving a mockup in /design-shotgun. It reads the approved PNG, extracts colors, typography, and layout structure, then generates a finalized.html file with real content and Pretext-based dynamic layout.

What is Pretext and why does the generated HTML use it?â–¼

Pretext is a text layout engine (@chenglou/pretext) that computes text measurement and line breaking in JavaScript. The generated HTML uses it so text reflows on resize, element heights match content, and containers shrinkwrap, instead of relying on CSS approximations.

Can design-html output React or Vue components instead of vanilla HTML?â–¼

Yes. The skill detects React, Svelte, Vue, Angular, Solid, or Preact in package.json and asks whether to emit a framework-native component with Pretext hooks, in TypeScript or JavaScript, instead of a self-contained HTML file.

Does design-html work without an approved design mockup?â–¼

Yes. It supports plan-driven mode using a CEO plan or design review context, and freeform mode where it asks about purpose, visual feel, and content structure. An approved PNG from /design-shotgun gives the most faithful results.

Where are the generated HTML files saved?â–¼

All design artifacts are saved to ~/.gstack/projects/<project-slug>/designs/<screen-name>-YYYYMMDD/finalized.html. They are treated as user data that persists across branches and sessions, never as project files.

What are the limitations of the generated HTML?â–¼

The output is a static front-end artifact with no backend wiring, form handling, or data fetching. If the vendored Pretext bundle is missing it falls back to a CDN import, and if the design binary is unavailable it skips visual mockup generation.

Related Skills

Explore More Design & Creative Skills→
ScivorScivor

design-html

Convert approved design mockups into responsive Pretext-native HTML/CSS.

Community
Advanced
antonyfmunozantonyfmunoz

saas-dev:orchestrator

Orchestrate a SaaS pipeline from spec to React, backend, migrations, and deployment.

Community
Advanced
prostoali2207-gifprostoali2207-gif

visual-taste-agent

Directs visual redesign of web pages using typography, color, and composition fundamentals.

Community
Advanced
edisonabeledisonabel

ckm:ui-styling

Create accessible responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced