An AI agent skill that turns a plain text prompt into a functional, low-fidelity, hand-drawn web prototype. Think Balsamiq — but generated instantly from a description, right inside your project.
Prototypes are clickable SPAs with a sketchbook aesthetic: dotted backgrounds, wobbly hand-drawn borders, sketchy UI components, and doodle icons. No graphic design required — the focus is on layout, content, and flow.
Works with any AI coding assistant: Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini, and others.
Click any image to see interactive prototype.
| SaaS Dashboard | Bio | Checkout |
|---|---|---|
 |
 |
 |
npx skills add agilek/wireframer-skillAutomatically installs into the right directory for your agent (Claude Code, Cursor, Windsurf, Copilot, Gemini, and 40+ others).
npx skills update/plugin marketplace add agilek/wireframer-skill
/plugin install wireframes-designer@wireframer-skill
Then invoke it in any project:
/wireframer Build a SaaS dashboard with a sidebar, KPI overview row, and recent activity table.
Copy the contents of SKILL.md into your AI instruction file:
| Tool | File |
|---|---|
| Cursor | .cursorrules |
| Windsurf | .windsurfrules |
| Gemini | gemini.md |
| GitHub Copilot | .github/copilot-instructions.md |
| Any agent | agents.md |
- Wired Elements — all interactive UI (inputs, cards, checkboxes, tabs, toggles, etc.) uses
wired-elementsweb components for a hand-drawn SVG look - Doodle Icons — icons use
react-doodle-icons, a library of 439 hand-drawn icons across 17 categories - Sketchy aesthetics — dotted graph-paper background, irregular borders, Patrick Hand / Caveat / Comic Neue fonts from Google Fonts
- Realistic copy — context-aware body text generated from your description; no lorem ipsum
| Environment | Wired Elements | Icons |
|---|---|---|
| React (≥ 18) | npm package | react-doodle-icons named imports |
| Vue / Svelte / other | npm package | inline SVG |
| Vanilla HTML | CDN (unpkg) |
inline SVG |
For React projects, navigation is handled with useState — no routing library needed.
Invoke the wireframer when you want to:
- Validate a concept before writing any production code
- Communicate layout and flow to stakeholders or teammates without visual polish
- Run a design sprint — generate multiple screen variants quickly and compare
- Prototype a user journey — multi-screen flows with working navigation
- Sketch an MVP — turn a product idea into something clickable in minutes
Trigger phrases: wireframe, mockup, lo-fi prototype, rough layout, sketch the screens, Balsamiq-style, hand-drawn UI, clickable prototype, visualize the flow, show what the app would look like.
Convert the page at https://google.com into a hand-drawn wireframe. Preserve the layout, sections, and content hierarchy but render everything in the sketchy wireframe aesthetic.
I've pasted the HTML of our current homepage below. Re-create it as a low-fidelity wireframe prototype, keeping the same structure and copy but applying the hand-drawn aesthetic.
Wireframe a SaaS analytics dashboard with a collapsible sidebar, KPI cards row, a line chart, and a recent activity table.
Wireframe an admin panel for a multi-tenant SaaS: user management table, role assignment modal, and billing overview.
Wireframe a product detail page with image gallery, size selector, reviews section, and sticky add-to-cart bar.
Wireframe a checkout flow: cart summary, shipping form, payment step, and order confirmation screen.
Wireframe a three-screen mobile onboarding for a fitness tracking app: welcome, goal setup, and notification permissions.
Wireframe a mobile food delivery app: restaurant listing, menu screen, and cart with order summary.
Wireframe a SaaS landing page: hero with CTA, features grid, pricing table with three tiers, and footer.
Wireframe a personal portfolio: hero, about section, project cards grid, skills list, and contact form.
Wireframe a project management tool with a kanban board, task detail slide-over panel, and team members sidebar.
Wireframe an email client: folder list sidebar, message list, and reading pane with reply box.
Wireframe a social feed with stories row, post cards, comment thread, and a floating compose button.
Wireframe a community forum: category list, thread listing, and a post detail page with nested replies.
Wireframe a multi-step signup wizard for a B2B tool: account details, team invite, workspace setup, and done screen.
Wireframe a settings page with tabs for Profile, Notifications, Security, and Billing.
- Strict grayscale — black, white, and grays only
- Primary buttons: dark fill (
#333) with white text; secondary: white fill with dark sketchy border - All containers have a solid white background so the graph-paper pattern never bleeds through content
- No emoji — icons use
react-doodle-iconsor inline SVG only - Sketchy border trick:
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px - Graph-paper background:
radial-gradient(#d7d7d7 1px, transparent 1px) - On first run, context rules are written to the project's AI instruction file (
agents.md,.cursorrules, etc.) so the aesthetic persists across sessions
MIT