image-to-code

Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend in the target codebase.

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./packages/opencode/src/skill/builtin/.bundle/product-design/workflows/image-to-code/SKILL.md

Quality

Content

88%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.

A tight, well-structured skill body: an efficient 9-step workflow with real validation and feedback loops, concrete fidelity rules, and no wasted tokens. The only soft spots are steps whose executable detail lives in external sibling skills rather than here, and the absence of any in-bundle reference material.

Suggestions

Inline a short example of how to invoke the design-qa comparison or the exact capture command for the most common case, so step 8 is self-contained without the external skill.

Add one or two concrete inspection heuristics (e.g. how to derive spacing/typography tokens from the visual) to sharpen the high-level "inspect at useful detail" step.

If the sibling-skill references are stable, consider mirroring their key preconditions as a brief checklist so the skill degrades gracefully if those paths are absent.

Dimension	Reasoning	Score
Conciseness	The ~40-line body is lean and imperative with no padding and no explanations of concepts Claude already knows; every line (e.g. "Do not substitute emoji, generic placeholders, or improvised CSS drawings") earns its place.	5 / 5
Actionability	Concrete, instruction-level guidance with specific values ("verify around 390 × 844", "Save `design-qa.md` in the project root ... records `final result: passed`"), but capture/verification tooling is delegated to external skills and a few steps like "Inspect the source visual at useful detail" remain high-level.	4 / 5
Workflow Clarity	The 9-step workflow is clearly sequenced with an explicit validation checkpoint (step 8: capture and run design-qa against the source visual) and a fix-loop gate (step 9: fix mismatches and hand off only when the QA record shows passed), plus a blocker-reporting fallback.	5 / 5
Progressive Disclosure	Well-organized sections with clearly signaled one-level references to sibling skills (`../index/SKILL.md`, `../design-qa/SKILL.md`, `../user-context/SKILL.md`), but this skill ships no bundle files and the referenced paths point outside its own directory, leaving minor organization/navigation gaps.	4 / 5
	Total	18 / 20 Passed

Description

61%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.

A concise, specific, third-person description with strong input-synonym coverage and a well-delineated niche. Its main weakness is the absence of any "Use when..." trigger clause, which both caps completeness and leaves activation guidance implicit.

Suggestions

Add an explicit trigger clause, e.g. "Use when the user selects or shares an image, screenshot, mockup, or design frame and asks to build, recreate, or implement it as frontend code."

Broaden trigger terms with natural user phrasings such as "design-to-code", "recreate this UI", or "turn this mockup into a page" to improve trigger_term_quality.

Consider naming one more concrete action (e.g. visual QA comparison against the source) so specificity reaches the "several specific actions" anchor.

Dimension	Reasoning	Score
Specificity	The description names the domain (image/screenshot/mockup to frontend) and one concrete action — "Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend" — but offers only a single verb rather than several specific actions, matching anchor 3.	3 / 5
Completeness	The "what" is clear and concrete, but there is no "Use when..." clause or equivalent explicit trigger guidance — when to use the skill is only weakly implied by the input list, so the completeness cap of 3 applies.	3 / 5
Trigger Term Quality	Good natural-term coverage via the input synonyms "image, screenshot, mockup, generated concept, or design frame" plus "frontend"/"codebase", but common user phrasings like "design-to-code", "recreate this UI", or "turn this into a webpage" are missing.	4 / 5
Distinctiveness Conflict Risk	"Implement a selected image ... as a ... interactive frontend in the target codebase" carves out a clear image-to-code niche with distinct triggers; only minor overlap risk with design-QA or general frontend-generation skills.	4 / 5
	Total	14 / 20 Passed

Validation

100%

Warnings & errors only

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: XiaomiMiMo/MiMo-Code
Path: packages/opencode/src/skill/builtin/.bundle/product-design/workflows/image-to-code/SKILL.md
Commit: f0293bf

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

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.