skills.rest
zhu637882-stack
zhu637882-stackCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generate production HTML/CSS from mockups and planning documents.

1|Updated Apr 6, 2026
Search Tags:#design#html#production#frontend#css#pretext
One-click install
npx skills add https://github.com/zhu637882-stack/jiaoyi --skill design-html-zhu637882-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/zhu637882-stack/jiaoyi/tree/main/qoder-config-backup/skills/gstack-design-html
Command: npx skills add https://github.com/zhu637882-stack/jiaoyi --skill design-html-zhu637882-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-html streamlines final HTML/CSS production, reducing back-and-forth and delivering production-ready results.

Core Features & Use Cases

  • Produce production-quality HTML/CSS from approved mockups or user descriptions.
  • Context-aware design finalization from /design-shotgun, /plan-ceo-review, /plan-design-review, or from scratch with a user brief.
  • Deterministic routing to Pretext patterns to ensure consistent output across teams.
  • Real-world example: given a brand mockup, generate clean, responsive HTML/CSS ready for deployment.

Quick Start

Provide an approved mockup and run the skill to generate production 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 generate production-ready HTML/CSS from a mockup?▼

You can generate production HTML/CSS by providing an approved mockup or user description. The skill automates final frontend production by routing to Pretext patterns, ensuring deterministic, deployment-ready code output without manual back-and-forth.

What is the best way to turn approved design planning documents into frontend code?▼

The best way to turn design planning documents into frontend code is using context-aware automation. This skill finalizes designs sourced from planning reviews, routing them through Pretext patterns to deliver clean, responsive HTML/CSS ready for deployment.

Can I use design-html to build responsive HTML from a brief with no existing mockup?▼

Yes, you can build responsive HTML from a brief with no existing mockup. The skill accepts designs from scratch using a user description, automatically generating production-quality HTML/CSS by applying consistent Pretext routing patterns.

How does deterministic Pretext routing ensure consistent HTML/CSS output?▼

Deterministic Pretext routing ensures consistent HTML/CSS output by applying standardized patterns to every mockup or user brief. This mechanism removes manual guesswork, streamlining final frontend production and delivering predictable, deployment-ready code.

Do I need an approved mockup to generate production HTML/CSS, or can I start from scratch?▼

You do not need an approved mockup to generate production HTML/CSS; you can start from scratch with a user description. The skill processes both approved mockups and raw briefs, routing them to Pretext patterns for final frontend code generation.

Related Skills

Explore More Design & Creative Skills→
kinetaskinetas

design-html

Convert approved design mockups into responsive HTML/CSS with Pretext.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

design-html

Convert approved UI mockups into Pretext-native HTML and CSS.

Community
Advanced
smarmen86smarmen86

design-html

Generate HTML and CSS code from design mockups and architectural plans.

Community
Intermediate