For Designers & AI Tools
Wireframe Kit & Getting Started
Everything you need to start building prototypes with Claude, Cursor, or ChatGPT. Download the kit, copy a prompt, and start creating.
Quick Start
1
Download & Extract
Download the wireframe kit zip and extract it to your projects folder.
2
Install & Run
npm install && npm run devOpen localhost:3000 to see the experiment index.
3
Prompt Claude
Tell Claude: "Use the wireframe kit to build [your idea]" — copy prompts below for inspiration.
What's Inside
Wireframe Primitives
Simple, grayscale components designed for rapid prototyping:
ButtonCardInputDivider
Example Experiments
Reference patterns you can study and extend:
- • agentic-hero — Agent status, incident response
- • ca-books — List view with detail panel
- • ca-bookbuilder — Editor with smart assists
Design Principles
Grayscale Only
No brand colors — forces focus on UX
Self-Contained
No external dependencies beyond React/Next
Local Mock Data
Everything defined inline in each file
Simple State
useState only, no complex hooks
Example Prompts for Claude
Copy these prompts to quickly create new experiments with AI tools.
Create a new list view
Create a new experiment in wireframe-kit/app/experiments/approvals/page.tsx. Show a list of pending approvals with: requester name, request type, date, status. Include a search input and status filter tabs. Clicking a row opens a right-side detail panel. Use the existing Card, Button, Input, Divider primitives. Keep it grayscale, single file, local mock data (10–15 items).
Add an assist nudge pattern
In the approvals experiment, add a contextual nudge that appears after the user views 3+ items. The nudge should say "You're reviewing manually — want me to surface the highest-risk items first?" Clicking the nudge opens a right-side assist panel with suggested actions. Use useState for all interactivity. No animation libraries.
Create a settings page
Create wireframe-kit/app/experiments/settings/page.tsx. Show a form with sections: General, Notifications, Security. Each section is a Card with form fields (Input, toggles, dropdowns). Include a "Save changes" button that shows a success message. Keep styling minimal and grayscale.
Create a modal flow
Add a "Create new book" flow to the ca-books experiment. Clicking "Create book" opens a modal with steps: 1. Enter book name and meeting date 2. Select organization from dropdown 3. Confirm and create Use useState for step tracking. Close modal on completion or backdrop click. Keep it in the same file unless a component is truly reusable.