growthxai

Squeaks — Design skill for Claude Code

Design community

Copy-first Prototyping with Claude.

How to install Squeaks

This entry records only its repository, not the path inside it, so there is no exact command to give. Open growthxai/squeaks and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Squeaks does

Copy-first Prototyping with Claude. Whiteboard sketches can't be clicked, Figma looks finished before the thinking is finished. Vibe-coding skips the thinking entirely.

Alternatives in Design

Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★
Deepen — Spare-budget design pass 1.1k ★

README

Squeaks

Lo-fi prototyping with Claude Code. Describe an idea, get a navigable wireframe.

Why

You don't need Figma to validate an idea. You don't need pixel-perfect designs to test a flow. You need something you can click through and say "yes, this is the right direction" or "no, let's try something else."

Squeaks is a starter kit for building lo-fi, navigable prototypes using Claude Code. Describe what you want — in plain text, ASCII wireframes, or a rough sketch — and Claude turns it into a real page you can click through in your browser. Everything stays black and white, uses a hand-drawn font, and looks intentionally unfinished so nobody mistakes it for a real product.

How it works

Open this project with Claude Code
Describe a screen or paste an ASCII wireframe
Claude creates the page and wires up the route
Click through it in your browser, then iterate

Want to compare two approaches? Ask Claude to create `/v1/dashboard` and `/v2/dashboard` — then click between them.

Getting started

# Clone the starter kit
git clone https://github.com/growthxai/squeaks.git my-prototype
cd my-prototype

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:5173 and start prompting Claude.

Example prompts

**From a description:**

"Create a dashboard page with a sidebar nav, a header showing the project name, and a main area with 4 stat cards and a table of recent activity"

**From an ASCII wireframe:**

> "Build this as a page at /onboarding"
>
> +----------------------------------+
> |  Logo         Step 1 of 3        |
> +----------------------------------+
> |                                  |
> |   What's your company name?      |
> |   [________________________]     |
> |                                  |
> |   How many employees?            |
> |   ( ) 1-10                       |
> |   ( ) 11-50                      |
> |   ( ) 50+