Cyan Pulse Bar

The interface operates as a persistent, high-utility notification banner fixed across a dark navy canvas (#070b14). Visual hierarchy relies on razor-sharp luminance differentials rather than decorative fills: an electric cyan (#22d3ee) bookends the bar with a pill badge on the left and an actionable text link on the right. Content is split between high-contrast crisp white (#ffffff) for the product release headline and an understated neutral slate (#94a3b8) for secondary feature claims. A gossamer 1px vertical rule in muted border tone separates information from conversion. The badge uses a full pill radius (999px) with an interior inset gap of 8px, contrasting against the edge-to-edge linear layout.

1 张设计参考图

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

完整提示词

Design a dark-mode website section: crisp electric cyan accents slicing through deep cosmic slate for high-priority product drops.

LAYOUT
The horizontal rhythm follows a standard reading path: badge indicator on the far left, core statement in the center-left, vertical spacer line, and conversion link on the right. Vertically, all components share a centered baseline inside a 52px-tall frame.

PALETTE (use these exact hex values)
- #070b14 — Obsidian Slate: Primary full-bleed background for the announcement banner strip
- #0e2a38 — Cyan Glow Edge: Top border hairline accent suggesting faint neon illumination
- #22d3ee — Electric Cyan: Used for the pill tag text, sparkle icon, and trailing CTA text and arrow
- #081b26 — Cyan Tint Surface: Subtle tinted backdrop fill for the pill notification badge
- #164e63 — Badge Stroke: Defining hairline border for the 'NEW' pill tag
- #ffffff — Primary Text: High-emphasis product name and milestone status declaration
- #94a3b8 — Secondary Text: De-emphasised feature list summary copy
- #1e293b — Divider Line: Vertical separator distinguishing announcement statement from interactive CTA

TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body. Tracking -0.01em for copy, 0.05em for badge. The typographic tone is engineered, precise, and tech-forward, matching contemporary developer tools and modern SaaS frameworks. A neutral neo-grotesque like Inter provides clinical readability at 11-14px sizes without drawing attention to its own letterforms.

GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 6px, buttons 999px. Spacing on a 4px unit, 16px gaps, 56px between sections, 1280px container, tight density.

DEPTH
Elevation is completely planar with zero ambient drop shadows. Depth is communicated strictly via value contrast: a pitch dark ground, a faintly tinted badge container, and a 1px highlight stroke along the upper border.

IMAGERY
Iconography is strictly vector and monochromatic, exemplified by the single 8-pointed sparkle glyph (12px) embedded inside the status badge. Photorealistic imagery or complex multi-color illustrations are strictly avoided in this bar paradigm.

SIGNATURE DETAIL — the thing that makes this design itself
The dual-anchor layout: an illuminated cyan pill tag on the left balancing an arrow-led cyan text link on the right, bridging clean white-and-slate editorial copy across a dark void.

MUST
- Keep the primary feature announcement in pure white and auxiliary details in muted slate.
- Use electric cyan (#22d3ee) solely for state tags, icons, and interactive links.
- Maintain the capsule badge border-radius strictly at 999px for an organic pill silhouette.
- Separate message copy from the call-to-action with a 24px-tall muted hairline vertical rule.

AVOID
- Never use bright cyan for body text sentences; it diminishes CTA conversion contrast.
- Do not allow the bar to wrap into multiple lines on desktop viewports.
- Avoid solid, saturated pill fills which overpower the headline typography.
- Do not remove the vertical rule divider between text statement and trailing action link.

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.