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.
80
75%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./ui-designer/SKILL.mdQuality
Discovery
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 addresses both what the skill does and when to use it. The niche of extracting design systems from UI images and generating implementation-ready prompts is well-defined and distinctive. The description uses proper third-person voice and is concise without being vague.
| Dimension | Reasoning | Score |
|---|---|---|
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 keywords users would say: 'UI screenshots', 'mockups', 'design systems', 'MVP UIs', 'reference aesthetics', 'consistent designs'. Good coverage of terms a user working with UI design would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Occupies a clear niche at the intersection of UI image analysis and design system extraction/prompt generation. The specific focus on extracting design systems from reference images and generating design prompts is distinct and unlikely to conflict with general image analysis or generic UI development skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a reasonable multi-step workflow for extracting design systems from UI images, with clear sequencing and good use of external template references. However, it suffers from redundant descriptions of template contents, lacks validation checkpoints between critical steps (design system extraction, PRD generation, prompt composition), and the core actionable guidance is abstract since it depends on unseen template files rather than providing concrete executable examples.
Suggestions
Add explicit validation checkpoints after Steps 2, 3, and 4 (e.g., verify design system covers all required sections, confirm PRD completeness with user before proceeding, validate final prompt structure before implementation).
Remove or significantly condense the 'Template Assets' section since it redundantly describes templates already referenced in the workflow steps—a single line per template with a file link would suffice.
Show a concrete example of the Task tool invocation with actual prompt content rather than just describing it abstractly, so Claude knows exactly how to call the subagent.
Trim the 'Best Practices' and 'Notes' sections which largely restate guidance already implicit in the workflow steps, or integrate the most critical points directly into the relevant workflow steps.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill includes some unnecessary sections like 'Best Practices' that largely restate what's already in the workflow, and the 'Template Assets' section redundantly describes templates already referenced in the workflow steps. The 'When to Use' section and 'Notes' add moderate padding. However, it's not egregiously verbose. | 2 / 3 |
Actionability | The workflow provides concrete steps and file paths, and includes one executable bash snippet for React setup. However, the core operations rely on template files (assets/*.md) whose actual content is only summarized rather than shown, and the Task tool invocations are described abstractly rather than with concrete examples of the actual prompts or tool calls. The substitution variables use Chinese placeholders without showing exact syntax. | 2 / 3 |
Workflow Clarity | The 6-step workflow is clearly sequenced with numbered steps and conditional logic (skip Step 3 if PRD exists, check React environment). However, there are no validation checkpoints—no step verifies the quality of the extracted design system, no validation that the PRD is complete before proceeding, and no verification that the final composed prompt is well-formed before implementation. For a multi-step workflow involving subagent delegation and file generation, this is a notable gap. | 2 / 3 |
Progressive Disclosure | The skill references external template assets (assets/design-system.md, assets/app-overview-generator.md, assets/vibe-design-template.md) which is good progressive disclosure, but then redundantly summarizes their contents in the 'Template Assets' section. The main content is somewhat monolithic with Best Practices, Example Usage, and Notes sections that could be trimmed or restructured. | 2 / 3 |
Total | 8 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- fernandezbaptiste/claude-code-skills
- Commit
4f0eae8
- 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.