Generates HTML mockups from blueprint screen definitions for design review.
npx skills add https://github.com/virajp/ai-plugins --skill mockups-virajp
Please help me install this Agent Skill. Skill: mockups Source: https://github.com/virajp/ai-plugins/tree/main/plugins/vwf/skills/mockups Command: npx skills add https://github.com/virajp/ai-plugins --skill mockups-virajp
This Skill solves the gap between product blueprint specifications and visual review by turning defined screens and states into consistent, reviewable mockups without treating visuals as the source of truth.
Use the mockups skill to generate reviewable HTML mockups for the checkout flow screens from the current blueprint.
High-intent search queries and answers about installing and using this skill.
You can generate HTML mockups by converting product blueprint screen definitions and state variants into self-contained HTML. This process applies design-system tokens to ensure the visual output aligns with your documented product specifications.
A blueprint screen rendering workflow transforms product blueprint screen definitions into reviewable visual mockups. It generates self-contained HTML representations of defined user flows and state variants for design validation without treating visuals as the source of truth.
Yes, you need documented design-system tokens and contracts to create UI mockups from blueprints. Applying these design system tokens ensures the generated screen rendering remains visually consistent with the established product blueprint.
Design system tokens apply to generated mockups by enforcing documented visual contracts during the screen rendering process. This alignment ensures the HTML output accurately reflects the product blueprint's defined states and UI components.
Yes, you can push generated mockups to a canvas for design review. The workflow supports controlled synchronization to push self-contained HTML mockups into a design-system project while preserving blueprint ownership of product decisions.
You should avoid using ephemeral mockups for design validation when you need the visual output itself to serve as the permanent source of truth. This workflow intentionally preserves blueprint ownership, meaning the generated HTML mockups are temporary review artifacts.
jwmyersDefine color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.
TaylorHustonGenerate HTML UI design variants stored in ideas/[project]/docs/ui-designs/.
virajpDefine product design system contracts for semantic tokens, typography, spacing, motion, and accessibility.
heximaoGenerate disposable HTML mockups with interactive variants for design exploration.
