prototype

Builds UI prototypes as Storybook explorations through a six-phase benchmark and evaluation workflow.

5|9|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/ajenchen/design-system --skill prototype-ajenchen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/ajenchen/design-system/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/ajenchen/design-system --skill prototype-ajenchen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing UI features by gut instinct leads to inconsistent patterns, design system drift, and stakeholder misalignment. This Skill enforces a structured UX workflow that benchmarks world-class products, evaluates candidates against your design system and business needs, and produces comparable Storybook prototypes before any commitment. ## Core Features & Use Cases - Six-phase workflow: Clarify requirements, benchmark 5+ world-class references (Linear, Stripe, Notion, etc.), score candidates on a 4-axis evaluation matrix, build an OOUX Object Map, design 2-3 shortlisted candidates as interactive Storybook stories, and self-audit across 6 quality dimensions before stakeholder review. - OOUX/ORCA object modeling: Defines core objects, relationships, CTAs per role, and attributes shared across all candidates so stakeholder comparison focuses on UI shape rather than data model debates. - Design system governance: Enforces consume-before-invent rules, token hygiene, and explicit flagging of any new component needs, preventing exploration code from polluting the production design system. - Use Case: When asked to "prototype a bulk filter feature", the Skill scans how Linear, Stripe, and Notion solve filtering, scores each approach on DS consistency, business fit, and complexity, then builds three interactive Storybook candidates for stakeholders to compare and decide. ## Quick Start Ask the AI to prototype a specific feature, for example: "做一個 bulk action 的 prototype" or "prototype a notification settings flow".

Frequently Asked Questions about prototype

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

FAQPage Schema
How do I prototype a UI feature with multiple design candidates?

Invoke the prototype workflow with an explicit request like "做 prototype" or "build an MVP". The Skill clarifies requirements, benchmarks 5+ world-class references, scores candidates on a 4-axis matrix, then builds 2-3 shortlisted options as interactive Storybook stories.

What is OOUX and how does it apply to UI prototyping?

OOUX (Object-Oriented UX) is Sophia Prater's methodology of defining core objects, relationships, CTAs, and attributes before designing UI. The Skill builds a shared Object Map in Phase 3.0 so all candidates differ only in UI shape, not data model definitions.

When should I not use the prototype workflow?

Skip it for single confirmed features (implement directly), single pattern questions (answer directly), product delivery handoffs, or design system audits. It is designed only for explicit prototype, MVP, or 原型 requests with multiple viable directions.

Can prototype explorations add new components to the design system?

Not directly. New component needs must be explicitly flagged in notes.md and decided at Checkpoint 3. Explorations consume existing design system components first; promotion to the official Components directory only happens after stakeholder adoption.

Why does the prototype workflow require benchmarking before designing?

Benchmarking 5+ world-class references prevents designing by gut instinct and surfaces industry-consensus object models versus product-specific patterns. Skipping or shallow benchmarking (only 3 similar design systems) is a documented failure mode.