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

Ready to run

npx skills add https://github.com/westn/gstack-pi-port --skill design-html-westn

💬 Prompt for ChatGPT / Claude Chat▼

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.