design-html

Convert design mockups or plans into Pretext-native HTML pages with dynamic height calculations.

5|Updated Apr 24, 2026

Search Tags:#design #html #frontend #design-system #tokenization #design-mockups #pretext

Ready to run

npx skills add https://github.com/timurgaleev/vibestack --skill design-html-timurgaleev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/timurgaleev/vibestack/tree/main/skills/design-html
Command: npx skills add https://github.com/timurgaleev/vibestack --skill design-html-timurgaleev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization and conversion of design concepts into production-ready Pretext-native HTML/CSS, ensuring dynamic height calculation, responsive layouts, and faithful representation of approved mockups or plans.

Core Features & Use Cases

Produces production-quality Pretext-native HTML/CSS from approved mockups (/design-shotgun) or planning context (/plan-ceo-review, /plan-design-review), or from user-provided descriptions.
Implements dynamic layout with measured heights, responsive behavior, and accessible markup; supports both vanilla HTML and framework outputs; handles design tokens and tokens override via DESIGN.md.
Facilitates token-driven design and easy handoff to development; suitable for design finalization, rapid prototyping, and design-system validation.

Quick Start

Provide an approved mockup or plan and run the design-html skill to generate a production-ready Pretext HTML page.

Frequently Asked Questions about design-html

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

FAQPage Schema

How do I convert design mockups into production-ready HTML?▼

You convert design mockups into production HTML by supplying approved mockups or freeform descriptions to generate a Pretext-native page featuring dynamic height calculations, responsive breakpoints, and accessible markup scaffolding.

What is design tokenization and how does it apply to HTML generation?▼

Design tokenization extracts styling variables from a DESIGN.md file and applies them as token-driven overrides during HTML generation, ensuring consistent design-system validation and easy handoff to development.

Can I generate HTML from CEO plans or freeform descriptions instead of visual mockups?▼

Yes, you can generate HTML from CEO plans or freeform descriptions. The tool processes plan-driven and scratch-based scenarios to produce production-ready HTML without requiring formal visual mockups.

Does the generated HTML support frontend frameworks or only vanilla HTML?▼

The generated HTML supports both vanilla HTML and framework outputs, allowing you to choose between inlining or CDN-based Pretext integration depending on your frontend architecture.

How do I handle responsive layouts and dynamic height calculations in converted designs?▼

Responsive layouts and dynamic height calculations are handled automatically during conversion, applying measured heights and editable content with live reflow to ensure accurate representation across breakpoints.

What are the limitations of using Pretext-native HTML for design finalization?▼

Pretext-native HTML for design finalization relies on the Pretext framework for dynamic reflow and token overrides, meaning outputs are tightly coupled to this system rather than producing standalone static HTML files.