# Figma Rules

> Generate project-specific design system rules that guide AI agents to produce consistent code when implementing Figma designs. Encodes your project's conventions, tokens, and component patterns. Use when: user says create design rules, generate rules, design system rules, set up design rules, customize design guidelines, or wants consistent Figma-to-code output.

- **Type:** Skill
- **Install:** `agentstack add skill-ikusmart-claude-figma-skills-figma-rules`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ikusmart](https://agentstack.voostack.com/s/ikusmart)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ikusmart](https://github.com/ikusmart)
- **Source:** https://github.com/ikusmart/claude.figma.skills/tree/main/.claude/skills/figma-rules

## Install

```sh
agentstack add skill-ikusmart-claude-figma-skills-figma-rules
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Create Design System Rules

## Self-Documentation

When invoked WITHOUT clear input:

1. Display the Quick Help block below
2. Ask the user if they want to generate rules for the current project

When invoked WITH clear intent — skip help and proceed to Step 1.

## Quick Help

**What I do:** Generate a project-specific rules document that teaches AI agents how to correctly translate Figma designs into code for YOUR project. Encodes "unwritten knowledge" — component organization, token mapping, styling conventions.

**Example prompts:**
- `Create design system rules for this project`
- `Generate Figma implementation rules`
- `Set up design rules so /figma-implement uses our conventions`

**Prerequisites:**
- Figma MCP server configured. Run `/figma-setup` if not configured.
- An existing project with components, styling, and conventions to encode.

**What you get:**
- A rules document saved to `.claude/rules/figma-design-system.md`
- Rules cover: component organization, implementation flow, token mapping, reuse patterns
- All future `/figma-implement` calls will follow these rules automatically

---

## Step 1: Analyze Project

Scan the current project to understand its structure:

- **Framework:** React, Vue, Svelte, Angular, etc.
- **Component directories:** where UI components live (e.g., `src/components/ui/`)
- **Styling:** Tailwind, CSS Modules, styled-components, SCSS, design tokens
- **Token system:** color variables, spacing, typography definitions
- **Naming conventions:** PascalCase components, kebab-case files, etc.
- **Existing patterns:** how components are structured, exported, tested

## Step 2: Call MCP

Call `create_design_system_rules` with the detected frameworks and languages:

```
create_design_system_rules(
  clientFrameworks: "react,tailwind",   // detected frameworks
  clientLanguages: "typescript,css"      // detected languages
)
```

This returns a base set of rules from Figma.

## Step 3: Customize Rules

Merge MCP output with project-specific conventions discovered in Step 1:

- Map Figma color tokens → project CSS variables or Tailwind config
- Map Figma spacing → project spacing scale
- Map Figma typography → project font definitions
- Define component reuse rules (which project components map to Figma components)
- Define file placement rules (where new components should be created)

## Step 4: Save Rules

Write the generated rules to `.claude/rules/figma-design-system.md`.

Example structure (the agent will generate project-specific content):

```markdown
# Figma Design System Rules

## Component Organization
- Where UI components live, naming patterns

## Token Mapping
| Figma Token | Project Token |
|-------------|---------------|
| Primary/500 | --color-primary |

## Styling Rules
- Framework-specific conventions
```

**Important:** Rules saved to `.claude/rules/` are auto-loaded for ALL sessions in this project. The `/figma-implement` skill will use these rules as primary context, skipping redundant project analysis.

## Step 5: Report

Tell the user:
- Where the rules file was saved
- What conventions were encoded
- How it affects future `/figma-implement` calls (rules are auto-loaded by Claude Code)
- Suggest running `/figma-implement` to test the rules on a real design

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ikusmart](https://github.com/ikusmart)
- **Source:** [ikusmart/claude.figma.skills](https://github.com/ikusmart/claude.figma.skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ikusmart-claude-figma-skills-figma-rules
- Seller: https://agentstack.voostack.com/s/ikusmart
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.