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

68%

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

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

The content provides a clear, mostly actionable multi-step workflow with real supporting bundle files, but it is held back by repeated explanations, missing validation checkpoints for batch file generation, and inline duplication of template details that belong in the referenced assets.

Suggestions

Add explicit validation/verification checkpoints (e.g., confirm the design-system markdown covers all template sections before proceeding to Step 3) to support the batch file-generation operations.

Replace inline Template Assets descriptions with concise links to the asset files (e.g., assets/design-system.md) and remove the bullet duplication between Step 2 and the Template Assets section to improve conciseness and progressive disclosure.

Trim the "Best Practices" section to only guidance not already stated in the workflow steps, reducing token overhead.

Dimension	Reasoning	Score
Conciseness	The workflow prose is mostly efficient, but the "Template Assets" section repeats the analysis bullets already listed in Step 2 and "Best Practices" restates earlier guidance, adding padding that could be trimmed.	3 / 5
Actionability	Concrete file paths, prompt template references, save destinations, and bash commands make the guidance mostly executable, with only minor gaps (no executable code for the core extraction step itself).	4 / 5
Workflow Clarity	A clear 6-step sequence exists, but the skill performs batch file-generation operations with no validation or verification checkpoints, which per the rubric caps workflow clarity at 3.	3 / 5
Progressive Disclosure	Bundle files (assets/design-system.md, app-overview-generator.md, vibe-design-template.md) are referenced as plain paths rather than navigable links, and their contents are summarized inline in the body instead of being pointed to cleanly.	3 / 5
	Total	13 / 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.

The description clearly communicates both purpose and trigger conditions with concrete natural-language phrases, scoring well on completeness and distinctiveness. It is slightly held back by moderate action coverage and a few missing trigger synonyms.

Dimension	Reasoning	Score
Specificity	Names the domain and two concrete actions ("Extract design systems from reference UI images" and "generate implementation-ready UI design prompts") but coverage is not comprehensive, leaving sub-tasks like color/typography extraction unstated in the description.	3 / 5
Completeness	Explicitly answers what (extract design systems, generate UI design prompts) and when with a concrete "Use when..." clause listing multiple trigger conditions.	5 / 5
Trigger Term Quality	Strong natural terms ("UI screenshots/mockups", "consistent designs", "design systems", "MVP UIs", "reference aesthetics") but missing common synonyms and file extensions, so a few natural phrases are absent.	4 / 5
Distinctiveness Conflict Risk	Clear niche of design-system extraction from images with distinct triggers; minor overlap risk with general UI-generation skills keeps it just below a 5.	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: 59c5fc4

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.