CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-design-to-code

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. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).

79

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

The canonical home for this skill is figma-design-to-code in openai/plugins

SKILL.md
Quality
Evals
Security

Quality

Content

100%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A tight, well-structured procedural skill: lean directives, concrete tool usage, an explicit hint-priority order, and error-recovery feedback loops. It appropriately delegates parameter mechanics to the tool description rather than duplicating them.

DimensionReasoningScore

Conciseness

The body is lean and directive — it avoids explaining what Figma is or how libraries work, and actively avoids duplication by pushing parameter mechanics onto the get_design_context tool description ('follow them there'). Not level 2: there is no unnecessary explanation to tighten.

3 / 3

Actionability

Gives concrete, specific guidance — exact tool names (get_design_context vs get_metadata/get_screenshot), an ordered 5-level priority scheme for response hints, and named error conditions. As an instruction-only workflow skill, the absence of code is not penalized because the guidance is actionable.

3 / 3

Workflow Clarity

A clearly numbered four-step sequence (call get_design_context → treat as reference → reuse project assets → honor hints by priority) with an explicit Error Recovery section containing feedback loops (stop and read the message before retrying; retry against a smaller node on timeout).

3 / 3

Progressive Disclosure

Under ~50 lines with no bundle files and no need for external references, yet well-organized into Direction/Scope, Workflow, and Error Recovery sections — matching the scoring note that simple skills can score 3 with just well-organized sections.

3 / 3

Total

12

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A well-crafted description that states concrete capabilities, gives natural trigger phrases, answers both what and when, and explicitly disambiguates from sibling Figma skills. No meaningful gaps relative to the rubric.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'implementing a Figma design as code', 'reading a node out of Figma with get_design_context', 'adapting its reference output', 'reusing existing components, tokens, and conventions', and 'honoring Code Connect mappings, component docs, design annotations, and design tokens by priority' — matching the score-3 anchor for multiple specific concrete actions.

3 / 3

Completeness

Explicitly answers both 'what' (read a node from Figma and adapt it into the target project) and 'when' via the 'Use this skill when...' clause plus a dedicated Triggers list, satisfying the score-3 anchor for both with explicit triggers.

3 / 3

Trigger Term Quality

Provides natural user phrasings — 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', and a figma.com URL — covering terms a user would naturally say; not the level-2 'missing common variations' case.

3 / 3

Distinctiveness Conflict Risk

Carves a clear niche as 'the read-FROM-Figma direction' and explicitly distinguishes it from figma-code-connect and figma-generate-design/figma-use (the reverse code→design direction), making wrong-skill triggering unlikely.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
Devin-AXIS/iPolloWork
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.