skills.rest
2300031147
2300031147COMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert approved design mocks into production-quality HTML and CSS.

Updated Apr 12, 2026
Search Tags:#html#frontend#css#design-workflow#design-html#pretext
One-click install
npx skills add https://github.com/2300031147/clawopencode --skill design-html-2300031147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/2300031147/clawopencode/tree/main/skills/design-html
Command: npx skills add https://github.com/2300031147/clawopencode --skill design-html-2300031147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often hand off visuals that aren't production-ready, forcing engineers to recreate layouts from scratch. This skill automates the translation of design intent into production-quality HTML and CSS.

Core Features & Use Cases

  • Converts approved designs into semantic, responsive HTML/CSS suitable for production.
  • Integrates design inputs from /design-shotgun, planning contexts from /plan-ceo-review, and /plan-design-review to generate consistent pages.
  • Produces deterministic rendering with zero extra dependencies at runtime.

Quick Start

Run the design-html skill to generate production-ready HTML from an approved design.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert approved designs into production HTML and CSS?▼

To convert approved designs into production HTML and CSS, this skill automates the translation of design intent into semantic, responsive web pages. It processes visual mocks and planning contexts to generate production-ready code without manual recreation.

What is the best way to generate zero-dependency HTML from design mocks?▼

The best way to generate zero-dependency HTML from design mocks is using the Pretext engine, which renders deterministic HTML and CSS. It produces pages with zero external dependencies required at runtime.

Does the HTML generation work with design plans from ceo review contexts?▼

Yes, HTML generation works with CEO plans from /plan-ceo-review, mocks from /design-shotgun, and design context from /plan-design-review. It integrates these inputs to generate consistent, production-quality web pages.

Why do I need to turn design handoffs into production-ready code?▼

You need to turn design handoffs into production-ready code because designers often hand off visuals that aren't production-ready, forcing engineers to recreate layouts from scratch. Automating this translation bridges the design-engineering gap.

Can I use this approach for frontend pages without adding external CSS frameworks?▼

Yes, you can generate frontend pages without external CSS frameworks. The skill produces deterministic HTML and CSS with zero extra dependencies at runtime, ensuring self-contained, production-quality output.

Related Skills

Explore More Design & Creative Skills→
mi179mi179
1

design-html

Convert approved design inputs into production HTML/CSS with Pretext patterns.

Community
Intermediate
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
GTC6244GTC6244

design-html

Translate approved design mocks into production HTML and CSS using Pretext patterns.

Community
Advanced
sjoerdbeentjessjoerdbeentjes

frontend-design

Design production-grade frontend interfaces with accessible, responsive HTML/CSS/JS.

Community
Intermediate