Emotive Audioframe

The canvas rests on an airy, cool-tinted off-white background (#F8F9FC) enriched by subtle ambient glow. Visual hierarchy centers on high-contrast dark elements (#0F172A) balanced against gentle coral-to-rose and lavender accents. The dominant headline is set around 42px bold, immediately drawing the eye to a warm gradient on the secondary phrase ('ready to build on.') rendered in soft rose (#FB7185). Surrounding this typography is an ultra-dense, authentic product simulation featuring a dark left utility bar (#181E2E), clean white operational cards (#FFFFFF), and an integrated floating terminal snippet. Corner radiuses follow an intentional progression: 8px for internal inputs and code tags, 12px for feature icons and buttons, and 20px for outer application framing containers. Spacing is comfortable yet information-dense, allowing developers to immediately inspect real telemetry, latency metrics, and API payloads without decorative filler.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	界面组件与网格
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode website section: crisp developer ergonomics framed around expressive speech synthesis, soft pastels, and layered console windows.

LAYOUT
Asymmetric two-column split section. The left column (approximately 38% width) holds the pill eyebrow, primary gradient headline, body overview, three icon-backed feature rows, dual CTA buttons, and trust guarantees. The right column (62% width) showcases the layered interactive playground mockup flanked beneath by a four-metric stat strip.

PALETTE (use these exact hex values)
- #F8F9FC — Canvas Background: Dominant ambient page backdrop and surrounding section wrapper
- #FFFFFF — Card Surface: Background for dashboard panels, audio generation cards, and metric strips
- #0F172A — Console Dark: Primary action button, left navigation rail, and code terminal container
- #0F172A — Primary Text: Used for main display headlines, feature titles, and metric values
- #64748B — Secondary Text: Supporting descriptive copy, inactive navigation tabs, and sub-labels
- #FB7185 — Coral Accent: Headline gradient highlight, expressiveness bar, and audio waveform peak tint
- #818CF8 — Indigo Accent: Stability metric bar, active tab indicator, and subtle feature icon glyphs
- #E2E8F0 — Border Subtle: Card outlines, divider lines, and structured table cell borders

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 42px display. Tracking -0.03em at display, -0.01em at body. Modern, precise, and approachable. Plus Jakarta Sans provides a friendly humanist touch in geometric form, preventing the technical AI voice interface from feeling cold or intimidating. Monospace elements in the code block provide instant developer credibility.

GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.

DEPTH
Depth is created via soft layered planes rather than heavy drop shadows. The main console container casts a broad, low-opacity ambient shadow (rgba(15, 23, 42, 0.06) with 30px blur), while internal cards rely on crisp 1px borders (#E2E8F0) to separate technical zones.

IMAGERY
No photographic imagery is present. The visual power comes exclusively from a high-resolution, synthetic UI simulation containing waveforms, dropdown selectors, metrics bars, and terminal syntax highlighting.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-surface console mockup combining a dark left navigation rail, clean light synthesis controls with a gradient waveform, and an anchored dark code drawer at the bottom right.

MUST
- Use high-contrast slate navy (#0F172A) for primary interactive buttons to anchor the light layout.
- Restrict bright rose-to-lavender gradients strictly to emotional display text and waveform accents.
- Maintain a clear visual nested hierarchy: base canvas -> white app stage -> dark inset code window.
- Include granular technical metrics (latency, SLA, SOC 2) to balance consumer voice playfulness with enterprise rigor.

AVOID
- Do not saturate the primary canvas background with harsh pure white or bright color floods.
- Never use generic placeholder art; every UI showcase piece must show authentic API fields, waveforms, and code.
- Avoid sharp 0px corners anywhere in the product UI; maintain rounded 8px-20px consistency.
- Do not color the primary value proposition headline entirely in gradient; only accent the operative second line.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks.

在 DraPub 中尝试

看看同一视觉方向里的其他提示词。

返回提示词画廊

界面组件与网格设计参考

Abyssal Defense Matrix

This design orchestrates a high-contrast defense tech showcase on a pure white (#FFFFFF) ground, pairing deeply saturated underwater hero media with ultra-pale tinted ancillary panels. The primary canvas divides into an asymmetric bento layout: a dominant deep-ocean card (#0A131F) occupying roughly 58% width, counterbalanced by a stack of three subtly tinted cards in lavender (#F9F8FD), arctic blue (#F4F9FD), and peach-blush (#FFF8F4). Typography relies on a neutral grotesque sans-serif with tight tracking and heavy display weights, accented by an uppercase tracking-widened purple eyebrow label (#6355D8). Micro-metrics are structured inside frosted glass capsules (rgba(255,255,255,0.08)) with fine borders on the dark hero, while stats in the bottom banner sit cleanly bordered by hair-thin dividers (#E2E8F0). The visual hierarchy commands attention instantly through the photorealistic submarine cutting through murky cerulean water with an illuminated frontal headlight beam.

界面组件与网格设计参考

Aegis Airspace

Built on a muted light canvas of #f8fafc, this layout establishes hierarchy through an asymmetrical bento grid anchored by an ominous dark-slate spotlight card (#0c1527). Color is deployed almost entirely for information density rather than ornamentation, utilizing tactical cyan (#38bdf8) and safety alerts on the dark radar screen while keeping standard enterprise surfaces pristine white (#ffffff) with delicate #e2e8f0 borders. Typography is anchored by a high-contrast geometric sans display headline sized around 44px with tight tracking (-0.02em), flowing into disciplined 14px body and caption metrics. Cards share a consistent 20px corner radius, punctuated by pill-shaped taxonomy tags with a 999px radius and soft 12px squircle icon badges. What the viewer notices first is the high-contrast tension between the civilian enterprise white cards and the tactical military-grade radar visual inhabiting the primary card.

界面组件与网格设计参考

Aegis Clinical

The canvas is an ethereal, faintly cool-tinted white (#f8fafd) with subtle blue undertones that instantly conveys clinical sterilization and enterprise reliability. Color functions as an instrument of authority: intense cobalt blue (#1e3a8a) commands attention across prominent numerical metrics, star ratings, and links, while high-contrast charcoal (#0f172a) grounds primary typography. Subtle pastels—specifically a soft lavender-blue (#eef2ff) and muted sage green (#ecfdf5)—delineate verification and categorization without visual clutter. Typography relies on a neutral grotesque sans-serif with tight negative tracking at display scale (42px) and crisp, readable 14px body text. The entire architecture sits on a rigorous grid of rounded rectangular surfaces (16px border-radius) floating with imperceptible, soft diffuse shadows. What a reader notices first is the overwhelming density of quantifiable credibility—large blue numerals paired cleanly with verified testimonial quotes.

界面组件与网格设计参考

Aero Infra

The canvas is a sterile, clinical cool white gradient (#f4f7fc fading into #ffffff) that directly evokes refrigerated high-density server rooms. Color operates strictly as functional signal: deep navy-black (#0a0f1d) delivers typographic clarity, electric cobalt (#2f54eb) marks active infrastructure status, and eco-green (#22c55e) highlights carbon savings. Typography relies on a tight neo-grotesque sans-serif with aggressive negative tracking at display scales (-0.03em) down to crisp neutral utility at 13px. Spatial composition follows an asymmetric split layout: narrative evidence and metrics anchor the left 55%, while hardware server racks dominate the right with overlapping floating metric badges. Key observed values include generous 20px card corner radii, 12px pill badges, and razor-thin 1px dividers colored at #e2e8f0.