image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

Quality

57%

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 ./skills/image-to-code-skill/SKILL.md

Quality

Content

47%

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

The skill has a clearly sequenced, checkpointed workflow with strong concrete structures, but it is severely redundant — the same rules are restated across many of its 38 sections — and it is a monolithic 1200-line file with no progressive disclosure. Token efficiency and file structure are the main weaknesses.

Suggestions

Consolidate the repeated directives (no cropping, no nested cards, generous image count) into a single authoritative section and remove the 5–8 verbatim restatements scattered across §1, §3, §5, §16, §29, §36 and §38 to recover token budget.

Move the long, reference-style material — the combinatorial variation engine (§12), the section packs (§33), the example interpretations (§37), and the extraction/checklist rules (§9, §21–§25, §35) — into separate reference files linked from a concise SKILL.md overview to enable progressive disclosure.

Convert abstract taste directives ("feel premium", "feel cinematic", "let it breathe") into concrete, testable criteria so the guidance is more mechanically actionable.

Dimension	Reasoning	Score
Conciseness	The ~1200-line body restates the same directives many times — "do not crop old images" (§5, §6, §18, §36, §38, §39), "avoid cards-inside-cards-inside-cards" (§0, §16, §29, §36, §38, §42), and "do not be lazy with image count" (§1, §3, §36, §38) — which is padded, repetitive context rather than net-new guidance, matching the verbose anchor.	1 / 3
Actionability	It provides genuinely concrete structures (the combinatorial variation engine with 'choose exactly 4 components' and 'choose exactly 2 motion cues', numbered section packs, 1–3 line hero headline limits, and per-section image-count rules), but these are heavily diluted by abstract taste directives like "feel premium", "feel cinematic", and "let it breathe", placing it between the concrete and fully-actionable anchors.	2 / 3
Workflow Clarity	Sequences are explicit (§10's 8-step workflow and §36's 22-step response behavior), there is a verification checklist (§35's 21-point clarity check), and feedback loops exist (regenerate unclear sections as fresh standalone images in §6, generate extra detail images in §7, the §28 resolution order), matching the anchor for clear sequence with checkpoints and error-recovery loops.	3 / 3
Progressive Disclosure	The body is well-organized into 38 numbered sections, but it is a monolithic single file with no external references at all, and content that would benefit from being split out (the variation engine, example interpretations, and large extraction checklists) is entirely inline, matching the 'structure present but content that should be separate is inline' anchor.	2 / 3
	Total	8 / 12 Passed

Description

67%

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 and distinctive about an image-first design-to-code workflow, but it lacks an explicit "Use when…" trigger clause and has only partial coverage of natural trigger terms. It is also somewhat long and opens with the mild over-claim "Elite".

Suggestions

Add an explicit 'Use when…' clause naming the situations that should trigger this skill (e.g. hero sections, landing pages, redesigns described in visual terms) to lift completeness to 3.

Broaden natural trigger terms in the description itself (e.g. 'image to code', 'mockup to frontend', 'design a website', 'landing page') to improve trigger-term coverage rather than relying on the separate triggers array.

Trim the opening 'Elite' framing and tighten the Codex-specific guidance so the description stays concise and free of mild over-claims.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions: "generate the design image(s) itself, deeply analyze them, then implement the website", "generate fresh standalone images for sections or detail views instead of cropping old ones", and "keep the hero clean, spacious, readable", matching the anchor that names several specific actions.	3 / 3
Completeness	The "what" is explicit, but there is no "Use when…" clause or equivalent explicit trigger guidance in the description field (the "when" is only implied via "For visually important web tasks"), which caps completeness at 2 per the judging guidelines.	2 / 3
Trigger Term Quality	Contains the natural phrase "image-to-code" and "visually important web tasks", but is missing common variations a user would say (e.g. "design to code", "landing page", "mockup to code") and offers no explicit trigger-phrase listing, so it is above the single-keyword anchor but below full coverage.	2 / 3
Distinctiveness Conflict Risk	It carves a clear niche — an image-first website design-to-code workflow specific to Codex — with distinct triggers, making it unlikely to fire for unrelated skills.	3 / 3
	Total	10 / 12 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1254 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: nexu-io/open-design
Path: skills/image-to-code-skill/SKILL.md
Commit: f2760fd

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.