agentsclimarketplace
Sign in

Ralph figma

Skill rubenmarcus/ralph-starter/skills/ralph-figma

Extract Figma designs and build them as code with ralph-starterFrom its SKILL.md

Install
npx -y skills add rubenmarcus/ralph-starter --skill ralph-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

0.8 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 619,758. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.