Prompts to Create Apps and Designs with AI

Neutral tones, lots of whitespace, functional spacing

Build a minimal navbar with fixed height (64px), 12px padding, all-lowercase sans-serif labels (#4A4A4A), and underline hover effects (2px solid #000, transition: 200ms).

Create a dashboard grid layout (12-column), modular cards with no borders, bold metric text (font-size: 24px), grey text for labels (#9E9E9E), and zero decoration aside from font weight.

Trustworthy blue tones, clean layout, functional icons

Design a professional login form with left-aligned input labels, consistent 16px vertical spacing, company blue color (#0056D2) for CTA, and subtle success/error feedback states (green/red with 80% opacity).

Generate a corporate pricing table with segmented cards, bold headers (18px, semibold), a blue accent line at the top (3px height), and a Compare Plans CTA aligned bottom-right.

Rounded edges, bright colors, emojis, motion

Create a playful notification toast with bouncy animation, emoji icon (font-size: 28px), pastel background (#FFFAE5), and drop shadow (rgba(0,0,0,0.15), blur: 12px).

Build a card grid for a kid's app using large rounded corners (24px), bubble-style CTA buttons, fun icons with 3D effect, and vibrant background colors (e.g. #FF4E00, #00C9A7).

Tech-glow effects, HUD overlays, cyberpunk accents

Design a futuristic stat monitor with dark background (#0A0A0A), neon-blue lines (#00F0FF), segmented digital font (Orbitron), and animated data readout pulses (frequency: 0.75s).

Create a sci-fi dashboard with floating glass cards (opacity: 0.4, blur-radius: 18px), glowing rim borders (2px, outer glow effect), and UI text in monospace (#33FFBD).

Low-light UI, deep backgrounds, high-contrast accents

Design a dark mode dashboard with background color #121212, white text at 90% opacity, secondary text at 60%, and primary CTA in #1E88E5 with hover glow (box-shadow: 0 0 8px #1E88E5).

Create a terminal-inspired component with pure black background (#000000), green neon monospace text (#00FF41), animated caret cursor, and code block container with a 1px inner glow.

Strict layout systems, modular blocks, alignment consistency

Build a 12-column responsive grid layout with 24px gutters, modular cards (min-width: 240px), and breakpoint collapse at 768px. Use even vertical rhythm (baseline grid: 8px).

Create a data overview section with a 4x4 grid, card modules evenly spaced (padding: 16px), titles in bold (#333333), and values right-aligned in #007ACC.

Earthy tones, natural textures, organic shapes

Design a landing page with botanical theme: leaf pattern background (opacity 15%), organic blob shapes framing hero section, and earth-tone palette (#8DA57B, #E6D3A3).

Create a settings modal with beige background (#FAF8F3), forest green CTA button (#3B6D57), soft corner radius (12px), and a faint hand-drawn leaf illustration in the footer (opacity: 10%).

Elevation clarity, information hierarchy

Build a product card with thumbnail top (fixed height: 160px), title (font-size: 18px, font-weight: 600), description (line limit: 3, clamp with ellipsis), and CTA aligned bottom.

Create a stat card with a 1:1 ratio container, metric in 32px font, unit label in 12px, and a badge indicator top-right with status color (#F44336 for danger, #4CAF50 for success).

Conversational bubbles, alternating alignments

Create a chat interface with left-aligned messages in grey (#F1F0F0), right-aligned replies in blue (#007AFF), 12px spacing between bubbles, and time-stamp in 10px italic grey below each message.

Design a Slack-style chat window with sidebar width: 240px, message area flex-grow, 1px border separators, and message input with emoji and upload buttons on the right (icon size: 20px).

Functional, readable charts with strong hierarchy

Create a bar chart card with white background, blue bars (#2196F3), X/Y labels in 12px sans-serif, hover tooltips with contrast background (#333, white text), and gridlines at 20% opacity.

Build a KPI dashboard row with three tiles: metric (font-size: 36px, font-weight: bold), label below (font-size: 14px), arrow icons for trends (up/down, color-coded), and background color #F5F5F5.

Overlapping cards, asymmetry, Z-indexed elements

Design a layered dashboard with overlapping cards (Z-index 5, 10, 15), hover elevation on topmost only, semi-transparent background elements (opacity: 30%), and rotated badge at top-left (−10°).

Create a hero section with skewed grid panels (transform: skewX(-10deg)), large background title text (opacity: 10%, absolute positioned), and primary CTA fixed to bottom center (sticky behavior).

Cyberpunk neon with glitch textures and terminal overlays

Design a cyberpunk dashboard with matte black background (#0B0B0B), glitch overlay animation (frame rate: 12fps, opacity: 5%), neon accent elements (#39FF14, #FF0055), monospace headings, and angular panel layout using clip-path.

Build a haunted house landing page with textured black background (#111), serif typography in #F5F5F5, animated fog overlay (opacity: 30%, blur-radius: 16px), and flickering candle icon (keyframes: 2s alternate).

SaaS, E-commerce, Fintech specific patterns

Create a SaaS landing with radiant white background (#FFFFFF), ultra-wide spacing (padding: 96px), Inter typeface (300 weight), linear glass-style buttons with blur (20px), and floating 3D shape accents (WebGL, slow spin).

Design a trading dashboard with three-panel layout: sidebar (240px), chart center, and quick trade panel (width: 300px). Use real-time price updates (interval: 250ms), red/green market indicator flashes, and monospace metric text (#E6E6E6, 18px).

Historical timeline with scrolling parallax and smooth snapping

Build a horizontal time machine-style timeline with fading background gradient (#FFF → #000), date nodes as rotating circles with radial shadows, and scroll snap points at 100-year intervals. Add parallax event images at varying depths.

Create a real-time KPI tile grid with four metric blocks per row, large number text (font-size: 36px, weight: bold), live-updating count-up animation (duration: 750ms), and indicator arrow badges (green up, red down).

Terminal UI for AGI with neural overlays

Design a terminal interface with a black canvas (#0A0A0A), monospace font (JetBrains Mono, 14px), hex-grid animated background (opacity: 3%), and neural SVG links connecting nodes on hover. Simulate a cursor-pulse synced to user typing.

Build a canvas-based workflow builder: full-width canvas with zoom/drag (scale: 0.5–1.5), block nodes with tabbed settings, connector lines via SVG Bézier paths, and snapping grid (8px spacing).

Moodboard creator with draggable media and color palette extraction

Design a moodboard interface with drag-and-drop canvas, floating image layers, and auto-generated color swatches below (24px size chips, detected via pixel sampling). Add hoverable "vibe" tags, rotated collage frames (rotate: ±5°).

Create a comic strip builder: grid of 3:4 ratio draggable frames, speech bubble tool with resizable tail (drag vector), bold cartoon font (Bangers, 18px), and halftone background pattern overlays.

Virtual museum explorer with parallax sectioning

Build an interactive museum tour interface with horizontal scrolling exhibits, parallax background layers (3 levels, scroll ratio: 0.5/0.75/1), sticky timeline navigation, and section-based ambient audio fade (volume sync to scroll position).

Create a brand guideline page with 8-column grid, color swatch copy buttons (hex/RGB), typography usage cards (live preview blocks), and Lottie motion guideline previews. Use white background, grey grid lines (#E0E0E0).