How does it handle dark mode?

The analysis process specifically scans for and documents dark mode variants and color mappings if they are present in the provided reference images.

Can I use this skill with any image format?

Yes, as long as Claude can process the image, it can analyze screenshots or mockups in standard formats like PNG, JPG, or WEBP.

Do I need a PRD already prepared?

No, the skill includes a collaborative step to generate an MVP PRD from your project ideas and visual references if you don't have one yet.

Where are the design documents saved?

All outputs, including the design system markdown, PRDs, and implementation prompts, are saved within a structured 'documents/' directory in your repository.

Does it support frameworks other than React?

The current workflow is optimized for React and Tailwind CSS, but the extracted design system documentation can be used as a reference for any frontend framework.

UI Designer

Name: UI Designer
Author: daymade

bydaymade

•

108

•

Design Tools

Extracts design systems from reference images and generates implementation-ready UI code for React applications.

The UI Designer skill streamlines the path from visual inspiration to functional code by analyzing screenshots or mockups to extract comprehensive design systems, including color palettes, typography, and spacing. It automates the creation of structured design documentation and PRDs, ultimately generating high-fidelity React components that match the reference aesthetics. This skill is ideal for developers who need to bridge the gap between visual references and production-ready frontend implementation while maintaining design consistency.

Key Features

01Implementation-Ready Prompts: Produces optimized prompts for generating production React code.

02Design System Documentation: Automatically generates structured markdown design guides.

03Interactive PRD Generation: Creates product requirement documents aligned with design goals.

04React Environment Setup: Automates the verification and initialization of Tailwind-based projects.

05108 GitHub stars

06Visual Pattern Extraction: Identifies colors, fonts, and spacing from screenshots.

Use Cases

01Translating visual mockups into a consistent frontend design system.

02Generating multiple UI variations while maintaining specific aesthetic principles.

03Rapidly prototyping MVP UIs based on existing design references.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add daymade/claude-code-skills ui-designer

For use in Claude.ai and ChatGPT

Download Skill