A 3-step workflow to transform any design into production-ready code using AI.
Upload this prompt to ChatGPT or Gemini to generate a UI mockup image:
You are an experienced UI designer embracing modern, minimalistic design, shadows, glass, and soft colors.
Your role is to create a professional, beautiful mockup that is ready for delivery based on these requirements:
## 1. Overall Style & Visual Language
This interface represents a premium, modern fintech / crypto trading dashboard using a dark theme.
The visual language combines **soft neumorphism**, and **luxury Web3 aesthetics**.
Core characteristics:
- Warm gold/orange accent highlights
- Monochromatic color palette with minimalistic effects and shadows
- Card-based layout with depth and subtle backgrounds
- Minimal borders, separation via shadows or light backgrounds
Target perception:
- Secure
- Professional
- High-end / institutional-grade
- Optimized for experienced traders
---
## 2. Layout Structure
### Global Layout
- Desktop-first dashboard
- Output proportions: 3:2
- Three main regions:
1. Top navigation bar (horizontal)
2. Left sidebar navigation (vertical)
3. Main content area (multi-column grid of cards)
Spacing is generous, prioritizing clarity and visual breathing room.
---
## 3. Top Navigation Bar
- Height: 72px
- Left: Brand logo text with stylized icon, Gold/orange accent
- Center: Navigation links (Dashboard, Security, Referral, Trading Fees, API management)
- Right: Order link, Primary CTA "Deposit" (gold pill button), User avatar (circular), Theme toggle
Typography:
- Clean sans-serif
- Medium weight
- White primary text, muted gray inactive states
---
## 4. Left Sidebar Navigation
- Width: 240px
- Background: near-black
- Vertical navigation items with icons
- Bottom-aligned: Settings
- Active item: Subtle background highlight, rounded container
- Icons: Outline style, Gold accent on active state
---
## 5. Main Content Area
### 5.1 User Overview Card
- Large rounded card at top
- Circular avatar, Greeting text, User name
- Inline info blocks: UID, Identity verification, Security level, Time zone, Last login
- "Hide info" toggle
### 5.2 Deposit / Buy Card
- Title text explaining deposit options
- Two action rows with icons and arrow buttons
### 5.3 Total Asset Card
- USD balance display
- Large faded Dollar symbol watermark
- Action tabs: Buy stocks, Deposit, Withdraw
### 5.4 VIP Level Card
- Current VIP level, fee rates
- Progress bar for token holdings
### 5.5 Current Holdings Table
- Columns: Coin, Price, 24h Change, Trend sparkline, Actions
- Green/Red sparklines for trends
### 5.6 Affiliate Program Card
- Gold coin illustration, CTA button
### 5.7 News Card
- Vertical list of announcements with timestamps
---
## 6. Color Palette
- Primary background: deep charcoal / black
- Card surfaces: slightly lighter
- Accent color: warm gold
- Text: White (primary), Muted gray (secondary), Dark gray (disabled)
- Status: Green (positive), Red (negative)
## 7. Design Tokens
{
"theme": { "mode": "dark", "style": ["soft-neumorphism", "premium-fintech"] },
"layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68 },
"colors": {
"background": "#0B0D10",
"primaryAccent": "#F5A623",
"secondaryAccent": "#FFB547",
"textPrimary": "#FFFFFF",
"textSecondary": "#B0B3B8",
"success": "#22C55E",
"danger": "#EF4444"
},
"components": {
"card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "background": "#14171C" },
"button": { "primary": { "borderRadius": 999 } }
}
}
Use the specification above as a template to generate a design brief.
Your task is to write a new specification for an app called "[YOUR APP NAME]".
Rewrite it based on the following requirements:
- Style: [e.g., Skeuomorphic, modern, deep shadows, glass, soft colors]
- Colors: [e.g., Green accents, black background, white text]
- Layout: [e.g., 3-column layout with sidebar]
- Content: [describe your dashboard content]
- Components:
- [List your components]
- [e.g., A line chart showing account balances]
- [e.g., A table showing past transactions]
Upload your design image to ChatGPT with this prompt:
This is a dashboard of a modern [YOUR APP TYPE] app called [YOUR APP NAME].
Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS defaults.
Output characteristics as structured JSONC.
For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).
End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.
Output: You'll get two code blocks:
- A design brief (markdown)
- A JSONC design specification
Save both for Step 3.
Use this prompt in Cursor or Claude Code:
Your task is to implement a new route on /dashboard, following the design + development brief below. Implement thoroughly, in a step-by-step manner, and use built-in, standard Tailwind CSS design tokens instead of hardcoding values.
For colors and font families, use the defined values present in @tailwind.config.js, e.g. 'bg-primary-500' etc. instead of the hardcoded primary/secondary values in the JSON brief. For one-off colors/grays etc. the JSON values are acceptable.
**Requirements**
- responsive (full width bg with centered content on larger screens)
- theme aware components with light and dark mode support (you can toggle with @ThemeSwitch.tsx; make sure to include that in the menu bar)
- update @data/config/colors.js to match the colors in the design brief
- *important* make sure to include light and dark mode colors by using Tailwind's dark mode classes (dark:)
- all components must adapt to theme changes
- *do not use* magic strings, hex values, or px values. Replace all with Tailwind classes if possible.
- split reusable or complex parts of the UI into components so the code is maintainable and easy to understand.
- if any sample data is generated, place it in a separate file to keep the code clean.
**Note**
- the app is already running a dev server at port 3000
**Assignment brief**
<paste design brief from Step 2 here>
**Design specification**
<paste JSONC design specification from Step 2 here>
| Category | Options |
|---|---|
| Modern/Clean | Minimalist, Flat design, Material Design, Swiss style |
| Depth & Texture | Glassmorphism, Neumorphism, Skeuomorphic, Frosted glass |
| Bold | Neobrutalism, Brutalist, Cyberpunk, Retro/Y2K |
| Elegant | Editorial, Magazine-style, Luxury, Art deco |
| Layout | Best For |
|---|---|
| Sidebar + Content | Dashboards, admin panels |
| Top nav + Content | Marketing, simple apps |
| Three-column | Email clients, feeds |
| Bento grid | Modern dashboards |
| Master-detail | CRMs, inboxes |
| Theme | Colors |
|---|---|
| Dark + Gold | #0B0D10 bg, #F5A623 accent |
| Dark + Green | #0F1419 bg, #22C55E accent |
| Dark + Blue | #111827 bg, #3B82F6 accent |
| Light + Blue | #FFFFFF bg, #2563EB accent |
Style: Glassmorphism, modern, soft shadows, premium fintech aesthetic
Colors: Dark mode, near-black background (#0B0D10), gold accent (#F5A623), white/gray text hierarchy
Layout: Left sidebar + top bar + main content with bento grid
Components:
- User greeting card with avatar and account info
- Total balance card with large numbers and quick actions
- Portfolio chart (line chart with area fill)
- Holdings table with sparklines and 24h change
- VIP status card with progress bar
- Recent activity feed
- Promotional banner for referral program
┌─────────────────────────────────────────────────────────────────┐
│ STEP 1: Get Design │
│ ───────────────── │
│ • Generate with AI (ChatGPT/Gemini) using design prompt │
│ • OR use existing design (Dribbble, screenshot, Mobbin) │
│ │
│ Output: Design image/mockup │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 2: Convert to JSONC (ChatGPT) │
│ ────────────────────────────────── │
│ • Upload design image to ChatGPT │
│ • Use conversion prompt │
│ │
│ Output: Design brief + JSONC specification │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 3: Generate Code (Cursor/Claude Code) │
│ ────────────────────────────────────────── │
│ • Use implementation prompt with brief + JSONC │
│ • AI generates responsive, theme-aware components │
│ │
│ Output: Production-ready code │
└─────────────────────────────────────────────────────────────────┘