skills.rest
LeroyAdonis
LeroyAdonisCOMMUNITY
Explore all skills by this author →
GitHub

prototype

Generates plan-first static HTML and CSS mockups sharing one theme of CSS variables.

Updated Mar 2, 2026
Search Tags:#theme#prototype#ui design#css variables#static pages#html mockups#look and feel
One-click install
npx skills add https://github.com/LeroyAdonis/kitfix-2.0 --skill prototype-leroyadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/LeroyAdonis/kitfix-2.0/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/LeroyAdonis/kitfix-2.0 --skill prototype-leroyadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams often start building UI features before agreeing on the look and feel, leading to rework and inconsistent styling. This Skill locks the visual direction first by producing throwaway HTML/CSS mockups and a single durable theme.css file of CSS variables that later ports into the real app's stylesheet. ## Core Features & Use Cases - Plan-first workflow: Reads the project overview for stated look and feel, asks targeted questions about vibe, color, type, and pages, then proposes a plan and waits for approval before writing any files. - Shared theme variables: Writes a single prototypes/theme.css defining surfaces, text, accent, fonts, and scale as CSS variables, so every mockup stays consistent and the theme ports directly into the app's @theme block. - Realistic screen mockups: Generates self-contained plain HTML pages per approved screen with believable content and real UI states, no frameworks or build steps. - Use Case: Before building the first UI feature of a dashboard app, run /prototype to mock the dashboard, settings, and detail pages, iterate on the dark theme in a browser, then hand the approved theme.css to the first /feature build. ## Quick Start Ask the AI to run /prototype and mock up the key screens of your project with a dark minimal theme before building the first UI feature.

Frequently Asked Questions about prototype

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

FAQPage Schema
How do I prototype a website's look and feel before building it?▼

Run the prototype skill, which asks about your desired vibe, colors, fonts, and pages, proposes a plan, and only after approval writes static HTML mockups plus a shared theme.css. Open the files in a browser to iterate on the look.

What is the best way to keep CSS mockups visually consistent?▼

Define every color, font, and spacing value as CSS variables in a single theme.css file and link it from each mockup page. Changing one variable restyles all screens at once, which is how this skill structures its output.

Can I use these HTML prototypes in my production app?▼

No, the HTML mockups are throwaway reference material and get discarded at the first UI feature's completion. The durable output is theme.css, whose variables port into the real app's globals.css @theme block.

Do the prototype mockups require a framework or build step?▼

No, the mockups are plain self-contained HTML and CSS with no framework and no build step. A few lines of inline JavaScript for a view toggle is acceptable, but nothing more.

When should I run the prototype step in a spec-driven workflow?▼

Run it after the project overview exists but before the first UI feature build. It sits between planning and the feature loop, locking the look so the first feature can port the theme into real styles.

Related Skills

Explore More Design & Creative Skills→
HDeiblerHDeibler
6

prototyping-when-and-what

Determine prototype scope, fidelity, and stopping criteria for design planning.

Community
Intermediate
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
panaminipanamini

pi-design-deck

Build visual decision decks comparing implementation options with rendered previews.

Community
Basic
DeiblerDeibler
8

iteration-prototype-fidelity

Selects the appropriate prototype fidelity for each iteration and research question.

Community
Intermediate