Help us improve
Share bugs, ideas, or general feedback.
From devstefancho-skills
Generates standalone HTML prototypes from saved UI brainstorm ideas. Creates deliberately designed previews with a single standout visual moment, design briefs for complex requests, and variant support.
npx claudepluginhub devstefancho/skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/devstefancho-skills:ui-prototype-previewgeneral-purposeThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Turn a saved `brain-storm/` idea into a self-contained HTML prototype. Run after `brain-storm` when a UI-focused idea needs a stronger visual artifact before specification or implementation. **The result must look deliberately designed — never a generic AI dashboard.**
Creates high-fidelity HTML design artifacts including prototypes, slide decks, landing pages, UI mockups, and animations. Uses Playwright for browser rendering and screenshot verification.
Generates live HTML/CSS visual direction proposals on scaffolded project dev server for side-by-side comparison and iterative refinement to select final UI design.
Builds polished visual web artifacts: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations using HTML/CSS/JavaScript/React. Best for browser-rendered front-end deliverables, not back-end or non-visual tasks.
Share bugs, ideas, or general feedback.
Turn a saved brain-storm/ idea into a self-contained HTML prototype. Run after brain-storm when a UI-focused idea needs a stronger visual artifact before specification or implementation. The result must look deliberately designed — never a generic AI dashboard.
brain-storm/previews/{idea-name}.html; variants to brain-storm/previews/{idea-name}-{variant-slug}.html. Save design briefs to brain-storm/design/{idea-name}-design.md unless the user gives another path. Lowercase-with-hyphens; create directories as needed.<style>, no build step, semantic structure, accessible text labels.Use a DESIGN.md-style brief whenever the request includes any of: 2+ variants, exact brand colors or theme tokens, font/typography preferences, a design system or UI kit influence, explicit forbidden aesthetics, device/layout preferences (mobile-first, landing-page-first, dashboard-first), or reference links/screenshots/brand keywords. Simple requests may skip the brief — but constraint-heavy requests get a brief, not an overloaded prompt.
brain-storm/design/{idea-name}-design.md → other brain-storm/design/**/*.md.templates/design-brief-template.md, fill it with defaults derived from the idea, save it to brain-storm/design/{idea-name}-design.md, tell the user, and continue — unless they asked to review the brief first. A filled sample: examples/running-portfolio-design.sample.md.Glob brain-storm/**/*.md; if no file was specified or the match is ambiguous, ask which idea to use.Write a concise internal brief from the brainstorm file plus any resolved DESIGN.md: primary user goal, key sections and layout hierarchy, core interactions, states worth showing, aesthetic direction, visual system choices, memorable moment, variant strategy, and unresolved assumptions to call out.
Define all four pillars in design-standard.md — product context, named aesthetic direction, visual system, memorable moment — before writing HTML.
editorial-dark, premium-athlete, race-console.templates/prototype-template.html and replace its {{...}} placeholders with a concept-specific implementation — see the placeholder reference in design-standard.md.If multiple answers are no, revise before returning.
Return the report from report-format.md in the final response.
WRONG: Inter + generic SaaS card layout by default; safe purple-blue gradients without product justification; evenly spaced identical cards with no hierarchy; placeholder UI with no point of view; decorative effects unrelated to the product story.
RIGHT: one named, bold aesthetic direction with one signature move.
If your first instinct looks interchangeable with a random startup admin dashboard, stop and choose a stronger direction. Full detail in design-standard.md.