1

Identity

2

Audience

3

Voice

4

References

5

Visuals

6

Layout

7

Assets

8

Generate

Logo & Identity

Upload your brand mark and define the core identity of your project.

Drag and drop your logo file, or click to browse. SVG, PNG, or JPG.

Drop your logo here or browse

Are you building a marketing/portfolio site (Brand) or a functional app/dashboard (Product)?

Audience & Goals

Define who will use this and what they need to accomplish.

Describe the specific demographic or user base. The more specific, the better the AI can tailor the design.

When a user lands here, what is the single most important action they need to take?

What other actions should the design support?

Any specific accessibility standards or considerations?

Voice & Vibe

What emotional tone should the design convey? Select all that apply, then add nuance.

Describe the feeling in your own words. Think about how users should feel when they interact with the interface.

If your brand were a person, how would you describe them?

Design References

Help us understand your taste. What do you love, and what do you want to avoid?

2-3 existing apps or websites that capture the vibe you want. Include URLs if possible and note what you like about each.

What design tropes, websites, or styles do you absolutely hate? Be specific about what you dislike.

Visual System

Define the foundational visual building blocks — colors, typography, and shape language.

Any specific colors to use or avoid? Tinted neutrals vs pure grays? Existing brand colors?

Any specific fonts, font families, or typographic styles? What to avoid?

Any specific UI libraries, icon sets, or design systems to use or avoid?

Layout & Density

How much information should be visible at once, and how should it be organized?

Should the interface be airy and minimal, or dense and data-rich?

Which screen size is the primary design target?

Any specific layout patterns? Sidebar navigation? Top bar? Grid system preferences?

Motion & Assets

Define how the interface moves and what visual assets drive the experience.

How should the interface feel when interacting with it?

What visual assets will drive the design's visual interest?

Review & Generate

Review your inputs and generate your design system files.

1

Overview

2

Scope

3

Market

4

Timeline

5

Content

6

Generate

Project Overview

Start with the big picture. What is this project and why does it exist?

Describe the project in one compelling sentence.

A fuller overview of the project — its purpose, context, and background.

What pain point does this project address? Why is it needed now?

Scope & Features

Define what the project includes — the pages, features, and platforms.

List the main pages or screens that need to be designed and built.

Core features that are absolutely required for launch.

Features that would be great but aren't critical for v1.

Describe the most important user journeys through the product.

Audience & Market

Who is this for, and who are you competing with?

Describe your ideal users — their demographics, technical literacy, and expectations.

Who are you competing with? What alternatives do users currently use?

What makes your project different from the competition?

Any market trends, industry context, or timing considerations?

Timeline & Resources

Set expectations for when, how much, and with what technology.

Any important dates or phases?

Any preferred frameworks, languages, hosting, or infrastructure?

Any hard constraints like browser support, performance requirements, or compliance?

Who is working on this project?

Content & Success

Define what success looks like and what content you have ready.

What do you already have? Brand guidelines, logos, copy, photography, wireframes?

How will content be created and managed? CMS? Who writes copy?

How will you measure if this project is successful?

What analytics or tracking tools should be integrated?

Anything else the AI should know about this project?

Review & Generate

Review your brief and generate the file.

1

Type

2

Audience

3

Vibe

4

Colors

5

Shape

6

Feel

7

Generate

What are you building?

Pick the type and industry — no typing required.

Who is it for?

Dial in your audience using the sliders and selectors below.

Young (18–25)Adult (25–40)Mature (40–60)Senior (60+)
BeginnerCasualComfortablePower UserDeveloper

What's the vibe?

Pick the emotional tones that match your vision. Select as many as you like.

Very CasualCasualNeutralFormalVery Formal
SeriousBalancedWitty

Pick your palette

Choose a color mode, tune the temperature & saturation, and pick an accent color.

❄️ CoolNeutral🔥 Warm
MutedBalancedVibrant

Shape & Layout

Define the physical shape language and spatial density of your interface.

MinimalBalancedDense

Feel & Finish

How should the interface move, read, and present visual content?

⚡ SnappyBalanced🌊 Fluid
SimpleModerateRich

Review & Generate

Here's a summary of your design direction. Download your file below.

AI Prompt Builder

Combine your design system with 21st.dev components into a ready-to-paste AI prompt.

Design System

Optional

Upload your design.md to override the default design constraints, or leave blank to use the built-in premium dark theme rules.

Drop design.md here or browse

What Are We Building?

Describe the goal for how the components should be combined. Be specific about layout order and purpose.

Components

Browse 21st.dev ↗

Paste component code from 21st.dev. Give each a descriptive name. Add as many as you need.

Files downloaded successfully!