CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-designer

Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.

62

Quality

73%

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 ./ui-designer/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%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 well-structured, largely actionable skill body with a clear six-step workflow and genuine, well-signaled bundle assets. Its weaknesses are redundancy — template contents described twice and the workflow restated in Example Usage — and the absence of validation checkpoints between steps.

Suggestions

Consolidate the Template Assets section with the workflow steps (describe each template once, where it is used) and drop the redundant Example Usage walkthrough or reduce it to inputs and outputs only, cutting roughly a third of the body.

Trim generic Best Practices advice ('Be systematic', 'Ensure MVP scope is realistic') down to the non-obvious items, e.g. 'use specific values (hex codes, px sizes) not generic descriptions' and 'preserve intermediate outputs for iteration'.

Add lightweight validation checkpoints: confirm the design-system output covers all template sections before composing the final prompt, and verify the React environment (or record the setup result) before starting Step 6 implementation.

DimensionReasoningScore

Conciseness

The body is mostly efficient but carries clear redundancy: the Template Assets section re-describes template contents already summarized in the workflow steps, the Example Usage section restates the entire six-step workflow, and Best Practices/Notes include generic advice ('Be systematic', 'Ensure MVP scope is realistic') that could be trimmed. Not anchor-2 verbose, but more than the 'minor instances that could be trimmed' of anchor 4.

3 / 5

Actionability

Guidance is largely executable: concrete template paths (assets/design-system.md), explicit save locations with naming conventions and timestamps, executable bash for the React environment check and setup, and explicit subagent dispatch per step. Minor gaps remain — 'Attach reference images to the subagent context' and Step 6 defer implementation mechanics without exact commands or examples.

4 / 5

Workflow Clarity

Six steps are clearly sequenced, each with inputs, outputs, and save paths, plus conditional logic ('If PRD already exists, skip Step 3') and an Example Usage walkthrough. Minor validation gaps: no checkpoint verifying the design-system output is complete before composition or confirming the React environment setup succeeded, though this generative workflow is not destructive/batch so no lower cap applies.

4 / 5

Progressive Disclosure

The three bundle files (assets/design-system.md, assets/app-overview-generator.md, assets/vibe-design-template.md) all exist, are referenced by path, and are one level deep, with a dedicated Template Assets navigation section. Minor gaps come from inlined template-content descriptions duplicating the actual asset files and some organizational redundancy across sections.

4 / 5

Total

15

/

20

Passed

Description

78%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 strong description with an explicit 'Use when...' trigger clause and concrete, natural terminology. Its main limitation is that it names only two specific capabilities rather than a comprehensive action list, and a few natural synonyms are absent.

DimensionReasoningScore

Specificity

Names the domain ('reference UI images') and exactly two concrete actions ('Extract design systems', 'generate implementation-ready UI design prompts'), matching the 1-2-actions anchor; it does not list several specific actions with minor coverage gaps, so it falls below anchor 4.

3 / 5

Completeness

Explicitly answers both 'what' (extract design systems from reference UI images; generate implementation-ready UI design prompts) and 'when' with a concrete 'Use when...' clause listing three trigger conditions (provide UI screenshots/mockups, want consistent designs or design systems, build MVP UIs matching reference aesthetics).

5 / 5

Trigger Term Quality

Includes natural phrases users would say — 'UI screenshots', 'mockups', 'design systems', 'MVP UIs' — with good keyword coverage, though common synonyms like 'style guide', 'design tokens', or 'match this design/look' are missing.

4 / 5

Distinctiveness Conflict Risk

The image-to-design-system-to-UI-prompt pipeline is a clear niche with distinct triggers (screenshots, mockups, design system extraction), but phrases like 'create consistent designs' leave minor overlap risk with general design or brand-style skills.

4 / 5

Total

16

/

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
daymade/claude-code-skills
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.