skills.rest
astroville
astrovilleOFFICIAL
Explore all skills by this author →
GitHub

html-mockup-generation

Generates self-contained HTML mockups with inline CSS, JavaScript, and realistic placeholder data.

Updated Apr 20, 2026
Search Tags:#html#css#spec#prototype#ui design#generate#mockup
One-click install
npx skills add https://github.com/astroville/sprout --skill html-mockup-generation-astroville
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-mockup-generation
Source: https://github.com/astroville/sprout/tree/main/.claude/skills/html-mockup-generation
Command: npx skills add https://github.com/astroville/sprout --skill html-mockup-generation-astroville

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams need quick, professional-looking UI prototypes for discussion and iteration without setting up build tools, frameworks, or external assets. This Skill produces single-file HTML mockups that open directly in a browser and are easy to iterate on. ## Core Features & Use Cases - Self-Contained Mockups: Generates single HTML files with all CSS and JavaScript inlined, no CDN links or external resources. - Built-In Design System: Provides default CSS variables, typography, spacing, and component styles for buttons, cards, tables, forms, and badges. - Spec Write-Back: Links generated mockups back into the originating feature or bug spec under a Mockups section, with iteration semantics for updates. - Use Case: A product manager asks for a dashboard mockup for a new feature spec; the Skill writes .hero/mocks/{slug}/index.html with realistic data and appends a dated entry to the spec's Mockups section. ## Quick Start Ask the agent to generate an HTML mockup for a feature spec slug, for example: create a mockup for the dashboard-redesign spec.

Frequently Asked Questions about html-mockup-generation

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

FAQPage Schema
How do I generate an HTML mockup for a feature spec?▼

Invoke the mockup workflow with a spec slug; the Skill writes a self-contained index.html under .hero/mocks/{slug}/ and appends a dated entry to the spec's Mockups section. Free-text requests save under .hero/mocks/_adhoc/ instead.

What makes a good self-contained HTML prototype?▼

A good prototype inlines all CSS and JavaScript in one file, uses a consistent design system of color variables and spacing, and includes realistic placeholder data. It avoids CDN links, icon fonts, and complex animations.

Can HTML mockups use external CSS frameworks or CDN links?▼

No. This Skill explicitly forbids CDN links and external resources so mockups work offline as single files. All styles come from the built-in CSS design system with variables for colors, typography, and spacing.

How does mockup iteration work with spec write-back?▼

On iteration, the existing spec entry is matched by path and its date updated in place rather than duplicated. If the iteration produces a new file such as a dense variant, a new entry is appended to the Mockups section.

When should I use HTML mockups instead of SwiftUI previews?▼

HTML rendering is selected when no Swift signals are detected, when the renderer is explicitly set to html, or when swiftc is unavailable as a fallback. The selection is made by the detect CLI, not the agent.

Related Skills

Explore More Design & Creative Skills→
Lia-CreativeLia-Creative
1

hifi-design

Produces high-fidelity screens on the design system as handoff-ready .dc.html artefacts.

Official
Intermediate
binan-makerbinan-maker

mockup-graduate

Graduate approved mockups into production-ready code aligned with host app architecture.

Community
Advanced
engmiguelamaral-pngengmiguelamaral-png

screenshot-to-code

Convert UI screenshots into runnable HTML, CSS, React, or Vue code.

Community
Advanced
EmasoftEmasoft
1

figma-to-swiftui

Translate Figma design files into native SwiftUI code via Figma MCP.

Community
Advanced