mockups

Generates HTML mockups from blueprint screen definitions for design review.

1|Updated May 26, 2026

Search Tags:#html #design system #blueprint #ui design #mockups #screen rendering

Ready to run

npx skills add https://github.com/virajp/ai-plugins --skill mockups-virajp

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Blueprint Screen Rendering: Generates self-contained HTML mockups for screens and pinned state variants defined in product flows.
Design System Alignment: Applies documented design-system tokens and contracts to keep visual output consistent with the product blueprint.
Canvas Review Workflow: Pushes generated mockups to a Claude design-system project for review while preserving blueprint ownership of product decisions.

Quick Start

Use the mockups skill to generate reviewable HTML mockups for the checkout flow screens from the current blueprint.

Frequently Asked Questions about mockups

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

FAQPage Schema

How do I generate HTML mockups from a product blueprint?▼

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.

What is a blueprint screen rendering workflow?▼

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.

Do I need a design system to create UI mockups from blueprints?▼

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.

How do design system tokens apply to generated mockups?▼

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.

Can I push generated mockups to a canvas for design review?▼

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.

When should I avoid using ephemeral mockups for design validation?▼

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.