A shared prototyping playground for the n8n design team. One Next.js app where every designer gets their own namespace — all prototypes live in one place for visibility and code reuse.

Live at: n8n-playground.vercel.app

• Locally + Claude Code → you build and iterate
• GitHub → one branch per prototype, open a PR when ready
• Vercel → every branch gets a live preview URL; main is the published gallery

Each prototype lives in its own branch: {your-name}/{prototype-name}. For example:

giulio/workflow-editor
elisa/onboarding-flow
tom/ai-assistant

When you're happy with your prototype, you open a pull request. Vercel automatically builds a preview URL for every PR — a real, shareable link you can send to stakeholders before merging. Once merged to main, the prototype appears on the public gallery.

The production site at n8n-playground.vercel.app is read-only. You can browse all published prototypes, but you can't create, edit, or star anything there — those actions only work locally (they use dev-only APIs).

This is by design: Vercel is for sharing finished work, not for authoring.

You'll need:

• Node.js 20+
• pnpm: npm install -g pnpm
• Claude Code: npm install -g @anthropic-ai/claude-code
• GitHub CLI: brew install gh (macOS)
• Git access to this repo

git clone https://github.com/gandreini/n8n-playground.git
cd n8n-playground
pnpm install

Copy the example config:

cp claude.local.md.example claude.local.md

Then edit claude.local.md and set your username. Use your first name or GitHub handle (lowercase, no spaces):

# Claude Local Config

username: yourname
prototype-directory: app/prototypes/yourname/

This file is gitignored — it's personal to your machine.

claude

Then in the Claude Code chat:

/create-prototype my-first-prototype

Claude will:

• Ask you what to call it and give you a brief description prompt
• Ask which template to use (blank or n8n-app with sidebar chrome)
• Create a feature branch yourname/my-first-prototype
• Create the files at app/prototypes/yourname/my-first-prototype/
• Tell you the URL to open locally

Run the dev server:

pnpm dev

Open http://localhost:3000 — you'll see the playground homepage with all prototypes. Yours will appear there automatically once the files are in place.

Edit app/prototypes/{yourname}/{prototype-name}/page.tsx and iterate.

When you're ready to share:

/deploy

Claude handles everything: linting, committing, pushing, opening a PR, and giving you a public Vercel preview URL to share with your team.

/select-prototype

This lists your prototypes and handles switching to the right branch.

• Next.js 16 (App Router) + React 19 + TypeScript
• styled-jsx for all our own component styling — scoped CSS co-located with each component
• n8n design tokens as CSS custom properties in app/globals.css
• shadcn/ui — vendored Radix-based component library in components/shadcn/ (hands-off; npx shadcn add ... keeps working)
• Tailwind CSS 4 stays installed to power Shadcn, but our own code does not use Tailwind utility classes
• Zustand for state management
• pnpm as package manager
• Vercel for hosting

app/prototypes/{username}/{prototype-name}/
├── page.tsx        # Your prototype UI
└── metadata.json   # Title, description, author, date

components/
├── n8n/            # Shared n8n chrome (sidebar, panels, modals) — styled-jsx
├── shadcn/         # Vendored shadcn/ui components — do not edit
└── playground/     # Homepage components — styled-jsx

Detailed docs in CLAUDE.md — this is what Claude Code reads for project context.

• Stay in your own directory: app/prototypes/{your-username}/
• Never modify other people's prototypes
• Never modify root-level files without asking
• Each prototype is standalone — no cross-prototype imports
• Work on a feature branch, not main