skills.rest
Intension-us
Intension-usOFFICIAL
Explore all skills by this author →
GitHub

design-html

Convert approved AI design mockups into HTML/CSS with computed layouts.

Updated Apr 3, 2026
Search Tags:#html#frontend#css#framework-detection#design-mockups#pretext#design-to-html
One-click install
npx skills add https://github.com/Intension-us/attention-diagnostic --skill design-html-intension-us
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Intension-us/attention-diagnostic/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/Intension-us/attention-diagnostic --skill design-html-intension-us

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transforms approved AI design mockups into production-ready HTML/CSS with accurate layouts, text reflow, and dynamic heights.

Core Features & Use Cases

  • Converts design mockups into production HTML/CSS with computed layouts.
  • Detects front-end framework usage and outputs vanilla HTML or framework-specific components.
  • Stores artifacts in ~/.gstack/projects/$SLUG/designs to persist across sessions.

Quick Start

Generate a production-ready HTML draft from your approved design in the design-shotgun flow.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert design mockups into production-ready HTML?▼

To convert design mockups into production-ready HTML, this skill analyzes approved mockups and computes layouts, text reflow, and dynamic heights to output accurate HTML/CSS. It ensures consistent visuals across devices by transforming the mockup directly.

Can I generate framework-specific HTML components from a design mockup?▼

Yes, you can generate framework-specific HTML components from a design mockup. The skill detects front-end framework usage and uses Pretext APIs to output either vanilla HTML or framework-specific components based on the detected framework.

Does the design-to-HTML conversion process persist generated artifacts across sessions?▼

Yes, the design-to-HTML conversion persists artifacts across sessions. It stores all generated HTML and design artifacts in the ~/.gstack/projects/$SLUG/designs directory, enabling automated design evolution and consistent state recovery.

What is the best way to automate design evolution for frontend layouts?▼

The best way to automate design evolution is by enforcing design-artifact persistence and routing decisions during mockup conversion. This approach computes dynamic heights and layouts, ensuring consistent visual output across devices for future iterations.

How do I fix dynamic height and text reflow issues when converting mockups to HTML?▼

To fix dynamic height and text reflow issues during mockup conversion, the skill computes accurate layouts directly from the approved design. It transforms the visual mockup into production HTML/CSS while enforcing routing decisions for consistent visuals.

Related Skills

Explore More Software Engineering Skills→
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced
raybargasraybargas

Frontend Responsive

Implement responsive frontend layouts using HTML, CSS, and JavaScript across breakpoints.

Community
Basic
huichenhuichen

design-html

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

Community
Advanced
systempromptiosystempromptio
2

frontend-coding-standards

Enforce vanilla JS, semantic HTML, and token-based CSS standards for UI components.

Official
Intermediate