ui-designer
tessl i github:daymade/claude-code-skills --skill ui-designerExtract 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.
Validation
88%| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
Total | 14 / 16 Passed | |
Implementation
63%This skill provides a well-structured workflow for UI design extraction with clear step sequencing and good organization. However, it suffers from moderate verbosity in template descriptions and lacks concrete executable examples for the core Task tool invocations. The workflow clarity is strong, but actionability could be improved with actual code/prompt examples.
Suggestions
Add a concrete example of Task tool invocation with actual prompt content rather than just describing what the prompt template contains
Remove the inline template asset descriptions (lines 80-105) since they duplicate information that should live in the referenced files
Include an example of the expected design system output format to make the extraction step more actionable
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is reasonably efficient but includes some unnecessary explanations (e.g., 'This is a high freedom workflow—adapt steps based on context') and could be tightened. The template asset descriptions repeat information that could be inferred from filenames. | 2 / 3 |
Actionability | Provides clear workflow steps and some concrete commands (bash examples for React setup), but lacks executable code for the core functionality. The Task tool usage is described abstractly rather than with concrete invocation examples. | 2 / 3 |
Workflow Clarity | Excellent multi-step workflow with clear sequencing (Steps 1-6), explicit checkpoints (verify React environment), and conditional logic (skip Step 3 if PRD exists). Each step has clear inputs, outputs, and save locations. | 3 / 3 |
Progressive Disclosure | References external template assets appropriately but then re-describes their contents inline, creating redundancy. The structure is good with clear sections, but the template descriptions could be moved entirely to the referenced files. | 2 / 3 |
Total | 9 / 12 Passed |
Activation
100%This is a well-crafted skill description that clearly articulates specific capabilities (extracting design systems, generating UI prompts) and provides explicit trigger conditions with natural user language. The description effectively distinguishes itself from generic design or coding skills by focusing on the specific workflow of analyzing reference images to produce design systems and implementation prompts.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Extract design systems', 'generate implementation-ready UI design prompts', 'create consistent designs', 'generate design systems', 'build MVP UIs'. Uses third person voice correctly. | 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 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 | Clear niche focused on extracting design systems from UI images and generating design prompts. The combination of 'reference UI images', 'design systems', and 'implementation-ready prompts' creates a distinct trigger profile unlikely to conflict with general coding or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
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.