skills.rest
forbotsake
forbotsakeOFFICIAL
Explore all skills by this author →
GitHub

design-html

Generate production-quality HTML/CSS from approved mockups or design briefs.

5|1|Updated Apr 5, 2026
Search Tags:#design#html#production#layout#frontend#responsive#pretext
One-click install
npx skills add https://github.com/forbotsake/forbotsake --skill design-html-forbotsake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/forbotsake/forbotsake/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/forbotsake/forbotsake --skill design-html-forbotsake

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-to-HTML handoffs are error-prone and slow; this skill automates generating production-quality HTML/CSS from approved mockups or design briefs, reducing rework and speeding shipping.

Core Features & Use Cases

  • Produce production-quality HTML/CSS from design mockups (design-shotgun) or CEO plans (plan-ceo-review) and design reviews (plan-design-review).
  • Compute responsive layouts and text reflow, ensuring content fits across devices without manual tweaking.
  • Proactively route design decisions to the right Pretext patterns based on the design type and plan readiness.

Quick Start

Turn an approved mockup into production HTML/CSS that matches the provided design brief and plans.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I turn a design mockup into production-ready HTML?▼

To turn a design mockup into production-ready HTML, provide the approved design brief to generate production-quality HTML/CSS. It computes responsive layouts, dynamic text reflow, and smart routing to ensure accurate frontend implementation without dependencies.

What is the best way to generate responsive frontend layouts from a design brief?▼

Generating responsive frontend layouts from a design brief is best handled by automating HTML/CSS production with smart routing to Pretext patterns. This ensures content fits across devices without manual tweaking or external dependencies.

Can I implement HTML from a CEO plan or design review directly?▼

Yes, you can implement HTML directly from a CEO plan or design review. The skill applies plan-ceo-review and plan-design-review contexts to finalize designs and generate matching production-quality HTML/CSS from scratch.

Does this approach to design-to-HTML handoff require any external dependencies?▼

No, this approach to design-to-HTML handoff requires zero dependencies. It independently computes heights, dynamic layouts, and text reflow to reduce rework and speed up shipping production-ready HTML/CSS.

Why does my generated HTML layout break during text reflow?▼

Generated HTML layouts break during text reflow when static heights are used instead of computed values. The skill prevents this by proactively computing responsive layouts and dynamic text reflow based on the specific design type.

Related Skills

Explore More Design & Creative Skills→
jonkikyjonkiky

design-html

Generate responsive HTML and CSS from design mockups or descriptions.

Community
Advanced
a29paula29paul
1

design-html

Generate Pretext-native HTML/CSS layouts with dynamic text reflow from mockups or descriptions.

Community
Advanced
cegit27cegit27
3

design-html

Convert design mockups into Pretext-native HTML with computed layouts and dynamic text reflow.

Official
Advanced
ShmurdocShmurdoc

design-html

Convert approved design mockups into Pretext-native HTML/CSS with zero dependencies.

Community
Advanced