design-html

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/bananaduck1/storylab --skill design-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/bananaduck1/storylab/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/bananaduck1/storylab --skill design-html

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts approved design mockups into production-ready Pretext-native HTML/CSS. Text reflows, computed heights, and dynamic layouts are generated with minimal overhead and zero dependencies.

Core Features & Use Cases

  • Design finalization: takes an approved AI mockup from /design-shotgun and generates production-quality HTML/CSS.
  • Responsive, text-aware layouts: ensures content reflows correctly across breakpoints.
  • Smart API routing: selects appropriate design patterns for each type of mockup.

Quick Start

Run the design-html skill to generate a production HTML/CSS file from an approved mockup in /design-shotgun.

Frequently Asked Questions about design-html

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

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

You can convert approved AI design mockups into production-ready HTML and CSS by running the design-html skill, which translates mockups into responsive, text-aware layouts with zero dependencies.

What is the best way to generate responsive frontend layouts from AI mockups?▼

The best way to generate responsive frontend layouts from AI mockups is using automated HTML generation via the Pretext engine, ensuring content reflows correctly across breakpoints.

Can I use design-html to create dynamic web layouts without external dependencies?▼

Yes, you can use design-html to create dynamic web layouts without external dependencies, as it generates production-quality HTML and CSS with minimal overhead and zero dependencies.

Does design-html work with mockups generated from design-shotgun?▼

Yes, design-html works directly with approved AI mockups from design-shotgun, taking the finalized design and converting it into Pretext-native HTML and CSS code.

How does automated HTML generation handle text reflow and computed heights?▼

Automated HTML generation handles text reflow and computed heights by applying smart API routing and frontmatter metadata to select appropriate design patterns for each mockup type.

When should I not use automated design-to-code translation for frontend workflows?▼

You should not use automated design-to-code translation for frontend workflows when your project requires frameworks outside the Pretext engine or relies on external CSS dependencies.