Docusignprotolab — zsh — 80×24
click to skip

What is ProtoLab?

ProtoLab gives AI code editors like Claude Code and GitHub Copilot knowledge of DocuSign's design system — 63 components, from buttons to full page layouts. Describe what you want, and it builds it with the right components, tokens, and composition patterns.

01
You describe what you need
"Build me an agreements list page with search, filters, and a data table."
02
Your code editor knows the system
It picks the right components, sets the correct props, applies design tokens, and follows Docusignlayout patterns.
03
You get working code
A runnable React project in seconds — not a mockup, not a wireframe. Real code with real components.

Get started

Check the prerequisites, download the starter kit, and start prompting.

0

Before you start

You need these three things installed. If you already have them, skip to the next step.

✓
VS Code
Free code editor — you won't write code, but the AI runs inside it.
Download VS Code →
✓
Claude Code extension
The AI that builds your prototypes. Install it from the VS Code marketplace.
Install Claude Code →
✓
Node.js
Runs the prototype locally on your computer. Grab the LTS version.
Download Node.js →
tipDon't worry about Git or GitHub yet — you only need those when you want to share your prototype with the team. We'll cover that later.
1

Download the Starter Kit

A complete project with all 63 Ink components pre-installed. The AI connection is already configured — just open it and start prompting.

a
b
Install & run
npm install && npm run dev
c
Prompt your editor
Open the project in your AI code editor and try:
Try this prompt in your AI code editor
"Build me an agreements list page with a data table, search bar,
filters, and status badges. Use DocuSignShell with GlobalNav
and LocalNav."

Example Prompts

Try these after downloading or connecting. Click to copy.

Share with your team

Once you've built something, share it with a live preview URL. Your team can browse, fork, and build on each other's prototypes.

01
Deploy your prototype
Type /deploy in Claude Code. It pushes your work to a live Vercel URL you can share with anyone.
02
Browse the gallery
Every deployed prototype appears in the gallery at /prototypes. See what others have built, filter by author or page type.
03
Fork and iterate
See a prototype you like? Type /fork to create your own copy and start building on it. No starting from scratch.
noteDeploying requires Git and a GitHub account. If you haven't set that up, Claude Code will walk you through it when you type /deploy.

Commands you can use

Type these in Claude Code to trigger workflows. They're built-in skills that handle the hard parts for you.

/deployPush your prototype to a shareable Vercel preview URL.
/forkCopy someone else's prototype and build on top of it.
/handoffGenerate a HANDOFF.md for engineers with component inventory and migration guide.
/updateCheck if your design system components are up to date and refresh them.
/onboardVerify your setup is correct — checks dependencies, MCP connection, and dev server.

Add to an existing project

Already have a project? Add this config file to connect your editor to ProtoLab's component intelligence — search, validation, and scaffolding.Skip this if you downloaded the starter kit — it's already configured.

# .mcp.json
{
  "mcpServers": {
    "ink-design-system": {
      "url": "https://protolab-mcp.vercel.app/api/mcp"
    }
  }
}

Paste this into the config file, restart your editor, and you're connected.