CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

70

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

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

SKILL.md
Quality
Evals
Security

Quality

Content

72%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

Well-organized, actionable, and properly structured around real bundle assets, but weakened by redundancy across the workflow and template sections and by missing validation checkpoints in the multi-step pipeline.

Suggestions

Collapse the per-asset bullet lists duplicated in Step 2/3 and the "Template Assets" section into a single canonical description to remove the repeated content.

Add a validation/feedback checkpoint after Step 2 (verify the extracted design system covers palette/typography/spacing) and after Step 6 (confirm generated variations match the design system before finalizing).

DimensionReasoningScore

Conciseness

The body restates template contents in Step 2 and again in the "Template Assets" section, and the "Example Usage" re-runs the whole workflow — mostly efficient but with notable redundancy that could be tightened.

2 / 3

Actionability

Provides copy-paste-ready bash (npx create-react-app, npm install) and specific output paths and asset substitutions, giving concrete executable guidance rather than abstract direction.

3 / 3

Workflow Clarity

Steps 1–6 are clearly sequenced and Step 5 is an environment checkpoint, but the core extract/generate operations lack validation or feedback loops to confirm the design system or UI output is correct.

2 / 3

Progressive Disclosure

Body is an organized overview that signals one-level-deep references to assets/design-system.md, assets/app-overview-generator.md, and assets/vibe-design-template.md, all verified to exist, with clear section navigation.

3 / 3

Total

10

/

12

Passed

Description

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.

A strong, third-person description with concrete actions, an explicit "Use when" clause, and natural trigger terms. It clearly distinguishes the skill's niche with minimal fluff.

DimensionReasoningScore

Specificity

Lists concrete actions — "Extract design systems from reference UI images" and "generate implementation-ready UI design prompts" — rather than vague abstractions, matching the multi-action anchor.

3 / 3

Completeness

Explicitly states what it does and includes a clear "Use when..." clause with multiple trigger conditions, answering both what and when.

3 / 3

Trigger Term Quality

Covers natural user phrasing such as "UI screenshots/mockups", "design systems", "consistent designs", and "MVP UIs matching reference aesthetics", terms a user would plausibly say.

3 / 3

Distinctiveness Conflict Risk

The niche — extracting design systems from reference UI images to drive UI prompts — is distinct and tied to specific triggers, making conflict with unrelated skills unlikely.

3 / 3

Total

12

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
zebbern/claude-code-guide
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.