skills.rest
kunalrawat425
kunalrawat425COMMUNITY
Explore all skills by this author →
GitHub

design-html

Generate production HTML/CSS from approved design mockups and planning context.

Updated Apr 4, 2026
Search Tags:#html#production#frontend#css#mockups#design-html
One-click install
npx skills add https://github.com/kunalrawat425/conductor-playground --skill design-html-kunalrawat425
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/kunalrawat425/conductor-playground/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/kunalrawat425/conductor-playground --skill design-html-kunalrawat425

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

Core Features & Use Cases

  • Production-ready HTML/CSS generation from mockups or descriptions.
  • Dynamic layout computations and responsive behavior with zero external dependencies.
  • Proactive routing suggestions and design-state awareness within gstack.

Quick Start

Describe your final design or provide mockups and tell me to finalize the HTML.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I turn mockups into production HTML and CSS?▼

Convert mockups into production HTML/CSS by providing approved visual designs or a user briefing to automate code generation. The output features zero external dependencies, dynamic height computation, and responsive layouts, ensuring text reflows correctly without bloated libraries.

Can I generate responsive HTML from a design briefing without external dependencies?▼

Yes, you can generate responsive HTML from a design briefing without external dependencies. The system enforces zero-dependency architecture and computes dynamic layouts, meaning text reflows naturally and page heights adjust correctly without needing CSS frameworks.

What is the best way to finalize a design into a live web page?▼

The best way to finalize a design into a live web page is using automated generation from approved mockups or planning context. This ensures production-quality code with smart API routing that selects the correct Pretext patterns for each design type, resulting in a live, responsive page.

Does this HTML generation process work with planning and design review context?▼

Yes, this HTML generation process works with planning and design review context. It accepts inputs from approved mockups, CEO plan reviews, and design review contexts, using that state awareness to proactively route to the correct patterns for finalizing the design.

Why does generated CSS need dynamic height computation for mockups?▼

Generated CSS needs dynamic height computation for mockups to ensure that layouts remain fluid and text reflows correctly across different screen sizes. This approach prevents fixed-height issues, maintaining production-quality responsive behavior without relying on external layout libraries.

Related Skills

Explore More Design & Creative Skills→
jonkikyjonkiky

design-html

Generate responsive HTML and CSS from design mockups or descriptions.

Community
Advanced
arbisoftarbisoft
4

frontend-slides

Convert PowerPoint decks or topic outlines into interactive HTML slides.

Official
Intermediate
martin-hsu-testmartin-hsu-test
1

design-html

Generate production-ready HTML/CSS from approved design mockups and plans.

Community
Advanced
chrislemachrislema
8

build-ui

Design and implement responsive UI components with vanilla HTML5, CSS, and JavaScript.

Community
Advanced