Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
79
70%
Does it follow best practices?
Impact
97%
1.64xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./data/skills-md/0xdesign/design-plugin/design-lab/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 skill description that clearly articulates a specific workflow (design interviews → variations → feedback → implementation plans), provides explicit trigger guidance via a 'Use when...' clause, and occupies a distinct niche. The description is concise yet comprehensive, using third-person voice throughout and including natural trigger terms users would employ when seeking UI design exploration.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'conduct design interviews', 'generate five distinct UI variations in a temporary design lab', 'collect feedback', and 'produce implementation plans'. These are clear, actionable steps. | 3 / 3 |
Completeness | Clearly answers both 'what' (conduct design interviews, generate UI variations, collect feedback, produce implementation plans) and 'when' with an explicit 'Use when...' clause covering three trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'UI design options', 'redesign existing components', 'create new UI', 'multiple approaches to compare', 'design interviews', 'UI variations'. These cover a good range of how users would phrase design exploration requests. | 3 / 3 |
Distinctiveness Conflict Risk | The description carves out a clear niche around multi-variation UI design exploration with a structured interview-and-feedback process. The mention of 'five distinct UI variations', 'temporary design lab', and 'design interviews' makes this highly distinctive and unlikely to conflict with general UI or coding skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
39%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill defines a comprehensive and well-structured multi-phase design exploration workflow with clear sequencing, decision branches, and error handling. However, it is severely over-long and verbose—explaining obvious concepts, spelling out every interview option in full, and inlining templates that should be in separate files. The references to external files (DESIGN_PRINCIPLES.md, template files) that don't exist in the bundle further weaken the progressive disclosure score.
Suggestions
Reduce content by 50-60%: remove explanations of what frameworks/libraries are, condense interview questions to a compact table format, and trust Claude to understand concepts like accessibility, CSS variables, and Tailwind configuration.
Move the interview question definitions, Design Brief JSON template, DESIGN_PLAN.md template, and DESIGN_MEMORY.md template into separate referenced files to dramatically reduce the main skill's length.
Either include the referenced bundle files (DESIGN_PRINCIPLES.md, FeedbackOverlay.tsx template) or remove references to them—currently they create broken expectations.
Replace descriptive variant generation guidelines with concrete code snippets or at minimum a single complete variant example that demonstrates the expected output quality.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~600+ lines. Extensively explains concepts Claude already knows (what Tailwind is, how CSS variables work, what accessibility means, basic framework detection). The interview questions are spelled out in exhaustive detail with option descriptions that are obvious. The Design Memory template, implementation plan template, and design brief JSON could all be dramatically condensed. | 1 / 3 |
Actionability | Provides concrete file structures, JSON schemas, and code snippets (e.g., FeedbackOverlay integration, route setup). However, much of the guidance is still descriptive rather than executable—variant generation guidelines describe what to do conceptually rather than providing concrete code templates. The feedback parsing section gives a format example but no actual parsing code. | 2 / 3 |
Workflow Clarity | The 8-phase workflow is clearly sequenced with explicit phases, sub-steps, decision branches (winner vs. synthesize), abort handling at any point, and cleanup validation. Error handling covers multiple failure modes with fallback strategies. The feedback loop (generate → review → refine → confirm) is well-defined with explicit checkpoints. | 3 / 3 |
Progressive Disclosure | Monolithic wall of text with no references to external files despite mentioning `DESIGN_PRINCIPLES.md` and `design-and-refine/templates/feedback/FeedbackOverlay.tsx` that should contain detailed content. The interview questions, templates, and variant guidelines could all be split into referenced files. No bundle files are provided to support the references made in the content. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (921 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
25d5403
Table of Contents
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.