CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

75

Quality

92%

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

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

The body is a well-structured, actionable workflow with explicit numbered steps, validation checkpoints, error-recovery loops, and properly signaled one-level-deep references to real bundle files. Its main weakness is mild verbosity — the 'Understanding Design Implementation' marketing-style section and some repeated design-token guidance restate things Claude already knows. Tightening those would lift conciseness to fully lean.

Suggestions

Remove or condense the 'Understanding Design Implementation' section ('For designers... For developers... For teams...') — it is promotional framing Claude already infers and adds no executable value.

De-duplicate the 'Avoid hardcoded values / prefer design system tokens' guidance, which appears nearly verbatim in Step 5, Step 6, Implementation Rules, and Common Issues; consolidate into one authoritative statement.

Trim 'Additional Resources' external links that duplicate the in-skill reference files, or move them into references/figma-tools-and-prompts.md to keep the body focused on the workflow.

DimensionReasoningScore

Conciseness

The body is largely efficient and actionable, but sections like 'Understanding Design Implementation' ('For designers: Confidence that implementations will match... For developers: A structured approach...') and repeated 'Avoid hardcoded values' guidance across Best Practices, Implementation Rules, and Step 6 pad the skill with content Claude already infers, keeping it just below fully lean.

2 / 3

Actionability

Provides concrete, copy-paste-ready tool calls (`get_design_context(fileKey=":fileKey", nodeId="1-2")`, `codex mcp add figma --url ...`), a worked URL-parsing example with real values, and two end-to-end worked examples, all of which are directly executable.

3 / 3

Workflow Clarity

The required workflow is a clearly numbered Step 0–7 sequence with an explicit validation checklist in Step 7, a validate→fix→retry loop for truncated responses ('If the response is too large... use get_metadata... fetch individual child nodes'), and clear error-recovery guidance in Common Issues.

3 / 3

Progressive Disclosure

SKILL.md is an overview that signals one-level-deep references to two real bundle files ('references/figma-mcp-config.md', 'references/figma-tools-and-prompts.md'), both confirmed present, with setup/config and tool-catalog detail appropriately split out rather than inlined.

3 / 3

Total

11

/

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.

The description is specific, complete, and distinct: it names concrete capabilities, includes an explicit 'Trigger when...' clause with natural terms, and is scoped tightly to Figma design implementation. It uses proper third-person voice and avoids fluff. This is a strong, well-rounded description.

DimensionReasoningScore

Specificity

Lists multiple concrete actions: 'Translate Figma nodes into production-ready code', 'design context, screenshots, assets, and project-convention translation', '1:1 visual fidelity' — a comprehensive, specific capability set rather than a vague domain label.

3 / 3

Completeness

Explicitly answers both 'what' ('Translate Figma nodes into production-ready code with 1:1 visual fidelity...') and 'when' ('Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs').

3 / 3

Trigger Term Quality

Covers natural user-facing terms users would say — 'Figma URLs', 'node IDs', 'implement designs or components', 'match Figma specs' — with good coverage of real phrasings rather than only technical jargon.

3 / 3

Distinctiveness Conflict Risk

Has a clear niche (Figma design implementation via Figma MCP) with distinct triggers tied to Figma URLs/node IDs, making it unlikely to fire for unrelated coding or design skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
foryourhealth111-pixel/Vibe-Skills
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.