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.

68

Quality

82%

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

77%Weight 40%Scale 1-5

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

The body is well structured with a clear, validated workflow and good progressive disclosure via real reference files. Its main weakness is conciseness: several closing and best-practice sections restate earlier content, and tool-call examples are pseudocode rather than copy-paste commands.

Suggestions

Trim or merge the 'Understanding Design Implementation' and 'Best Practices' sections into the relevant workflow steps to remove restated principles and reduce token cost.

Consolidate the overlapping 'Implementation Rules', 'Component Organization', and 'Design System Integration' subsections into a single concise rules block.

Replace placeholder tool-call pseudocode (e.g. fileKey=":fileKey", nodeId=":childNodeId") with concrete, copy-paste-ready invocations using the example values already in the document.

DimensionReasoningScore

Conciseness

Mostly efficient, but sections like 'Understanding Design Implementation', 'Best Practices', and the overlapping 'Implementation Rules' / 'Design System Integration' blocks restate principles already covered in the steps and could be trimmed.

3 / 5

Actionability

Concrete tool calls, URL-parsing examples, and worked cases give mostly executable guidance, but tool invocations use placeholder pseudocode (e.g. fileKey=":fileKey", nodeId=":childNodeId") rather than copy-paste-ready commands.

4 / 5

Workflow Clarity

A clearly sequenced 7-step workflow with an explicit validation checklist (Step 7) and a recovery path for truncated responses (metadata then per-child fetch), satisfying the feedback-loop expectation.

5 / 5

Progressive Disclosure

Overview keeps the workflow inline while pushing config and tool-catalog detail to two real, one-level-deep reference files that are clearly signaled in the body and listed again under Additional Resources.

5 / 5

Total

17

/

20

Passed

Description

87%Weight 40%Scale 1-5

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 strong: it states concrete capabilities, gives explicit trigger guidance, and is clearly distinguishable from other skills. Trigger-term coverage is good but could add a few more natural synonyms to reach the top anchor.

DimensionReasoningScore

Specificity

Lists several concrete actions (translate Figma nodes, use design context/screenshots/assets, project-convention translation), with only minor coverage gaps versus the comprehensive anchor.

4 / 5

Completeness

Explicitly answers both what (translate Figma nodes into production-ready code with 1:1 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').

5 / 5

Trigger Term Quality

Natural trigger terms ('Figma URLs or node IDs', 'implement designs or components', 'match Figma specs') are present, though common synonyms like 'designs to code' or 'Figma files' are missing.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear Figma-to-code-via-MCP niche with distinct triggers and the MCP-connection precondition, minimizing overlap with other skills.

5 / 5

Total

18

/

20

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.