skills.rest
jonkiky
jonkikyCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generate responsive HTML and CSS from design mockups or descriptions.

Updated Apr 2, 2026
Search Tags:#html#layout#css#responsive#design-to-code#design-engineering#pretext
One-click install
npx skills add https://github.com/jonkiky/ccdi-federation-ai --skill design-html-jonkiky
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/jonkiky/ccdi-federation-ai/tree/main/.agents/design-html
Command: npx skills add https://github.com/jonkiky/ccdi-federation-ai --skill design-html-jonkiky

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts design intent into production-quality HTML and CSS, eliminating manual handoffs and guesswork.

Core Features & Use Cases

  • Generate responsive, layout-aware HTML/CSS from approved design mockups or descriptions.
  • Integrate with design-review workflows and planning context to keep pages aligned with goals.
  • Produce deterministic output with minimal dependencies for reliable production builds.

Quick Start

Provide a design description or mockup and ask the engine to generate production-ready HTML/CSS.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert an approved design mockup into production-ready HTML and CSS?▼

Converting design mockups into production-ready HTML and CSS requires generating responsive, reflowing layouts with zero external dependencies. Provide an approved mockup to generate deterministic output that eliminates manual handoffs and guesswork.

Can I generate responsive HTML and CSS from a text description without a mockup?▼

Generating responsive HTML and CSS from a text description is possible by providing your design intent from scratch. The engine processes user descriptions to produce layout-aware, production-quality code with deterministic output and minimal dependencies.

Does this HTML and CSS generation approach integrate with design review workflows?▼

HTML and CSS generation integrates with design review workflows by accepting inputs from approved CEO plans, design review context, and mockup contexts. This keeps generated pages aligned with planning goals throughout the production build process.

What is the best way to ensure my generated HTML has zero external dependencies?▼

Ensuring generated HTML has zero external dependencies involves using a deterministic generation engine that produces self-contained CSS. This approach guarantees reliable production builds by eliminating reliance on external frameworks or libraries.

Does the generated HTML and CSS support responsive layout reflowing?▼

Generated HTML and CSS supports responsive layout reflowing by producing layout-aware code that adapts to different screen sizes. The deterministic output ensures responsive behavior without requiring external CSS frameworks or JavaScript libraries.

Can I use this to generate HTML from CEO plan reviews and design review contexts?▼

Generating HTML from CEO plan reviews and design review contexts is fully supported as an input method. The engine accepts these planning contexts alongside mockups to produce aligned, production-quality HTML and CSS with Pretext routing.

Related Skills

Explore More Design & Creative Skills→
GrassHopper42GrassHopper42

design-html

Convert design mockups into HTML/CSS with dynamic layouts and text reflow.

Community
Advanced
sajalsuhanesajalsuhane

design-html

Convert approved AI mockups into Pretext-native HTML/CSS with dynamic layouts.

Community
Advanced
petrkindlmannpetrkindlmann
64

qa-project-context

Create a QA context file at .agents/qa-project-context.md.

Community
Advanced
kunalrawat425kunalrawat425

design-html

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

Community
Advanced