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.

Quality

70%

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

Quality

Content

61%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 is a well-structured, actionable workflow that points cleanly to real template assets. Its weaknesses are some redundancy between the workflow and the Template Assets section, and the absence of explicit validation checkpoints in a multi-step generation process.

Suggestions

Add explicit validation/verification steps (e.g. confirm the design-system file was written and contains all template sections before proceeding to PRD composition) to raise workflow clarity.

Trim the 'Template Assets' section or the 'Notes' section, which restate content already conveyed in the workflow steps, to improve conciseness.

Make Step 6 (Implement UI) more concrete with how the composed prompt is applied (e.g. file targets, expected component structure) rather than the current abstract instruction.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient with clear structure, but the 'Template Assets' section re-describes templates already covered in the workflow steps, and the 'Notes'/'Best Practices' sections add generic guidance that could be trimmed; it is not severely padded but could be tightened.	3 / 5
Actionability	Concrete file paths, save destinations, explicit substitution placeholders (e.g. '{项目设计指南}'), and an executable bash block for React setup provide mostly copy-paste-ready guidance, with only the final 'Implement UI' step remaining somewhat abstract.	4 / 5
Workflow Clarity	Steps 1-6 are clearly sequenced with per-step outputs and save paths, but there are no explicit validation checkpoints or feedback loops, and the multi-variation UI generation is a batch-style operation without verification.	3 / 5
Progressive Disclosure	SKILL.md acts as an overview with well-signaled, one-level-deep references to real bundle files (assets/design-system.md, assets/app-overview-generator.md, assets/vibe-design-template.md), though the inline 'Template Assets' section partially duplicates what those files contain.	4 / 5
	Total	14 / 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.

The description is strong: it answers both 'what' and 'when' explicitly with natural trigger phrases in third-person voice. Its main limitation is specificity, listing only two concrete actions rather than a comprehensive set.

Dimension	Reasoning	Score
Specificity	Names the domain ('design systems from reference UI images') and two concrete actions ('Extract design systems', 'generate implementation-ready UI design prompts'), but does not enumerate several specific actions, so it sits at the 1-2 actions anchor rather than the 'several' anchor.	3 / 5
Completeness	Explicitly states what it does ('Extract design systems from reference UI images and generate implementation-ready UI design prompts') and when to use it ('Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics'), with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural user phrases such as 'UI screenshots/mockups', 'create consistent designs', 'generate design systems', and 'build MVP UIs matching reference aesthetics'; a few common variations (e.g. 'design references', 'mockups') are covered but no file extensions are given, so not quite comprehensive.	4 / 5
Distinctiveness Conflict Risk	The reference-UI-image and design-system-extraction niche is fairly distinct with specific triggers, but there is minor overlap risk with broader design or UI-generation skills.	4 / 5
	Total	16 / 20 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: daymade/claude-code-skills
Path: ui-designer/SKILL.md
Commit: b8556f2

Reviewed: 3 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.