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.

59

Quality

67%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./ui-designer/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

35%

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

The skill provides a reasonable multi-step workflow structure for extracting design systems from UI images, but suffers from significant verbosity—redundantly describing template contents, including generic best practices, and padding with advice Claude doesn't need. Actionability is hampered by missing bundle files for the three critical templates, and the workflow lacks validation checkpoints between steps.

Suggestions

Remove the 'Template Assets' section entirely since it redundantly describes what the workflow steps already cover, or replace it with just file path references

Add validation checkpoints after Steps 2, 3, and 4 (e.g., verify design system covers all required sections, confirm PRD scope with user before proceeding, validate final prompt completeness)

Trim 'Best Practices' and 'Notes' sections to only non-obvious, skill-specific guidance—remove generic advice like 'Be systematic' and 'Engage user interactively'

Include the actual template asset files in the bundle so the skill's core instructions are executable, or provide concrete inline examples of Task tool invocations with expected inputs/outputs

DimensionReasoningScore

Conciseness

The skill is very verbose, with extensive sections that describe what templates contain rather than providing actionable content. The 'Template Assets' section redundantly summarizes what was already described in the workflow steps. 'Best Practices' and 'Notes' sections contain generic advice Claude already knows (e.g., 'Be systematic', 'Engage user interactively'). The content could be cut by 40-50% without losing information.

1 / 3

Actionability

The workflow provides a clear sequence with specific file paths and template substitution variables, and includes one concrete bash snippet for React setup. However, the core operations rely on template files (assets/design-system.md, assets/app-overview-generator.md, assets/vibe-design-template.md) that are not provided in the bundle, making the instructions incomplete. The Task tool usage is described abstractly rather than with concrete invocation examples.

2 / 3

Workflow Clarity

The 6-step workflow is clearly sequenced with numbered steps and conditional logic (skip Step 3 if PRD exists). However, there are no validation checkpoints—no step verifies the design system extraction quality, PRD completeness, or final prompt correctness before proceeding. For a multi-step workflow involving subagent delegation and file generation, missing validation caps this at 2.

2 / 3

Progressive Disclosure

The skill references three template assets (design-system.md, app-overview-generator.md, vibe-design-template.md) which is good progressive disclosure structure, but none of these bundle files are actually provided. The 'Template Assets' section then redundantly summarizes their contents inline rather than letting the files speak for themselves. The skill also includes lengthy best practices and notes sections that could be trimmed or separated.

2 / 3

Total

7

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong description that clearly communicates specific capabilities, includes natural trigger terms, and explicitly states both what the skill does and when to use it. The description carves out a distinct niche at the intersection of UI image analysis and design system generation, making it easy to distinguish from other skills.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: 'Extract design systems from reference UI images' and 'generate implementation-ready UI design prompts'. These are clear, actionable capabilities.

3 / 3

Completeness

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

3 / 3

Trigger Term Quality

Includes strong natural trigger terms users would say: 'UI screenshots', 'mockups', 'design systems', 'MVP UIs', 'reference aesthetics', 'consistent designs'. Good coverage of variations a user might use.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche combining UI image analysis with design system extraction and prompt generation. The specific focus on reference images → design systems → implementation-ready prompts is distinctive and unlikely to conflict with general UI or image skills.

3 / 3

Total

12

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
fernandezbaptiste/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.