skills.rest
Jesse-L-M
Jesse-L-MCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert approved design mockups into production-ready Pretext HTML/CSS.

Updated Mar 27, 2026
Search Tags:#design#html#frontend#mockup#pretext#design-to-html
One-click install
npx skills add https://github.com/Jesse-L-M/scz-target-engine --skill design-html-jesse-l-m
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Jesse-L-M/scz-target-engine/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/Jesse-L-M/scz-target-engine --skill design-html-jesse-l-m

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-to-HTML handoffs waste time and introduce inconsistencies. This skill automates turning approved UI mockups into production-ready HTML/CSS, reducing manual rewriting and layout drift.

Core Features & Use Cases

  • Production-ready Pretext HTML/CSS generated from an approved mockup.
  • Dynamic layouts computed from content and viewport changes.
  • Deterministic output with optional vendor Pretext bundle or CDN fallback.
  • Use case: when a design team hands off a mockup in /design-shotgun, this workflow streamlines finalization into a single HTML artifact.

Quick Start

Submit an approved mockup in /design-shotgun and run the design-html workflow to output production-ready HTML.

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 design mockups into production-ready HTML?▼

You can convert approved design mockups into production-ready HTML by submitting them to the design-shotgun directory, which automates the generation of final HTML and CSS artifacts using Pretext APIs.

What is the best way to automate design-to-HTML handoffs without layout drift?▼

Automating design-to-HTML handoffs eliminates manual rewriting and layout drift by computing dynamic layouts and typography directly from approved mockups, ensuring deterministic production-ready output.

Do I need specific dependencies to generate Pretext HTML and CSS from mockups?▼

No specific dependencies are required to generate Pretext HTML and CSS, as the workflow supports an optional vendor Pretext bundle or falls back to a CDN for production deployment.

How does the frontend workflow handle responsive behavior for production HTML?▼

The frontend workflow handles responsive behavior for production HTML by using Pretext APIs to compute dynamic layouts that adapt to content and viewport changes automatically.

Can I reuse generated HTML artifacts across different deployment branches?▼

Yes, you can reuse generated HTML artifacts across different branches because the workflow saves the final production-ready HTML output in design artifacts directories for centralized access.

Related Skills

Explore More Design & Creative Skills→
huichenhuichen

design-html

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

Community
Advanced
tyhuffman7tyhuffman7
1

design-html

Convert design specs into responsive HTML and CSS with height-aware layouts.

Community
Advanced
az9713az9713
2

design-html

Convert design mockups into HTML/CSS using Pretext for computed layout.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced