Prompt your way to CoreUI
Agent Skills are curated instruction sets that your AI tool follows to build faithful UI with the CoreUI Figma Kit — either as a Figma design or as CoreUI code — and to hand a Figma design off to a developer without rework.
They work in Claude Code, Cursor, Codex and OpenCode — but not by the same mechanism. Claude Code and OpenCode load them from a skills directory. Cursor and Codex have no skills directory, so the package ships an AGENTS.md router that points the agent at the right instruction set. Both routes are in the archive.
For designers and developers who use the kit.
Seven skills, two paths:
-
In Figma — assemble screens from the kit's real components, then convert them to code.
-
In code — build pages directly from CoreUI's coded (Pro) components, tokenised and light/dark ready.
Requires the CoreUI Figma Kit and its fileKey (for the Figma path), and a CoreUI Pro license (for the code path — most of the kit's components are Pro).
The skills at a glance
coreui-figma-setup
Connect the kit — wire up the Figma MCP (Path A) or install the CoreUI Pro components (Path B).
coreui-figma-select
Decide which kit component and variant fits a piece of UI. Used by both paths.
coreui-figma-design
Build screens in Figma from the kit's components and variables, verified in light and dark.
coreui-figma-to-code
Convert an existing Figma design into CoreUI code, reading component identity — not Dev Mode's generated CSS.
coreui-figma-page
Build pages directly in code from CoreUI's components (HTML/CSS, React, Vue, Angular).
coreui-figma-import-tokens
Pull the kit's 1066 design variables (colours, radii, fonts, spacing, light/dark) into your project.
coreui-figma-brand
Apply your brand to the kit as a new theme by repointing tokens — no per-component edits.
Requirements
-
An AI coding tool: Claude Code or OpenCode (they load skills directly), or Cursor or Codex (they use the included AGENTS.md router).
-
The remote Figma MCP server, plus Figma's own figma-use and figma-design-to-code skills. Both are hard prerequisites, not suggestions — skipping them is the documented cause of most hard-to-debug failures.
-
The CoreUI Figma Kit, and its fileKey from the file's URL (for the Figma path).
-
A CoreUI Pro license (for the code path). Many of the kit's components — Smart Table, Range Slider, Multi Select, Date/Time pickers, Stepper, Rating, OTP, Password, Calendar — are CoreUI Pro. Get your npm token from your CoreUI account.
Installation
Step 1 — Install the skills
Download the skills bundle and unzip the skills into your tool's skills directory.
Claude Code
# unzip every skill into your user skills folder for z in install/coreui-figma-*.zip; do unzip -oq "$z" -d ~/.claude/skills/; done
OpenCode reads that same directory through its Claude Code compatibility layer.
Cursor and Codex have no skills directory — the command above would do nothing there. Copy the coreui-figma-skills/ folder into your project and paste AGENTS-router.md into your AGENTS.md. That block tells the agent which instruction set to read for which request; at about 3 KB it barely touches Codex's 32 KiB project-doc budget.
Cursor alternative: save the same block as .cursor/rules/coreui-figma.mdc. The .mdc extension is required — a plain .md in .cursor/rules is silently ignored.
Each skill is self-contained: it bundles its references and any code, so it works installed on its own.
Start a fresh session — skills are discovered at startup — then verify a skill is discovered and move on.
Step 2 — Connect the Figma MCP (Path A — design in Figma)
Connect the remote Figma MCP server in your editor and install Figma's figma-use and figma-design-to-code skills. Then copy your kit's fileKey out of its URL and pin it.
the URL
figma.com/design/:fileKey/CoreUI-DesignSystem-for-Figma-v2.0?node-id=2657-10794 ^^^^^^^^ ^^^^^^^^^ fileKey nodeId → "2657:10794" (colon, not hyphen)
Pin one fileKey and record it. Design kits get duplicated — a working copy, a delivered copy, a client copy — and a Figma copy preserves node ids. Different files return byte-identical page ids, collection names and variant counts, so you cannot tell copies apart by content, and a write to the wrong one is silent. The coreui-figma-setup skill walks you through this and gives you a one-call check that confirms you're in the kit.
Step 3 — Install the CoreUI Pro components (Path B — build in code)
CoreUI Pro is a licensed, private registry. Add your token, then install the flavour your project uses.
.npmrc
@coreui:registry=https://registry.npmjs.coreui.io/ //registry.npmjs.coreui.io/:_authToken=${CUI_TOKEN}
terminal
# keep the token in your environment / CI secrets — never commit it export CUI_TOKEN=your_coreui_pro_token npm i @coreui/coreui-pro # or @coreui/react-pro / vue-pro / angular-pro
Then run coreui-figma-import-tokens so your code uses the kit's variables instead of hardcoded values.
Design in Figma
coreui-figma-design
Assembles a screen inside Figma from the kit's real component instances, bound to the kit's variables, and verifies it in light and dark. This is the reference workflow for the Figma path.
/coreui-figma-design build a login screen in Figma with the CoreUI kit
It instances real components rather than redrawing them, sets properties with their full keys, reaches sizes through the kit's modes rather than hunting for a variant that doesn't exist, and screenshots the result in both themes before calling it done.
coreui-figma-to-code
Converts a design you already built with the kit into CoreUI / Bootstrap-5 code. It reads each element's component identity and variant properties from the Figma file — it never traces Dev Mode's generated CSS — so the output uses real classes, not brittle positioned <div>s.
/coreui-figma-to-code turn this Figma screen into React with the CoreUI kit
Point it at the frame or selection you want to convert. It also reads the modes in force up the parent chain, so a section set to Small or Dark converts correctly instead of silently reverting to defaults. Emitted CoreUI Pro components carry their real props; a short note flags anything to confirm against your installed Pro version.
Build in code
coreui-figma-page
Builds a page or section directly in code from CoreUI's real components — HTML/CSS, React, Vue, or Angular — tokenised and responsive. Because it's real code with real components, it doubles as a developer handoff.
/coreui-figma-page build a dashboard in React with the CoreUI kit
Choosing components
coreui-figma-select
Decides which kit component and variant fits a given piece of interface, with matching rules and common screen recipes, so the agent reaches for a real kit component instead of inventing one. Used by both paths.
/coreui-figma-select what should I use for a filter bar with the CoreUI kit?
Theming
coreui-figma-import-tokens
A one-time job: pull the kit's variables — colours, radii, fonts, spacing, sizing, and the light/dark modes — into your project as CSS custom properties (or your framework's theme config), so code matches the design.
It emits two layers: the kit's own names, exactly as Figma Dev Mode shows them to a designer, plus a --cui-* bridge so CoreUI's own stylesheet restyles. A designer reading Dev Mode and a developer reading the stylesheet then see the same token, and no hex is written twice.
/coreui-figma-import-tokens import the CoreUI kit tokens into my project
coreui-figma-brand
Applies your brand to the kit as a new theme by repointing the brand tokens — every component adopts it at once, with a contrast check on the primary colour. Works in Figma or in the imported code tokens.
/coreui-figma-brand apply our brand colors to the CoreUI kit
How to prompt
Name the kit — and say Figma
Say “…in Figma with the CoreUI kit”. The skills are kit-specific, so naming both the kit and the tool routes you correctly every time. Omit them and a generic design skill — or Figma's own stock skills — legitimately competes.
Three skills, one word apart
design builds in Figma · page builds in code from scratch · to-code converts an existing Figma design to code. Name the destination and the right one fires.
Slash or natural
Trigger a skill explicitly with /coreui-figma-design …, or just describe the task naturally and the agent picks the skill.
Using more than one kit
Skills are namespaced by tool. This set is coreui-figma-*; the CoreUI Penpot kit ships coreui-kit-*. Both install side by side — say “in Figma” and the right set responds.
This was measured, not assumed: on a blind routing test with the seven skills, the CoreUI Penpot set, and six realistic distractors all in one catalogue, prompts that named the kit routed 25 out of 25. Prompts that named nothing produced clarifying questions, never a silent misroute.
Troubleshooting
The wrong skill (or none) fires
Name the kit and the tool in the prompt. If it still misroutes, trigger it explicitly with its /coreui-figma-… slash command.
Edits land in the wrong Figma file
You are almost certainly in a copy. Copies keep the same node ids, so they look identical from the inside — pin the fileKey and check it before every write. coreui-figma-setup covers this.
The agent says a component doesn't exist
Two false negatives are common. search_design_system only covers published libraries, so it returns nothing for a kit that isn't published; and a page walk misses components that live on no page at all. The skills know to walk the file instead — if you're driving the MCP by hand, don't conclude anything is missing from a search alone.
“You've reached the Figma MCP tool call limit”
Figma meters MCP calls per plan, and the quota follows the file. Read the kit once and let the skill cache what it read, rather than re-walking it.
A Pro component won't install
Confirm your CoreUI Pro token and the .npmrc registry line; the token is a license secret — keep it in your environment, not the repo.