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.

66

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/figma-implement-design/skills/figma-implement-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

70%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 content delivers a clear, actionable, well-sequenced workflow with concrete MCP calls and validation checkpoints, but is verbose in places and keeps all material inline in a single ~240-line file with no progressive disclosure into bundled reference files.

Suggestions

Remove or condense the 'Understanding Design Implementation' and 'Best Practices' sections, which restate workflow principles as motivational prose without adding actionable guidance.

Move the two long worked Examples and the 'Common Issues and Solutions' troubleshooting into separate reference files (e.g. EXAMPLES.md, TROUBLESHOOTING.md) linked one level deep from SKILL.md to improve progressive disclosure.

Tighten abstract steps like 'Build layout using the project's layout primitives' with a concrete snippet or pointer to the project's layout primitives so the guidance is fully executable.

DimensionReasoningScore

Conciseness

Mostly efficient actionable content, but the 'Understanding Design Implementation' section ('For designers: Confidence...', 'For developers: A structured approach...') and 'Best Practices' repeat workflow principles as motivational fluff that could be trimmed, fitting 'mostly efficient but some unnecessary explanation'.

3 / 5

Actionability

Provides concrete executable MCP calls (get_design_context, get_screenshot, get_metadata, codex mcp add/login) with URL-parsing examples and two worked examples, but a few steps remain high-level ('Build layout using the project's layout primitives'), so mostly executable with minor gaps.

4 / 5

Workflow Clarity

Clear ordered Step 0–7 sequence ('Follow these steps in order. Do not skip steps.'), an explicit truncation feedback loop in Step 2, and a validation checklist in Step 7, matching the top anchor for sequence + feedback loops + checklists.

5 / 5

Progressive Disclosure

No bundle files exist and the ~240-line body inlines content that could be split into separate files (the two long worked examples, Common Issues, Best Practices), with section headers providing structure but no one-level-deep references, fitting the 'some structure but content that should be separate is inline' anchor.

3 / 5

Total

15

/

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, provides explicit 'Trigger when...' guidance with natural user phrasing, and occupies a distinct Figma-implementation niche. It uses third-person voice as required and avoids vague fluff.

DimensionReasoningScore

Specificity

Lists several concrete actions ('Translate Figma nodes into production-ready code with 1:1 visual fidelity', 'design context, screenshots, assets, and project-convention translation') with only minor coverage gaps, fitting the 'several specific actions' anchor rather than the comprehensive 5.

4 / 5

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...') with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

Good natural-term coverage ('Figma URLs', 'node IDs', 'implement designs or components that must match Figma specs') that users would actually say, with a few variations missing, so above the midpoint but not comprehensive.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear Figma-implementation niche with distinct triggers (Figma URLs, node IDs, Figma specs) and minimal overlap risk with other skills, matching the 'clear niche with distinct triggers' anchor.

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
mattermost/mattermost-ai-marketplace
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.