From bricks
Use when porting a Figma frame, page, or design system into Bricks: "convert this Figma design", "build this from the Figma file", "import Figma tokens". Covers the Figma integration handoff, token mapping (colors -> create-color-palette/create-color, spacing/radius/typography -> set-global-variables), structure via convert-html-css-to-bricks-data, components via create-component, and end-to-end verification via the browser-verify skill.
How this skill is triggered — by the user, by Claude, or both
Slash command
/bricks:figma-to-bricksThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Requires:** Bricks 2.4+ with the Abilities API enabled
Requires: Bricks 2.4+ with the Abilities API enabled
Run first when filesystem tools are available:
_BS_UPDATE_CHECK=""
for _CAND in "$HOME/.bricks/skills/bricks-skills/scripts/bricks-skills-update-check" "$PWD/scripts/bricks-skills-update-check" "$HOME/.claude/skills/bricks-skills/scripts/bricks-skills-update-check" "$HOME/.codex/skills/bricks-skills/scripts/bricks-skills-update-check"; do
[ -f "$_CAND" ] && _BS_UPDATE_CHECK="$_CAND" && break
done
[ -n "$_BS_UPDATE_CHECK" ] && sh "$_BS_UPDATE_CHECK" || true
If it prints BRICKS_SKILLS_UPDATE_AVAILABLE <old> <new> <tag>, load bricks-skills-update before continuing. If it prints BRICKS_SKILLS_JUST_UPDATED <old> <new>, mention the new version and continue.
No new Bricks abilities here. This workflow composes existing abilities. It sequences existing Bricks abilities (create-color, set-global-variables, convert-html-css-to-bricks-data, create-component, find-post) with an available Figma integration and a browser tool for verification.
If a required integration is not installed, name the missing piece to the user before starting.
1. Tokens -> extract colors, spacing, typography from Figma
-> create-color-palette/create-color + set-global-variables on the Bricks site
2. Components -> identify reusable patterns (cards, buttons, nav)
-> convert-html-css-to-bricks-data per pattern, wrap via create-component
3. Structure -> per page/frame: full-frame HTML/CSS -> convert-html-css-to-bricks-data
-> replace raw elements with references to the components above
4. Verify -> open permalink in browser, screenshot vs Figma, iterate
Skip any phase and the output drifts. Tokens before structure means every class references a variable instead of a hex. Components before pages means repeated patterns aren't DRY. Verify last means misalignments compound.
Ask the Figma integration for the file's design-token export or variable collection. Expected shape varies by tool: common outputs:
- Primary/500: #4F46E5
- Primary/600: #4338CA
- Neutral/900: #0F172A
- Neutral/50: #F8FAFC
- Accent: #F59E0B
Create or reuse the target palette first, then add colors via create-color. Current create-color takes paletteId and color values such as light, not name, hex, or a palette label (includes/abilities/design.php:296):
create-color-palette({ name: "Primary" })
// -> { palette: { id: "<generated-palette-id>", name: "Primary", colors: [] } }
create-color({ paletteId: "<generated-palette-id>", light: "#4F46E5" })
create-color({ paletteId: "<generated-palette-id>", light: "#4338CA" })
Bricks palette colors are stored as palette color objects. Do not invent semantic CSS variable names from palette labels. For programmatic access in custom CSS, set explicit global variables such as color-primary-500 through set-global-variables.
These don't have a color-specific ability: they live in global variables. Use set-global-variables per category:
set-global-variables({
variables: [
{ name: "space-1", value: "4px", category: "spacing" },
{ name: "space-2", value: "8px", category: "spacing" },
{ name: "space-4", value: "16px", category: "spacing" },
{ name: "space-8", value: "32px", category: "spacing" },
{ name: "radius-sm", value: "4px", category: "radius" },
{ name: "radius-md", value: "8px", category: "radius" },
{ name: "shadow-sm", value: "0 1px 2px rgb(0 0 0 / 0.05)", category: "shadow" },
...
]
})
For a scale (e.g., spacing 4px -> 256px doubling), consider generate-scale-variables instead: single call, less drift.
Figma typography styles typically produce: font-family, size, weight, line-height, letter-spacing. Bricks theme styles hold type-scale tokens, but for programmatic reuse, mirror each as a global variable:
{ name: "font-family-sans", value: "'Inter', system-ui, sans-serif", category: "typography" }
{ name: "text-body", value: "16px", category: "typography" }
{ name: "text-h1", value: "48px", category: "typography" }
{ name: "weight-bold", value: "700", category: "typography" }
Before dumping full pages into convert-html-css-to-bricks-data, identify repeated patterns. Typical candidates: header, footer, card, CTA, pricing tile, product row.
For each, ask the Figma integration for the pattern's exported HTML + CSS (or convert the design frame to HTML yourself). Feed to convert-html-css-to-bricks-data:
convert-html-css-to-bricks-data({
html: "<style>.card { background: var(--color-neutral-50); padding: var(--space-4); }</style><div class='card'>...</div>"
})
convert-html-css-to-bricks-data returns { elements, global_classes, global_variables, ... }. Persist or remap returned design resources as described in the html-css-to-bricks skill, then wrap the element array via create-component:
create-component({
label: "Product Card",
elements: <elements from convert-html-css-to-bricks-data>,
category: "Cards"
})
Result: a component ID. Reuse by referencing the component ID in page-level structure (the convert-html-css-to-bricks-data output becomes an instance, not duplicated elements).
convert-html-css-to-bricks-data limitsconvert-html-css-to-bricks-data maps HTML/CSS -> Bricks' closest native element. It cannot produce:
add-element.update-element-interactions and the Forms skill.For each of the above, convert the static shell via convert-html-css-to-bricks-data, then swap the intended native element by hand. Don't expect 1:1 output.
Given a Figma frame for a full page:
convert-html-css-to-bricks-data.find-post or create-post to get a target post. create-post returns permalink; current find-post returns builder metadata but no public permalink. Use another WordPress source for the public URL when working with an existing post.set-page-elements with the converted tree.If the page re-uses the same structure as another page (e.g., two product pages differ only in copy), extract the shared block with extract-component-from-elements and re-reference.
Compose with browser-verify:
get-page-elements, fix via update-element, re-screenshot.Common first-pass deltas:
space-4 vs space-6).h3 semantics but Figma-H2 visual size: fix via element tag + typography token.auto but Figma shows fixed ratio: add CSS aspect-ratio.border-radius).convert-html-css-to-bricks-data didn't populate children: authored in phase 2 manually.Figma plugins that export HTML/CSS vary wildly. Rank in order of fidelity (from real user reports):
| Exporter | Fidelity | Notes |
|---|---|---|
| Figma's native Dev Mode -> Inspect with design tokens | Best for tokens | Not a full HTML export; pair with another for structure |
| Anima / Locofy | Medium-high for structure | Verbose CSS; clean up before convert-html-css-to-bricks-data |
| Custom model-assisted HTML export from a frame spec | Variable | Ask for semantic HTML, BEM classes, and CSS variables that match Bricks tokens |
| "Copy as CSS" alone | Low | Missing structure: only useful token-extraction |
Pick the exporter based on the phase. Token extraction wants Dev Mode. Structure wants Anima, Locofy, or a careful HTML export.
Bricks prefixes its internal variables (--_bp-*). Figma exports typically don't prefix. When convert-html-css-to-bricks-data generates CSS referencing var(--spacing-4), Bricks doesn't know what that is.
Before phase 3, run list-global-variables and confirm every token referenced in the Figma HTML/CSS exists in Bricks. If names mismatch:
Pick one: mixing is pain.
convert-html-css-to-bricks-data as one giant blob. Abilities have size limits and the output tree is unmaintainable.convert-html-css-to-bricks-data produce raw hex values everywhere. You'll spend the rest of the project find-replacing colors.html-css-to-bricks: convert-html-css-to-bricks-data specifics, class-collision handling.browser-verify: screenshot + iterate loop.design-systems: how Bricks organizes colors / variables / theme styles.seed-design-system: scaffold the token set before porting content.components: component authoring deep-dive.npx claudepluginhub codeerhq/bricks-skills --plugin bricksGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.