UI Designer Skill: Extract a Design System from Screenshots

What is the ui-designer skill?

The ui-designer skill starts from pictures. You point it at a folder of UI screenshots or mockups, and it works backward to the rules behind them: the palette, type, components and spacing that make the references feel consistent.

The skill lives in the ui-designer folder of daymade's skills marketplace repository, a collection of production oriented skills for development workflows, and it installs from there as its own standalone plugin.

The six step workflow

1. Gather inputs: a reference images directory, a project idea file, and optionally an existing PRD.
2. Extract a design system from the images using the design-system template.
3. Generate an MVP PRD if one was not supplied, refining it with you.
4. Compose the final UI implementation prompt from the design system and the PRD.
5. Check the project for React and tell you what to set up if it is missing.
6. Implement the screens from the composed prompt.

What lands on disk

• The design system goes to documents/designs, named after the image directory.
• The PRD can be saved to documents/prd.
• The final prompt goes to documents/ux-design with a timestamp in the file name, so each version is kept.
• The code output is separate React page components with a showcase page that gathers them: three variations for mobile, two for web.

Who the ui-designer skill is for

Best for

• Matching the look of a product you admire when you have screenshots of it and a new idea to build.
• Producing a written design system from visuals, with hex codes and pixel sizes rather than loose adjectives.
• Getting several UI options at once for a screen before choosing one.

Not for

• Projects that are not React. Step five checks for React and suggests a create-react-app setup with Tailwind and lucide-react.
• Starting without images. The skill depends on reference screenshots, so for another route into a page, see landing-page-design.
• Pixel exact conversion of one screen. The skill looks for patterns across several images to guide new designs.

Use it with UiChemy

The skill ends in React components, not WordPress. To land a chosen variation on a site, bring the build to UiChemy AI to WordPress, or edit it in Composer inside Elementor or Gutenberg. Related: image to code. Click Get Started on uichemy.com.

How to install UI Designer Skill: Extract a Design System from Screenshots

claude plugin install ui-designer@daymade-skills

1. Add the marketplace

   In Claude Code, run /plugin marketplace add daymade/claude-code-skills. From a terminal, the README gives claude plugin marketplace add https://github.com/daymade/claude-code-skills.

2. Install the plugin

   Run claude plugin install ui-designer@daymade-skills in a terminal. The marketplace name is daymade-skills, and the README warns that the repository path will not work as the name.

3. Prepare your inputs

   Put the reference screenshots in one folder and write a short project idea file describing the product and its goals.

4. Run the workflow

   Ask the agent to extract a design system from the folder and build a design prompt. The skill will ask for the images directory and idea file if you did not give them.

Check that it loaded

Give it a folder of screenshots and an idea file. It should save a design system file under documents/designs, then walk through the PRD and the final prompt before checking for React.

Read the official instructions on GitHub

Key features

• Image to design systemA subagent reads the reference images and documents primary, secondary, accent and functional colors, plus backgrounds, using the design-system template.
• Typography captureThe template records font families, sizes, weights and line heights, so type choices are written down as specific values.
• Component stylesButtons, cards, inputs and icons are described, including hover and disabled variants where the references show them.
• Spacing and motionThe template covers a spacing scale from 4dp to 48dp, and animation durations and easing curves noted from the references.
• Dark mode variantsIf the reference screens include a dark theme, the design system document captures it as well.
• Interactive PRD generationA second template covers the elevator pitch, problem statement, target audience, unique selling point, platforms, features with user stories, and UX notes per screen.
• Final prompt templateThe vibe-design template merges the design system and PRD into one prompt with aesthetic principles, Tailwind and Lucide requirements, and task specifications.
• Multiple variationsThe composed prompt asks for three mobile or two web variations, organized as page components and gathered on a showcase page.
• Intermediate files keptOutputs are saved under a documents folder and preserved between steps, so you can edit the design system and re-run later steps.

Frequently asked questions