skills.rest
tgmarinho
tgmarinhoCOMMUNITY
Explore all skills by this author →
Website𝕏@tgmarinhoGitHub

design-html

Generates production-quality HTML and CSS from approved design mockups or plans.

Updated May 15, 2026
Search Tags:#html#layout#frontend#css#gstack#design finalization#mockup to code
One-click install
npx skills add https://github.com/tgmarinho/canetaco --skill design-html-tgmarinho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/tgmarinho/canetaco/tree/main/.claude/skills/design-html
Command: npx skills add https://github.com/tgmarinho/canetaco --skill design-html-tgmarinho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into working front-end code is slow and error-prone when done by hand. This Skill converts design decisions into final HTML/CSS where text reflows naturally, heights are computed, and layouts stay dynamic instead of fixed-pixel. ## Core Features & Use Cases - Design finalization: Takes approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, or design review context and produces production-quality Pretext-native HTML/CSS. - From-scratch builds: Works directly from a plain user description when no prior design artifact exists. - Smart API routing: Picks the right layout patterns for each design type with roughly 30KB overhead and zero dependencies. - Use Case: After approving a landing page mockup in a planning session, invoke this Skill to get the final responsive page implemented as real HTML/CSS rather than a static screenshot. ## Quick Start Ask the assistant to finalize the approved mockup into production HTML and CSS using the design-html skill.

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 HTML and CSS?▼

Invoke the design-html skill after approving a mockup from /design-shotgun or a plan from /plan-ceo-review. It reads the approved design context and generates final HTML/CSS with dynamic layouts, computed heights, and reflowing text.

Can I generate a web page from scratch without a mockup?▼

Yes. The skill accepts a plain user description when no prior design artifact exists. Describe the page you want and it selects appropriate layout patterns to produce the HTML/CSS output.

Does design-html require external libraries or frameworks?▼

No. The generated output is Pretext-native HTML/CSS with zero dependencies and roughly 30KB overhead. It routes to the right patterns per design type rather than relying on a CSS framework.

When should I use design-html versus a design review skill?▼

Use design review skills like /plan-design-review to evaluate and approve a design first. Use design-html afterward to implement the approved design as final code, since it consumes review context rather than producing critiques.

Why does the skill run a long preamble script before generating code?▼

The preamble is gstack session machinery: it checks for updates, loads project learnings, logs telemetry if enabled, and restores recent artifacts. It configures context for the session and does not affect the generated HTML/CSS output.

Related Skills

Explore More Design & Creative Skills→
FaeifFaeif

design-html

Convert approved design mockups into responsive HTML and CSS.

Community
Advanced
xotongxotong

design-html

Generate production-ready HTML and CSS from mockups, plans, or descriptions.

Community
Advanced
andersoncollabandersoncollab

visual-audit

Evaluate website visual quality across seven dimensions using DFII scoring.

Community
Intermediate
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic