design-html

Convert design mockups into Pretext-native HTML and CSS.

9|3|Updated Jan 29, 2022
One-click install
npx skills add https://github.com/I194/PMTools_2.0 --skill design-html-i194
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/I194/PMTools_2.0/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/I194/PMTools_2.0 --skill design-html-i194

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization often stalls at the handoff from design to development. This Skill automates the conversion of approved mockups and planning context into production-quality Pretext-native HTML and CSS, reducing rework and accelerating shipping frontend features.

Core Features & Use Cases

  • Produces production-quality HTML/CSS from approved designs or from scratch based on user descriptions.
  • Computes dynamic layouts, reflows text, and adjusts heights to fit content for responsive frontend pages.
  • Works with design context from /design-shotgun, /plan-ceo-review, /plan-design-review, or from scratch with a user description; uses smart API routing to select the right Pretext patterns per design type.
  • Proactively suggests when a design or plan is ready for finalization and supports voice triggers like “build the design” or “make it real.”
  • Designed with a small footprint (around 30KB overhead) and zero external dependencies beyond the Pretext stack.

Quick Start

Produce production-ready HTML/CSS from an approved design brief using the Pretext HTML engine.

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 HTML and CSS?

To turn approved designs into working frontend pages, this Skill automates conversion into production-ready HTML and CSS. It processes design briefs, computes dynamic layouts, and reflows text using a zero-dependency Pretext-based generation pipeline.

Can I generate responsive frontend code from a design brief without external dependencies?

Yes, you can generate responsive frontend code from a design brief without external dependencies. The Skill uses a Pretext-based HTML generation pipeline with a small footprint of around 30KB overhead, requiring zero external libraries beyond the Pretext stack.

What is the best way to finalize UI pages from approved designs or CEO plans?

The best way to finalize UI pages from approved designs or CEO plans is to apply an automated HTML generation pipeline. This Skill processes planning context to compute dynamic layouts, adjust heights, and output production-quality Pretext-native HTML and CSS.

Does the HTML generation pipeline support dynamic layout computation and text reflow?

Yes, the HTML generation pipeline supports dynamic layout computation and text reflow. It automatically adjusts heights to fit content, ensuring the generated HTML and CSS create responsive frontend pages from approved mockups or user descriptions.

How do I trigger the conversion of a design mockup into a working frontend?

You trigger the conversion of a design mockup into a working frontend using voice triggers like “build the design” or “make it real.” The Skill proactively suggests finalization when it detects a design or plan is ready.