CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

52

Quality

65%

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

Quality

Content

48%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 defines a genuinely clear and distinctive image-first workflow with concrete selection procedures, extraction checklists, and a final verification checklist, but buries it in severe redundancy — the same handful of rules restated across a dozen sections. It is a monolithic single-file skill that would benefit enormously from deduplication and splitting its catalogs into reference files.

Suggestions

Deduplicate ruthlessly: consolidate the repeated image-count, no-cropping, hero-cleanliness, and anti-nesting rules (currently restated in sections 1, 3-5, 14-18, 29, 35, 36, and 38) into single canonical statements, cutting the body to roughly a quarter of its current size.

Split reference material into bundle files (e.g., references/variation-engine.md for the section 12 catalogs, references/section-packs.md for section 33, references/extraction-checklists.md for sections 21-25) so SKILL.md is a lean workflow overview with clearly signaled one-level-deep pointers.

Replace the enumerated 1-through-10 section->image mapping (section 4) with the single generalizable rule it restates ('one section = one primary image'), and give the analysis step a concrete output format so 'deeply analyze' becomes verifiable.

DimensionReasoningScore

Conciseness

The ~1,220-line body is heavily padded with extensive repetition: 'Do not be lazy with image count' recurs in sections 1, 3, 35, 36, and 38; the no-cropping rule in 5, 18, 35, 36, 37, and 38; hero cleanliness in 14, 15, 35, 36, and 38. Section 4 pads a trivial rule into an enumerated '1 section -> 1 image... 10 sections -> 10 images' list. This is far beyond 'several padded sections' (the score-2 anchor) and matches 'severely verbose; heavily padded' — roughly 250 lines of genuine content stretched to 1,220.

1 / 5

Actionability

As an instruction-only skill, the absence of code is not penalized, and the guidance is mostly concrete: a numbered execution order (section 10), an explicit variant-selection procedure (section 12: 'Choose exactly 4 unique components', 'Choose exactly 2' motion cues), extraction checklists (sections 21-25), and three worked interpretations (section 37). It is not a 5 because the analysis step has no concrete output format and untestable adjectives ('premium', 'cinematic') dilute the directives; not a 3 because the workflow steps are specific and executable as written.

4 / 5

Workflow Clarity

The core sequence is explicit and repeated (section 10: infer sections -> generate images -> analyze -> extract -> implement) with a 21-point verification checklist (section 35) and feedback loops ('If something is unclear, generate another image before coding', section 8; ambiguity resolution order, section 28). It is not a 5 because the workflow is restated three times with slight variation (sections 10, 36, 38) creating ambiguity about the canonical version, and the checklist's 'verify internally' has no recovery specifics when a check fails; not a 3 because checkpoints are present and explicit.

4 / 5

Progressive Disclosure

There is structure (38 numbered section headers) but the entire skill is one monolithic 37KB body with no references/ scripts/ or assets/ files. Reference-type catalogs — the variation engine (section 12), default section packs (section 33), extraction checklists (sections 21-25), and anti-slop lists (section 29) — are inlined where they clearly belong in separate reference files. This matches 'Some structure but could be better organized; content that should be separate is inline'; it is not a 2 because headers do provide real navigational structure.

3 / 5

Total

12

/

20

Passed

Description

67%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 reasonably strong description that clearly conveys the what (generate images, analyze deeply, implement faithfully) and includes an explicit scope clause. Its weaknesses are a padded run-on structure with buzzword tone ('Elite'), thin natural trigger-term coverage, and a broad 'when' clause that could name the concrete request types it serves.

Suggestions

Add concrete trigger phrases users would naturally say (e.g., 'mockup to HTML', 'design to code', 'screenshot to website', 'visually important landing page or redesign') to improve trigger-term coverage.

Sharpen the 'when' clause into explicit guidance naming the request types (hero section, landing page, marketing site, portfolio, redesign) instead of the broad 'For visually important web tasks'.

Trim tone words ('Elite', 'aggressively') and split the single run-on sentence into a compact what/when structure to cut padding without losing specificity.

DimensionReasoningScore

Specificity

The description lists several concrete actions ('first generate the design image(s) itself, deeply analyze them, then implement the website', 'prefer large, readable, section-specific images', 'generate fresh standalone images... instead of cropping old ones') with only minor coverage gaps. It is not a 5 because it is one padded run-on sentence ('Elite... aggressively break defaults' tone words) rather than a comprehensive, cleanly enumerated action list; not a 3 because it goes well beyond naming 1-2 actions.

4 / 5

Completeness

Both what ('generate the design image(s)... deeply analyze them, then implement the website') and when ('For visually important web tasks') are present. The 'when' clause is explicit enough to avoid the score-3 cap for a missing trigger clause, but it is broad and could be much more specific about which requests trigger the skill (e.g., 'use when the user asks for a hero, landing page, or visually important redesign'), matching the anchor 'both present; when could be more explicit or specific'.

4 / 5

Trigger Term Quality

It contains some relevant natural terms ('image-to-code', 'website', 'design image', 'hero', 'landing' implied via 'web tasks') but misses common variations users would actually say such as 'mockup to HTML', 'screenshot to website', 'design to code', or 'reference image'. This matches the anchor 'Some relevant keywords but missing common variations or synonyms'; it is not a 4 because the natural-phrase coverage is thin relative to the domain.

3 / 5

Distinctiveness Conflict Risk

The image-first generate-then-analyze-then-implement workflow is a clear, distinct niche unlikely to fire for unrelated skills, giving minimal conflict risk on the trigger side. It is not a 5 because the trailing clauses ('implement the website', 'keep the hero clean') overlap meaningfully with generic web-design/build skills, matching 'mostly distinct; minor overlap risk with closely related skills'.

4 / 5

Total

15

/

20

Passed

Validation

87%

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

CriteriaDescriptionResult

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

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.