Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude2figma
Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming when building UI elements in Figma.
npx claudepluginhub senlindesign/claude2figma --plugin claude2figmaHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude2figma:component-rulesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Governs how Claude constructs UI in Figma. Supplements `figma-generate-design`. For visual property binding, defer to `figma-style-binding`.
Translates app pages, views, modals, dialogs, drawers, sidebars, and panels into Figma by reusing design system components, variables, and styles instead of hardcoded values.
Generates Figma components and screens from user requests by producing a CSpec, compiling to a scene graph, and executing via MCP with verification.
Builds and maintains Rayden UI components and screens in Figma via Figma MCP, enforcing design tokens, craft rules, anti-patterns, and visual validation. Audits compliance and syncs React updates.
Share bugs, ideas, or general feedback.
Governs how Claude constructs UI in Figma. Supplements figma-generate-design. For visual property binding, defer to figma-style-binding.
Before building anything, resolve the component source in this order:
1. search_design_system → importComponentByKeyAsync → createInstance()
2. Local file scan → createInstance()
3. Build from scratch — ONLY if nothing matches
Never rebuild primitives the DS provides: Button, Input, Checkbox, Toggle, Badge, Tag, Avatar, Icon, Tab, Breadcrumb, Toast, Alert, Spinner.
// Library import
const comp = await figma.importComponentByKeyAsync("key_from_search");
const instance = comp.createInstance();
parent.appendChild(instance);
// For component sets (variants)
const set = await figma.importComponentSetByKeyAsync("key");
const instance = set.defaultVariant.createInstance();
Every container must use Auto Layout. Property order matters:
layoutMode FIRST ("VERTICAL" or "HORIZONTAL")layoutSizingHorizontal / layoutSizingVertical AFTER appendChildlayoutMode BEFORE any setBoundVariable call| Goal | primaryAxisSizing | counterAxisSizing | layoutSizingH | layoutSizingV |
|---|---|---|---|---|
| Hug both | AUTO | AUTO | HUG | HUG |
| Fixed card | FIXED | FIXED | FIXED | FIXED |
| Full-width section | AUTO | FIXED | FILL | HUG |
Name every node semantically with slash hierarchy. Never leave defaults.
Card / Container Card / Title Card / Body Card / Action Row
Hero / Background Nav / Link Group Button / Primary
One section per use_figma call. Validate via screenshot after each step. Return all created/mutated node IDs:
return { created: { card: card.id, title: title.id } };