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.

Quality

85%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Evaluation results

100%

Formalise Visual Design Notes into a Design System

Design system file output format

Criteria

Without context

With context

Correct save path

41%

100%

Filename includes source name

100%

Color section present

100%

Hex codes used

100%

Typography section present

100%

Pixel sizes used

100%

Component styles section

100%

Component numeric values

100%

Spacing system section

100%

Animations section present

100%

Dark mode section present

100%

No generic descriptions

100%

12%

Compose Implementation-Ready UI Prompt from Design System and PRD

Final UI prompt composition and saving

Criteria

Without context

With context

Saved in documents/ux-design/

100%

Filename includes idea name

100%

Filename includes timestamp

100%

Design system content included

100%

PRD content included

100%

Output in documents/

100%

Prompt is self-contained

100%

Design guidelines section present

100%

Product overview section present

100%

Implementation tasks section present

100%

10%

Build React UI Variations for a Habit Tracker App

React UI implementation with variations

Criteria

Without context

With context

Tailwind CSS used

100%

Lucide React icons used

100%

3 mobile variations

100%

2 web variations

100%

Component file structure

100%

iPhone frame for mobile

100%

No scrollbars on mobile

100%

Showcase page aggregates all

100%

index.html present

100%

index.html hooks App.js

100%

Solution descriptions present

100%

Repository: fernandezbaptiste/claude-code-skills
Commit: 4f0eae8

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Formalise Visual Design Notes into a Design System Compose Implementation-Ready UI Prompt from Design System and PRD Build React UI Variations for a Habit Tracker App

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.