ralph-figma

SkillMedia

Lets your agent turn a Figma design into working React, Vue, Svelte, or HTML code.

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the ralph-figma skill

About this skill

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

What this skill tells your AI

The instructions your AI receives, as published by rubenmarcus/ralph-starter in skills/ralph-figma/SKILL.md and read by ahel’s review.

Extract a Figma design and build it as production code.

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)
Review the extracted spec — check colors, typography, spacing, and component structure
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.

Automated review, not a security audit. Ruleset v1+k2.

Advanced