design-system-builder

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

71%

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 ./skills/design-system-builder/SKILL.md

The canonical home for this skill is ui-designer in daymade/claude-code-skills

Quality

Content

65%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.

A well-structured skill with excellent progressive disclosure and largely actionable guidance, but the body is padded with redundant restatements and the workflow lacks validation checkpoints on its generated artifacts. Trimming the duplicated sections and adding output-verification steps would lift it substantially.

Suggestions

Add validation checkpoints after generative steps, e.g. after Step 2 verify the design system covers every template section (colors, typography, components, spacing, animations, dark mode) before composing the final prompt.

Cut redundant sections: 'When to Use' duplicates the description, and 'Example Usage' restates the workflow — replace with a short concrete input/output example only.

Trim the 'Template Assets' section to one-line pointers to the asset files instead of re-describing their contents, which are readable on demand.

Dimension	Reasoning	Score
Conciseness	The body is mostly on-task but carries several redundant sections: 'When to Use' duplicates the frontmatter description, 'Template Assets' re-describes content already in the asset files, 'Example Usage' restates the workflow steps, and 'Notes' repeats 'Preserve all intermediate outputs' from Output Organization. It is above anchor 2 because no space is spent explaining concepts Claude already knows.	3 / 5
Actionability	Most guidance is executable: concrete bash commands for the React environment check and setup, explicit save paths, template substitutions ('{项目设计指南}' → Design system from Step 2), and named template files per step. Minor gaps keep it below anchor 5, e.g. 'Interact with user to refine and clarify product requirements' and Step 6's 'implement UI in React project' are high-level.	4 / 5
Workflow Clarity	The 6-step sequence is clearly ordered with per-step inputs and outputs, plus conditionals (skip Step 3 if a PRD exists; check React environment). However, checkpoints are missing or implicit — nothing validates the generated design system, the refined PRD, or the final composed prompt before proceeding. It is above anchor 2 because the sequence itself is coherent and complete.	3 / 5
Progressive Disclosure	SKILL.md serves as a clear overview with three real, one-level-deep asset templates (design-system.md, app-overview-generator.md, vibe-design-template.md), each referenced at the exact workflow step where it is needed and summarized under 'Template Assets' for navigation. The templates' contents match what the body claims, and nothing belongs inlined that is not.	5 / 5
	Total	15 / 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.

A strong description that clearly and explicitly states both what the skill does and when to use it, with natural trigger terms. The main gap is moderate specificity — it names two high-level actions without enumerating the concrete extraction capabilities.

Dimension	Reasoning	Score
Specificity	The description names the domain and two concrete actions ('Extract design systems from reference UI images and generate implementation-ready UI design prompts') but stops short of the several-action coverage of anchor 4; it does not enumerate sub-capabilities like color palette or typography extraction. It is clearly above anchor 2 because the actions are specific rather than generic.	3 / 5
Completeness	Both questions are answered explicitly: the what ('Extract design systems from reference UI images and generate implementation-ready UI design prompts') and the when ('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	Natural phrases users would say are present ('UI screenshots/mockups', 'design systems', 'build MVP UIs', 'matching reference aesthetics'), giving good keyword coverage. It falls short of anchor 5 because common synonyms such as 'style guide', 'design tokens', or 'wireframes' are missing.	4 / 5
Distinctiveness Conflict Risk	The reference-image-to-design-system niche is distinct with clear triggers, but it has minor overlap risk with general UI-design or design-system documentation skills. It is above anchor 3 because the trigger conditions (reference screenshots/mockups) are specific, but below anchor 5 due to that residual overlap.	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: zebbern/claude-code-guide
Path: skills/design-system-builder/SKILL.md
Commit: a2e6ee3

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