CtrlK
BlogDocsLog inGet started
Tessl Logo

1k-implementing-figma-designs

Implements Figma designs 1:1 using OneKey component library (还原设计稿).

54

Quality

61%

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 ./.skillshare/skills/1k-implementing-figma-designs/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

68%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 is well-structured, actionable, and token-efficient, giving Claude concrete lookup paths and ready-to-use tokens and patterns. Its main weakness is workflow clarity: the implementation steps lack a verification checkpoint to confirm the built UI matches the Figma design.

Suggestions

Add a final verification step to the workflow, e.g. 'Visually compare the rendered UI against the Figma design and adjust spacing/colors/components until it matches 1:1'.

Collapse the redundant 'What NOT to do' / 'What TO do' lists into the 'Focus on UI First, Data Later' principles to remove restated content.

Consider moving the exhaustive component-category list and full token tables into a reference file referenced one level deep, keeping SKILL.md as a lean overview.

DimensionReasoningScore

Conciseness

The body is mostly lean with bullet lists and code blocks, but the 'What NOT to do' / 'What TO do' sections partially restate 'Focus on UI First, Data Later' (mock data, skip i18n, skip API), a minor trim opportunity.

4 / 5

Actionability

Concrete, executable guidance is provided throughout (import patterns, exact token tables with px values, SizableText/Stack usage, exact Read/Glob lookup paths), with only minor gaps from placeholder patterns and the lack of a fully worked end-to-end example.

4 / 5

Workflow Clarity

The 5-step workflow is clearly sequenced, but it lacks any validation or verification checkpoint (e.g. comparing the rendered UI against the Figma design), matching the 'steps present but checkpoints missing' anchor.

3 / 5

Progressive Disclosure

The single SKILL.md is well-organized with clear section headers and no external bundle files; it is over the 50-line simple-skill threshold and inlines some reference-style material (exhaustive component categories, full token tables), placing it just below the 'clear overview with one-level-deep references' ideal.

4 / 5

Total

15

/

20

Passed

Description

53%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 clearly states what the skill does and targets a distinct niche, but omits any 'when to use' trigger guidance and relies on internal/technical terms rather than natural user phrases. Adding an explicit 'Use when...' clause with common trigger keywords would raise completeness and trigger-term quality.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when implementing Figma designs, converting Figma mockups to code, or matching a Figma design 1:1.'

Include natural trigger synonyms users would actually say (e.g. 'Figma mockups', 'Figma designs', 'pixel-perfect UI', '还原设计稿') to improve trigger term coverage.

Optionally list 1-2 more concrete actions (e.g. 'maps design tokens, builds mock data') to lift specificity above 3.

DimensionReasoningScore

Specificity

The phrase 'Implements Figma designs 1:1' names the domain and one concrete action, but does not list multiple specific actions, matching the 'names domain and 1-2 concrete actions' anchor.

3 / 5

Completeness

A clear 'what' is present ('Implements Figma designs 1:1 using OneKey component library') but there is no 'Use when...' clause, so per the rubric the missing explicit trigger guidance caps completeness at 3.

3 / 5

Trigger Term Quality

'Figma designs' is a natural user term, but the rest ('OneKey component library', '还原设计稿') is internal jargon with no synonyms or file extensions, missing common variations.

3 / 5

Distinctiveness Conflict Risk

The Figma + OneKey combination is a clear niche with minimal conflict risk, fitting 'mostly distinct; minor overlap risk'; it is not a 5 because the trigger phrasing is thin.

4 / 5

Total

13

/

20

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

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

Total

15

/

16

Passed

Repository
OneKeyHQ/app-monorepo
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.