skills.rest
westn
westnCOMMUNITY
Explore all skills by this author →
𝕏@westnGitHub

design-html

Generate production HTML/CSS from design mocks and planning context.

1|Updated Mar 15, 2026
Search Tags:#layout#responsive-design#design-tokens#html-generation#design-html#pretext
One-click install
npx skills add https://github.com/westn/gstack-pi-port --skill design-html-westn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/westn/gstack-pi-port/tree/main/port/gstack/design-html
Command: npx skills add https://github.com/westn/gstack-pi-port --skill design-html-westn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Produces production-quality HTML/CSS from design inputs and planning context, ensuring layouts match approved mocks and render reliably across devices.

Core Features & Use Cases

  • Generate production HTML/CSS from design mocks, CEO plans, or design-review notes.
  • Compute layouts with Pretext, ensuring text reflows, dynamic heights, and responsive behavior.
  • Integrate with planning skills to maintain design tokens and brand constraints across outputs.
  • Minimal dependencies and deterministic outputs for smooth handoffs to engineering.

Quick Start

Feed an approved mockup or CEO plan and run the design-html workflow to generate the final HTML

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

Generate production-ready HTML by feeding approved mockups into the workflow, which computes layouts using the Pretext engine to ensure text reflows, dynamic heights, and responsive behavior across devices.

Can I convert CEO planning documents into responsive HTML layouts?▼

Yes, you can convert CEO plans into responsive HTML layouts by inputting the planning context into the workflow, which enforces design tokens and layout constraints to produce deterministic outputs for engineering handoffs.

What is the best way to enforce design tokens when building HTML from design inputs?▼

Enforce design tokens during HTML generation by integrating with planning skills that maintain brand constraints, ensuring the final output strictly adheres to approved design tokens and layout constraints.

How does the Pretext rendering engine handle responsive behavior?▼

The Pretext rendering engine handles responsive behavior by computing layouts that ensure text reflows correctly and dynamic heights adjust reliably, maintaining parity with approved mocks across different devices.

Do I need any dependencies to ensure layout parity with approved mocks?▼

No external dependencies are required to ensure layout parity with approved mocks; the workflow uses the Pretext rendering engine and provided binaries to produce deterministic, production-quality HTML outputs.

When should I use design-html for finalizing web pages?▼

Use design-html for finalizing web pages when you need to rebuild pages from CEO plans, integrate design-review notes, or achieve reliable rendering across devices with minimal dependencies and deterministic outputs.

Related Skills

Explore More Design & Creative Skills→
GrassHopper42GrassHopper42

design-html

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

Community
Advanced
dpalferydpalfery

delegate-frontend

Delegate React, CSS, and HTML tasks to the react-dev agent.

Community
Basic
landim32landim32
1

ckm:brand

Extract brand data from guidelines and generate design tokens for consistent branding.

Community
Advanced
sajalsuhanesajalsuhane

design-html

Convert approved AI mockups into Pretext-native HTML/CSS with dynamic layouts.

Community
Advanced