storybook-kit

A Storybook for your design system that looks like a designer made it.

storybook-kit is a pre-styled Storybook template, a getting-started guide, and a set of agent skills. Together they take you from a Figma file to a documented component library you can share as a link. The kit is for designers who build with an AI agent (Claude Code or Cursor) and would rather not learn how Storybook works inside.

How it works

1. Build. Give your agent a Figma frame. It builds the component in code, using color and type tokens that match your Figma variables.
2. Document. Each component gets a docs page with a live example, usage guidelines, do's and don'ts shown side by side, and accessibility notes. You write the guidance in plain words, and your agent lays it out.
3. Share. Publish the Storybook as a website and send the link to your team. Designers and developers read the same pages.

Status: early. The shell is in template/ and the guide is in docs/getting-started.md. The skills come next; see plans/001-brief.md.

What is in it

• The shell. A Storybook with a calm interface: a clean sidebar, light and dark themes, and docs pages for anatomy, usage and do's and don'ts. You set the name, logo, fonts and sidebar colors in one file.
• The guide. Every step from an empty laptop to a running Storybook, written for people who have never opened a terminal.
• The skills (coming next). Instructions your agent follows to set up the kit, pull tokens from Figma variables, turn a Figma frame into a documented component, and publish the result as a link.

Credits

The shell comes from fibo.

storybook-kit is an independent template built on Storybook. The Storybook team did not make it and is not affiliated with it.

License

MIT

Getting started

What you'll build

Your Storybook is where your design system lives in code. Once it's running, you work in two steps:

• Build components. Give your agent a Figma frame, and it builds the component using your colors and type.
• Write their docs pages. Each component has a page with a live example, usage guidelines, do's and don'ts, and accessibility notes. You decide what the guidance says, and your agent lays it out.

Steps 1 to 5 get Storybook running. Steps 6 and 7 bring in your brand, step 8 covers building and documenting components, and step 9 shares the result.

1. Install Node.js

Node.js is the program that runs Storybook on your computer. You install it once and then forget about it.

1. Go to nodejs.org and download the LTS version (24 at the time of writing).
2. Open the file you downloaded and click through the installer, keeping the default options.

To check that it worked, open a terminal:

• On a Mac, press Cmd+Space, type Terminal, and press Return.
• On Windows, open the Start menu, type PowerShell, and press Enter.

Type this and press Return (Enter on Windows):

node -v

You should see a version number that starts with v24. If the terminal says it can't find node, close it, open a new one, and try again. A terminal that was already open when you ran the installer can't see Node.js.

2. Install an agent

An agent is an AI assistant that can read and change the files in your project. You'll use one to set up the kit and add to it. Pick one:

• Cursor is a code editor with an agent built in. Start here if you prefer windows and buttons.
• Claude Code runs in the terminal you just opened.

Both work with everything in this guide.

3. Get the kit

1. Go to github.com/toribryan/storybook-kit.
2. Click the green Code button, then Download ZIP.
3. Unzip it. Inside you'll find a folder called template.
4. Move template to wherever you keep your projects and rename it after your design system, for example acme-design-system.

That folder is your project from now on. You can delete the rest of the download.

4. Open the project

In Cursor, choose File, then Open Folder, and pick your project folder. Then open the built-in terminal with View, then Terminal.

In a regular terminal, type cd followed by a space, drag your project folder onto the terminal window, and press Return. The terminal is now "inside" your project, and the commands you type apply to it.

5. Start Storybook

Type these two commands, pressing Return after each one:

npm install
npm run storybook

The first command downloads everything the kit depends on. It takes a minute or two and prints a lot of text; that's normal. The second starts Storybook and opens it in your browser. If no tab opens, go to localhost:6006 yourself.

Storybook runs for as long as the terminal stays open. To stop it, click in the terminal and press Ctrl+C (on a Mac too, not Cmd).

6. Make it yours

Open brand.config.ts in your project folder. This one file sets your Storybook's name, logo, fonts and frame colors, and a note beside each setting explains what it does.

• name appears at the top of the sidebar and in the browser tab.
• logo is an image you put in the public folder, written as "/logo.svg". Leave it empty to show the name as text instead. If your logo needs a different version on dark backgrounds, put it in logoDark.
• fonts takes the names of your fonts and a Google Fonts link that loads them. On fonts.google.com, pick your fonts, click Get embed code, and copy the web address from the href part of the link.
• chrome sets the colors of the frame around your components, meaning the sidebar and toolbar, once for light mode and once for dark.
• links takes the web addresses of your Figma file and GitHub project. Each one adds a card to the bottom of every docs page. Leave a link empty to hide its card.

Save the file. The docs pages update straight away. The sidebar and toolbar only change when Storybook starts, so press Ctrl+C in the terminal and run npm run storybook again.

7. Add your colors

Your components take their colors from src/styles/globals.css. Each color there is a token: a named value such as --primary or --border. The block that starts with :root sets each token for light mode, and the block that starts with .dark sets it for dark mode. Change a value and every component that uses the token follows. The Colors page in Storybook reads this file directly, so it always shows your current values.

Name your tokens after your Figma variables. Then designers reading Figma and developers reading the code use the same words for the same thing.

8. Build and document a component

Each component is three files in src/components. Button is there as an example:

To add your own, give your agent the link to the Figma frame and say which component it is. For example: "Add a Badge component from this Figma frame, with stories and a docs page like Button's."

Then write its docs page. Open Button's docs page in Storybook to see the sections: usage, guidelines, do's and don'ts, and accessibility. Tell your agent what belongs in each, in your own words, for example: "In the Badge guidelines, say to keep labels to one or two words. For a do and don't, show a short label next to one that wraps." Your agent turns that into the page, with the real component in each example.

9. Share it

When you want other people to see your Storybook, run:

npm run build

This command makes a folder called storybook-static in your project, which holds a complete website. To put it online, sign in to a free Vercel account, go to Vercel Drop, and drag the folder onto the page. You get a link you can send to anyone.

If something goes wrong

If the terminal says it can't find npm ("command not found" on a Mac, "not recognized" on Windows), either Node.js isn't installed or the terminal was open before you installed it. Open a new terminal and try again.

If Storybook says port 6006 is in use, it's already running somewhere, probably in another terminal window. Close that window, or use the browser tab that's already open.

If you changed brand.config.ts and the sidebar looks the same, stop Storybook with Ctrl+C and start it again with npm run storybook.

If a page shows a red error box, copy the whole message and paste it to your agent. It can read the error and fix the file that caused it.

001: Brief

What

A public repo with three parts:

1. The shell, a Storybook template styled for designers.
2. The guide, a getting-started walkthrough that assumes no development experience.
3. The skills, agent instructions that set the kit up and fill it from Figma.

Why

Storybook's default interface is built for engineers. Designers who now build components with an agent end up with a component library that works but looks like a developer tool, and paid documentation tools (zeroheight, Supernova) document pictures of components, not the components themselves.

fibo's Storybook already solves the look. This project extracts that shell, makes it configurable, and wraps it in skills so the agent does the setup.

Who

A designer with a Figma file, Claude Code or Cursor, and little development experience. The agent is their interface: they will ask it to "set up a Storybook from my Figma file", not run commands themselves.

The shell

Taken from fibo's apps/storybook/.storybook and src/blocks:

Stays in fibo: the welcome page, hero, pixel grid, sounds and the snail.

New for the kit:

• brand.config.ts: name, logo, fonts, accent. The only file a designer edits.
• Foundations pages (color, type, spacing, radius) that render from the token CSS, so they update when tokens change.
• Page templates: Welcome, Getting started, Changelog.

The skills

Version 1

The shell, the guide, and three skills: setup, sync-tokens, add-component.

Done when a designer who has never used Storybook goes from nothing to one Figma component documented in the kit, without help, in about ten minutes. Watch one do it; where they stall is version 2.

Decisions

• One stack: React, Vite, Tailwind CSS 4, Storybook 10. Supporting every framework conflicts with "minimal development knowledge". The shell's chrome is framework-agnostic, so a later skill could restyle an existing Storybook.
• Storybook pinned exactly. The sidebar styling targets Storybook's internal class names and IDs. The upgrade skill is how version bumps happen.
• Skills in .agents/skills/, linked from .claude/skills/, written without tool-specific instructions so Claude Code and Cursor can both run them.
• Separate repo, not a fibo package. fibo stays a design system; this is a tool for making one.

Open questions

• How Cursor discovers skills in a project, and whether it needs its own link alongside .claude/skills/. Verify before writing the first skill.
• Distribution: a GitHub template repo, npm create storybook-kit (the name is free on npm), or both.
• Component base: Base UI like fibo, or plain components with no primitives library.
• License. MIT is the default for this kind of project.
• Whether "storybook-kit" reads as an official Storybook product. Storybook's name is theirs; the README should say this is an independent project.

MIT License

Copyright (c) 2026 Tori Bryan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.