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.
Install with Tessl CLI
npx tessl i github:fernandezbaptiste/claude-code-skills --skill ui-designer88
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
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 well-crafted skill description that excels across all dimensions. It uses third person voice, provides specific concrete actions, includes natural trigger terms users would actually say, and has an explicit 'Use when' clause with clear trigger conditions. The description carves out a distinct niche that minimizes conflict with other potential skills.
| 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, generate UI design prompts) AND when (explicit 'Use when' clause with triggers: users provide screenshots/mockups, want consistent designs, generate design systems, or build MVP UIs). | 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 seeking this functionality would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche combining UI image analysis with design system extraction and prompt generation. The specific focus on 'reference UI images' and 'implementation-ready prompts' distinguishes it from general image analysis or generic design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
70%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill demonstrates strong workflow organization with clear multi-step sequencing and good progressive disclosure through external template references. However, it could be more concise by removing explanatory padding and more actionable by providing concrete Task tool invocation examples rather than abstract descriptions of what to provide to subagents.
Suggestions
Add a concrete example of Task tool invocation syntax showing exactly how to call the subagent with the design-system.md template and attached images
Remove redundant explanations like 'This is a high freedom workflow' and the detailed template asset descriptions that duplicate what the templates themselves contain
Replace vague instructions like 'providing: Prompt template from assets/design-system.md' with actual code/command showing the invocation pattern
| 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 for React setup), but lacks executable code examples for the core Task tool usage. The 'Prompt template from assets/...' instructions are vague about exact invocation patterns. | 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 | Well-structured with clear overview, detailed workflow steps, separate template asset descriptions, and best practices. References to external template files (assets/*.md) are one level deep and clearly signaled with purpose descriptions. | 3 / 3 |
Total | 10 / 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.
- 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.