Skip to content
SkillCheatSheet Sign in

figma-design-to-code

An AI agent skill from Devin-AXIS/iPolloWork, scored 64 out of 100 by code.

64/ 100C

Code score by group

  • Spec20/20
  • Description12/20
  • Procedure10/15
  • Done criteria4/15
  • Resources7/10
  • Scripts2/8
  • Safety7/7
  • Upkeep2/5

It loses the most points in Done criteria (11), the group that checks whether there is a checklist and a step that verifies the work.

What the author says it does

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority…

This is the description in the skill's own SKILL.md, written by its author, not by SkillCheatSheet.

Repository
Devin-AXIS/iPolloWork
Folder
examples/plugin-packages/figma/skills/figma-design-to-code
License
Not identified by GitHub
GitHub stars
7,451
SKILL.md lines
51
Other files
0

Add figma-design-to-code to your agent

npx skills add Devin-AXIS/iPolloWork --skill figma-design-to-code

The command uses the open skills CLI. A skill is instructions and scripts your agent will follow, so read it first: open the folder on GitHub at the commit that was scored. GitHub identifies no license for this repository, so check its terms before you use it.

More skills from Devin-AXIS/iPolloWork

  1. figma-use

    **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes co…

    Verified90A
  2. figma-generate-library

    Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual compo…

    Verified84B
  3. figma-generate-design

    Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma f…

    78B
  4. fraimz

    create a fraimz, make fraimz, prove it works, frame proof, PR proof, validate experience, e2e evidence, fraimz.html. The full fraimz loop — frame the claim, drive the real app via…

    76B
  5. daytona-recording-artifacts

    frame proof, HTML frames, screenshots, recording, PR proof, e2e evidence, validate visually. Daytona artifacts workflow for validated screenshots and optional videos.

    74B
  6. ipollowork-maintainable-code

    Mandatory iPolloWork code-change gate for modern, minimal, performant, reuse-first implementation and clean repository ownership. Use whenever AI creates, edits, deletes, or refac…

    74B
  7. agent-first-screenshots

    Agent-first screenshots — an agent drives the real app via CDP and produces clean, defect-free product screenshots (newsletters, landing pages, social, decks, PR). Dual-channel ve…

    73B
  8. figma-implement-motion

    Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion",…

    73B

All skills in Devin-AXIS/iPolloWork

Scores come from a snapshot of 300 public GitHub repositories taken on 12 November 2026. Every score is the result of fixed checks run by code; no AI is involved. How scoring works.