The Bubble Design System Skill is a free agent skill that reads a LumiDevKit export of your Bubble app and writes a complete design system from it: an interactive HTML presentation you can browse, and a markdown document carrying the metadata an AI agent needs to generate new Bubble UI that matches your app. It runs in Claude Code, Codex, Gemini CLI, Qwen Code or any agent that loads SKILL.md skills. We use it on our own Bubble apps every day.
The problem it solves
Every Bubble app over a certain size has the same problem. The design lives in hundreds of styles, conditionals and one-off tweaks that nobody ever wrote down. The style palette says one thing, the pages say another, and the developer who set it up two years ago is the only person who knows why the primary button has three variants.
When you want AI to generate UI for that app, it has nothing to work from. Ask an agent to "build a popup that matches our app" and you get a generic popup with a guessed palette. The agent can't see your app.
This skill gives it ground truth.
What it produces
Two files, from one export.
An interactive HTML design system. Open it in any browser: colour swatches with their values, typography specimens, spacing scales, border radii, shadows, breakpoints, the popups your app uses, and every style in use with its hover, focus and disabled states. Click a token to copy it. It's the page you'd hand a new designer, generated in minutes.
A companion markdown document with element generation metadata. The same design system as text, enriched with what the export knows about your app's internals: the style registry (every style with its raw Bubble properties), the semantic style map (which style plays which role: primary button, card, input), the recurring component patterns, and the common workflow templates. That metadata is what lets an agent produce valid, paste-ready Bubble elements instead of guesses.
The HTML is generated first, so you review and approve it before the markdown is written from the same data.
What you need
- An AI coding agent that loads skills in the SKILL.md format: Claude Code, Codex, Gemini CLI, Qwen Code or similar. The skill is a plain folder; nothing in it is tied to one vendor.
- A free LumiDevKit account, to export your app's styling data. The export gives three files: markdown (palette, typography, spacing, borders, shadows, popups, breakpoints, styles with interactive states, responsive overrides, transitions), JSON (the structured registry) and CSS (the resolved variables).
- Optional: screenshots of your app's real screens, in a folder. With them, the component demos use your actual proportions and content patterns instead of placeholders.
How to install
The easiest way: let the agent do it. Drop the zip anywhere in your working folder, point your agent at it and say "install this skill so I can use it". It unpacks the folder into the right skills directory for the agent you're running and tells you when it's there. That works for any skill in the SKILL.md format, not only this one.
If you'd rather do it by hand:
- Download the zip and extract it. One folder inside,
bubble-design-system, holding a SKILL.md, a references file and a changelog. The version is on the second line of SKILL.md, so you can always tell what you are running. - Drop the folder into your agent's skills directory:
- Claude Code:
~/.claude/skills/for every project, or<your-repo>/.claude/skills/for one - Codex:
~/.agents/skills/for every project, or<your-repo>/.agents/skills/for one - Other agents: the skills folder named in their documentation
- Claude Code:
- Start a new session. The skill registers automatically, and your agent picks it up whenever you mention a design system, a LumiDevKit export, or Bubble styling.
How to use it
Export your app from LumiDevKit (markdown + JSON + CSS) into a folder, open your agent, and ask:
"Create a design system from my LumiDevKit export in ./exports"
The skill walks the export, extracts the tokens and patterns, asks for the app name only if the export doesn't carry it, writes the HTML, waits for your review, then writes the markdown. From there, every "build me a popup that matches our app" request has real ground truth behind it.
What to do with the output
- Generate UI that matches. Keep the markdown in the repo your agent works in, and generated elements come out in your palette, type and spacing. With LumiDevKit's paste tool, they drop straight into the Bubble editor.
- Onboard a developer or a designer. The HTML page answers the questions that used to take a screen-share: which blue, which radius, which style for a secondary action.
- Audit your own consistency. The style registry shows every style in use. Seeing fourteen button styles on one page is usually the moment a cleanup gets scheduled.
- Brief anyone outside Bubble. A marketing site, an email template, a pitch deck: the tokens are the same, and now they're written down.
Limits, honestly
- It documents what your app does, not what it should do. Fourteen button styles come out as fourteen button styles. The cleanup is still yours.
- It needs the LumiDevKit export. Reading a raw Bubble app export is a different skill, and a much larger one.
- Your agent reads the export and sends what it reads to its model provider, as with any file you open in an agent session. Treat a client's export the way you treat their other files.
- Version 1.0.1, built and tested on our own production Bubble app. Very large apps may take a few minutes and more than one agent turn.