Skip to content
Agent Orchestration
Skill

/ralph-figma

Extract Figma designs and build them as code with ralph-starter

BOOST
@rubenmarcusrubenmarcus@rubenmarcus
From plugin
ralph-starter
1079 skills1 agent
Install
$ npx -y skills add rubenmarcus/ralph-starter --skill ralph-figma --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/ralph-figma

Context preview

The summary Claude sees to decide when to auto-load this skill.

Extract Figma designs and build them as code with ralph-starter

SKILL.md

ralph-figma.SKILL.md
description: Extract Figma designs and build them as code with ralph-starter
disable-model-invocation: true

Extract a Figma design and build it as production code.

1. Use `ralph_fetch_spec` with `source: "figma"` and the Figma file URL as `identifier`

  • Modes: `spec` (full design spec), `tokens` (CSS/Tailwind design tokens), `components` (component code), `content` (text/IA), `assets` (icons/images)

2. Review the extracted spec — check colors, typography, spacing, and component structure 3. Use `ralph_run` to build the implementation:

  • Set `from: "figma"` to fetch directly from the Figma source
  • The agent iterates until the UI matches the design spec
  • Validation runs between iterations to catch issues early

Supported frameworks: React, Vue, Svelte, Astro, Next.js, Nuxt, HTML.

Read it on GitHub ↗
Ships withralph-starter

Bootstrap projects from Figma, Linear, Notion & GitHub specs. The only AI ralph with source integrations.

Get the whole plugin
Stats
TypeScriptJavaScriptReactBashGit
+7 tags
GitHubMarkdownAnthropicOpenAIMCPNotionFigma
107
Stars
9
Forks
Active
Maintenance
TypeScript
Language
MIT
License
5d ago
Last commit
9mo ago
Created
5h ago
Added

Repo: rubenmarcus/ralph-starter

In this plugin
9 skills1 agent
See everything inside

Other skills on ralph-starter.

See all 9 skills in ralph-starter