> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getskillmd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma plugin

> Turn design context into skills your agent can build from.

The skillmd **Figma plugin** bridges design and code: capture design context from a file
and turn it into a `skill.md` your agent can build UI against — paired with `verify_design`
over [MCP](/docs/integrations/mcp) to check the result.

## What it's for

<CardGroup cols={2}>
  <Card title="Design to skill" icon="palette">
    Generate a [design-mode](/docs/concepts/generation-modes) skill from your Figma
    context — tokens, components, and patterns.
  </Card>

  <Card title="Build with confidence" icon="circle-check">
    Hand the skill to your agent, then verify the implementation against the source
    design.
  </Card>
</CardGroup>

## Workflow

<Steps>
  <Step title="Open the plugin">
    Run the skillmd plugin from your Figma file.
  </Step>

  <Step title="Generate a design skill">
    Capture the design context as a `skill.md`.
  </Step>

  <Step title="Build, then verify">
    Use the skill in your editor to build UI, then run `verify_design` over MCP to check
    it against the design.
  </Step>
</Steps>

<Note>
  Design skills pair naturally with the [`verify_design`](/docs/integrations/mcp#available-tools)
  MCP tool — generate, build, and check without leaving your agent loop.
</Note>