Prompt Details
Model
(gemini-3.5-flash)
Token size
298
Example input
[Screen_Type]: Desktop Dashboard
[App_Context]: Crypto Portfolio Tracker for retail investors
[Core_Features]: Real-time asset value, 24h change stats, wallet connectivity status, asset allocation table
[Grid_System]: 8-point grid layout
[Design_Style]: Dark-mode minimalist SaaS with Slate tones
Example output
### [Frame: Desktop Screen Wrapper]
- Width: 1440px | Height: 900px
- Layout: Auto-Layout (Horizontal) | Padding: 0px | Gap: 0px
- Background: #0F172A (Slate 900)
├── [Component: Left Sidebar Navigation]
│ - Width: 260px | Height: Fill Container
│ - Layout: Auto-Layout (Vertical) | Padding: 24px | Gap: 16px
│ - Border-Right: 1px solid #1E293B
│ ├── Logo Asset ([Brand Mark])
│ └── [Vertical Menu Group]
│ ├── Nav Item (Active): "Dashboard" (Icon + Text)
│ ├── Nav Item: "Wallets" (Icon + Text)
│ ├── Nav Item: "Analytics" (Icon + Text)
│ └── Nav Item: "Settings" (Icon + Text)
│
└── [Frame: Main Content Area]
- Width: Fill Container | Height: Fill Container
- Layout: Auto-Layout (Vertical) | Padding: 40px | Gap: 32px
├── [Component: Top Header Bar]
│ - Width: Fill Container | Height: Hug Content
│ - Layout: Auto-Layout (Horizontal) | Space-Between Alignment
│ ├── Typography: H1 "Portfolio Overview" (Color: #F8FAFC)
│ └── [Horizontal Action Group] (Gap: 12px)
│ ├── Button (Secondary): "Export CSV"
│ └── Button (Primary): "Add Transaction" (+ Icon)
│
├── [Frame: Key Metrics Grid]
│ - Width: Fill Container | Height: Hug Content
│ - Layout: Auto-Layout (Horizontal) | Wrap Enabled | Gap: 24px
│ ├── [Card: Net Worth Metric] (Width: 340px, Padding: 24px, Auto-Layout V)
│ │ ├── Label: "Total Balance" (#94A3B8)
│ │ └── Value: "$124,532.89" (#F8FAFC, H2 Bold)
│ ├── [Card: 24h Change] (Width: 340px, Padding: 24px, Auto-Layout V)
│ │ ├── Label: "24h Profit/Loss" (#94A3B8)
│ │ └── Value: "+$4,210.50 (+3.5%)" (#10B981)
│ └── [Card: Connected Wallets] (Width: 340px, Padding: 24px, Auto-Layout V)
│ ├── Label: "Active Nodes" (#94A3B8)
│ └── Value: "3 Connected" (#F8FAFC)
│
└── [Component: Main Assets Table Card]
- Width: Fill Container | Height: Fill Container
- Layout: Auto-Layout (Vertical) | Padding: 24px | Gap: 16px
- Background: #1E293B | Radius: 12px | Border: 1px solid #334155
├── Typography: H2 "Asset Allocation"
└── [Table Component]
├── Header Row: Asset | Price | Balance | 24h Trend
├── Row 1: Bitcoin (BTC) | $62,100.00 | 1.20 BTC | +1.2%
├── Row 2: Ethereum (ETH) | $3,450.00 | 14.5 ETH | -0.8%
└── Row 3: Solana (SOL) | $145.20 | 250 SOL | +5.4%
By purchasing this prompt, you agree to our terms of service
GEMINI-3.5-FLASH
Transform raw product requirements (PRDs) into pixel-perfect, clean SaaS dashboard layouts instantly. Built specifically for Figma AI layout engines, Figma Make, and UX Pilot.
This premium prompt enforces a strict 8px grid system, auto-layout parameters, and clean component structural logic. Perfect for UX/UI designers, product managers, and developers who want to skip manual wireframing and generate production-ready design foundations in seconds. Just plug in your features!
...more
Added 4 days ago
