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

Optimize this skill with Tessl

npx tessl skill review --optimize ./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 well-structured multi-step workflow for extracting design systems from UI images, with clear sequencing and file organization conventions. However, it suffers from significant verbosity—redundantly describing template contents, including generic best practices Claude already knows, and explaining concepts rather than providing executable specifics. The lack of validation checkpoints in a complex multi-step workflow involving subagent delegation is a notable gap.

Suggestions

Remove the 'Template Assets' section entirely or reduce it to a simple file listing—the workflow steps already describe how each template is used, making the summaries redundant.

Cut the 'Best Practices' section drastically; most items are generic advice Claude already knows (e.g., 'Be systematic', 'Engage user interactively'). Keep only project-specific constraints.

Add explicit validation checkpoints after Steps 2, 3, and 4—e.g., verify design system covers all required sections, confirm PRD with user before proceeding, validate final prompt has all substitutions completed.

Make Step 2 more actionable by showing the exact Task tool invocation pattern with a concrete example of how to attach images and reference the template, rather than describing it abstractly.

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 each template file. '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 steps provide a reasonable structure with specific file paths and tool usage patterns, and Step 5 includes executable bash commands. However, most steps describe what to do abstractly ('Use Task tool with general-purpose subagent, providing...') rather than giving concrete, copy-paste-ready examples. The template substitution instructions reference variables but don't show actual content or format.

2 / 3

Workflow Clarity

The 6-step workflow is clearly sequenced with logical dependencies (Step 3 conditional on existing PRD, Step 4 combines outputs of Steps 2-3). 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, validation/feedback loops are notably absent.

2 / 3

Progressive Disclosure

The skill references three template assets in `assets/` and describes their contents, which is good structure. However, no bundle files were provided, so we can't verify the references resolve. The 'Template Assets' section inlines summaries of each file that are redundant with the workflow steps, and the 'Best Practices' section contains content that could be trimmed or moved to a separate reference file rather than bloating the main skill.

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 what the skill does and when to use it. It uses third person voice, includes specific concrete actions, provides natural trigger terms, and has an explicit 'Use when' clause with well-defined scenarios. The description is concise yet comprehensive, occupying a distinct niche.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: 'Extract design systems from reference UI images', 'generate implementation-ready UI design prompts', 'create consistent designs', 'generate design systems', 'build MVP UIs matching reference aesthetics'.

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 keywords users would say: 'UI screenshots', 'mockups', 'design systems', 'MVP UIs', 'reference aesthetics', 'design prompts'. These cover common variations of how users would describe this need.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche combining UI image analysis with design system extraction and prompt generation. The specific focus on extracting design systems from reference images and generating 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
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.