Convert approved AI mockups into Pretext-native HTML and CSS.
npx skills add https://github.com/jayzalowitz/skytwin --skill design-html-jayzalowitz
Please help me install this Agent Skill. Skill: design-html Source: https://github.com/jayzalowitz/skytwin/tree/main/.claude/skills/gstack/design-html Command: npx skills add https://github.com/jayzalowitz/skytwin --skill design-html-jayzalowitz
Approving a design is not enough if it can't be turned into working front-end code. This skill translates approved AI mockups into production-quality Pretext-native HTML/CSS, ensuring fidelity and responsiveness across devices.
Run the design-html workflow to convert the approved mockup into a standalone HTML file.
High-intent search queries and answers about installing and using this skill.
To convert approved mockups into production-ready HTML, this skill processes designs from the /design-shotgun directory and generates standalone HTML and CSS files. It uses design-type aware routing to select appropriate Pretext patterns for each layout.
Pretext-native HTML is output generated using the Pretext engine and design tokens from DESIGN.md. It ensures responsive behavior across devices by applying design-type aware routing to select the correct Pretext layout patterns for the generated CSS.
Yes, you need the Pretext engine and tokens from DESIGN.md to generate HTML. The skill enforces branding tokens and fonts during generation, relying on these prerequisites to ensure design fidelity in the final output.
Vendor inlining is applied automatically when available, with a CDN fallback used when it is not. This ensures the generated production-ready HTML maintains necessary external dependencies without manual configuration.
Automating frontend code generation from AI mockups is handled by running the design-html workflow on approved designs in /design-shotgun. It routes designs through Pretext patterns to output standalone, production-ready HTML and CSS files.
Design-type aware routing is needed to select the right Pretext patterns for each specific layout. It ensures the generated HTML accurately matches the original approved mockup and maintains proper responsive behavior across different device sizes.
marcusgollExtract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.
samjhechtGenerates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.
scanbottGenerates Pretext-native HTML and CSS from approved mockups or design briefs.
reomgitConvert design mockups into HTML/CSS code using Pretext patterns.
