design-html

Translate approved design mockups into responsive HTML and CSS.

Updated Apr 18, 2026

Search Tags:#html #layout #frontend #css #responsive #design-html #pretext

Ready to run

npx skills add https://github.com/algorithmbasics/gstack --skill design-html-algorithmbasics

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

design-html translates approved design mockups and planning context into production-ready HTML and CSS. It computes heights, ensures dynamic reflow, and outputs code that matches the intended layout for various devices with zero dependencies.

Core Features & Use Cases

Production-ready HTML/CSS from approved mockups via /design-shotgun, CEO plans from /plan-ceo-review, or from scratch with a user description.
Dynamic layout: computed heights, responsive behavior, and Pretext-driven patterns that adapt to content.
Design-to-code pipeline: aligns with planning artifacts (/plan-design-review) to preserve design intent during handoff to engineering.

Quick Start

Provide an approved mockup and run the HTML engine to generate production HTML.

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

To convert design mockups into production-ready HTML and CSS, provide an approved mockup to generate deterministic code. It applies Pretext-driven layout patterns and dynamic height calculations to ensure responsive reflow across devices with zero external dependencies.

Can I generate responsive frontend code from a CEO plan or design review?▼

Yes, you can generate responsive frontend code from a CEO plan or design review. By processing inputs like /plan-ceo-review or /plan-design-review, the tool preserves design intent during the handoff to engineering and outputs matching HTML layouts.

What is the best way to calculate dynamic heights for responsive HTML layouts?▼

The best way to calculate dynamic heights for responsive HTML layouts is using Pretext-driven patterns. This approach computes heights automatically and ensures content adapts dynamically, producing deterministic HTML that adheres to responsive design rules.

Does this HTML generation approach require any external frontend dependencies?▼

No, this HTML generation approach requires zero external frontend dependencies. It outputs self-contained, production-grade HTML and CSS that natively adheres to responsive patterns without relying on external frameworks or libraries.

How do I build a design-to-code pipeline that preserves layout intent?▼

Build a design-to-code pipeline that preserves layout intent by aligning with planning artifacts like /plan-design-review. This ensures the computed HTML and CSS match the approved mockups and surface specific layout rules directly within the generated code.