makeui.dev

Getting Started

Last updated: November 22, 2025

Welcome to makeui.dev

makeui.dev is a design extraction tool that analyzes visual references and automatically generates comprehensive, AI-consumable style guides. In just a few clicks, you can transform screenshots, URLs, or Figma files into structured design systems.

What You'll Learn

This guide covers:

  • What design systems are and why they matter
  • How to use makeui.dev in 3 simple steps
  • What to expect from the results

5-Minute Quick Start

Step 1: Prepare Your Reference

Gather 1-3 visual references of the design you want to extract:

  • Figma file: Direct link to your design file
  • Website: URL of a live website
  • Screenshots: PNG, JPG, or WebP images

Step 2: Create a Project

  1. Go to the home page
  2. Enter a brief description (e.g., "Stripe-like fintech design with blue accents")
  3. Add your references using the "Add Context" button
  4. Click "Generate"

Step 3: Get Your Design System

AI will analyze your references and generate:

  • Color Palette: Extracted colors with semantic meanings
  • Typography: Font families, sizes, weights, and line heights
  • Spacing: Grid system and spacing scale
  • Components: UI patterns and their properties
  • Export Options: JSON, CSS, Figma, and more

Key Concepts

Design System

A design system is a comprehensive collection of design decisions, components, and guidelines that ensure visual consistency across your product.

References

Visual examples your design is based on. More diverse references = better results.

Extraction

The AI analysis process that identifies colors, typography, spacing, and components from your references.

Tips for Best Results

✓ Use clear images: High-quality screenshots work best ✓ Provide multiple references: 2-3 examples give better results than 1 ✓ Mix UI types: Include buttons, cards, forms, navigation ✓ Describe your goal: Be specific in the prompt

✗ Avoid blurry images: Low resolution impacts extraction accuracy ✗ Don't mix unrelated designs: Keep references visually cohesive

What's Next?

Ready to dive deeper? Check out:

Questions? Check out our Support page or explore our Guides.