Nordic Atelier

The screen embraces a serene, high-end e-commerce layout built on a soft porcelain foundation (#FAFAF8) paired with gentle warm cream backgrounds (#EFECE6). High-contrast editorial hierarchy is driven by elegant transitional serif headlines set in deep charcoal (#22201E) juxtaposed against earthy burgundy accents (#6E2628) for selected active states. Structural clarity is maintained through generous white space, soft 54px circular icon navigation pods, and rounded 16px corner radii on product cards. The viewer's attention lands directly on an architectural shell chair within an airy interior scene, immediately followed by the stark serif headline 'Modern Living'. Visual density is intentionally unhurried, creating a tactile boutique showroom feel on a mobile canvas.

1 张设计参考图

提示词信息
分享者	@Devault
模型	GPT Image 2.5
分类	移动端界面
数据集	stretchcloud · awesome-gpt-image-prompt-2.5

完整提示词

Design a light-mode mobile app interface screen: warm architectural minimalism framed by refined editorial typography and tactile organic neutrals.

LAYOUT
The vertical flow begins with a light 54px header followed immediately by an immersive edge-to-edge lifestyle banner anchored by an editorial text lockup on the left. Directly below sits an unboxed horizontal category pod tray, transitioning into a rounded nested sheet that holds the 'Popular Now' multi-column horizontal product scroll.

PALETTE (use these exact hex values)
- #FAFAF8 — Porcelain Canvas: Primary mobile screen backdrop providing warm white elevation
- #F6F5F2 — Sand Card Surface: Background fill for bottom section panel and product cards
- #22201E — Charcoal Espresso: Headlines, prominent brand logo, primary icons, and product titles
- #7D7871 — Muted Truffle: Subtitles, secondary attributes, inactive labels, and icon strokes
- #A78B71 — Warm Ochre Script: Italic kicker text 'Crafted for' and subtle decorative accents
- #6E2628 — Artisan Burgundy: Active category pill, active carousel indicator dot, and cart badge
- #EFECE6 — Soft Stone Circle: Default inactive circular button container fill for categories

TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Newsreader, Libre Baskerville), weights 400/500/600. Sizes 10px caption, 12px body-sm, 13px body, 15px subheading, 18px heading, 22px heading-lg, 38px display. Tracking -0.02em at display, 0 at heading. The voice is architectural, cultivated, and gallery-inspired. The serif display face evokes European art books and interior publications, while the crisp sans-serif provides reliable utility for catalog navigation. Playfair Display or Cormorant Garamond are recommended substitutes.

GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.

DEPTH
Depth is created almost entirely through soft layered surface tones (#FAFAF8 over #EFECE6) rather than cast drop shadows. Subtle atmospheric ambient occlusion in photographic assets gives items physical weight without relying on artificial CSS box shadows.

IMAGERY
Photographs showcase architectural Scandinavian and mid-century modern furniture in sun-drenched, minimalist interiors. Compositions use warm oak, cast shadows, and tactile fabrics against beige plaster walls; studio shots must stay uniformly warm-tinted and softly lit.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the warm sand architectural hero canvas with the deep burgundy (#6E2628) circular category badge. It shifts an otherwise neutral aesthetic into an intentional, luxury atelier identity.

MUST
- Use warm off-white tones (#FAFAF8, #F6F5F2) rather than stark clinical #FFFFFF for surfaces.
- Pair a high-contrast serif display font with clean geometric sans-serif metadata.
- Apply exactly 16px border-radius to product cards and image containers.
- Reserve the artisan burgundy (#6E2628) strictly for active states and critical interaction points.

AVOID
- Do not introduce harsh pure black (#000000); use deep charcoal espresso (#22201E).
- Never use sharp 0px rectangular corners on category pods or product cards.
- Avoid heavy drop shadows or bright primary saturation on interactive chips.
- Do not use non-serif typography for main campaign titles or hero headlines.

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

在 DraPub 中尝试

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

返回提示词画廊

移动端界面设计参考

Abyssal Depth

The screen is grounded in an ultra-dark navy canvas (#040a14) that blends directly into deep-sea hero imagery without harsh cutoffs. Vibrant cyan (#4de1fc) and saturated royal blue (#1b4bf5) provide directional illumination, serving both as high-intent callouts and luminous gradients across interactive elements. Typography is clean and geometric, relying on high-contrast white (#ffffff) for display statements and muted slate (#8fa2be) for logistical information. Spacing uses an 8px grid with generous vertical cadence, accented by cards and pills with generous corner radii (ranging from 16px to 24px). The immediate visual hook is the cinematic submarine emerging from caustic ocean beams, anchored by a vibrant gradient CTA button with a seamless directional arrow.

移动端界面设计参考

Abyssal Sentinel

The layout splits between a turbulent, full-bleed oceanic photo canvas at the top and an overlapping high-radius clinical white card sheet (#FFFFFF) rising from the lower viewport. Color establishes an immediate cognitive pivot: the brooding marine navy (#10232B) evokes volatile real-world chaos, while soft glacial mint (#BDE4E0) and deep abyssal teal (#0E2A32) communicate calculated technological control. Typography relies on a geometric neo-grotesk with strict hierarchical tracking: loose +1.5px tracking on 11px uppercase category tags, contrasting against tightly-tracked 30px display headings. Layout rhythms alternate between fluid circular pill shapes (radius 999px) and architectural rounded hexagons for photo masking. The eye is first arrested by the stark white display type across the ocean storm, immediately pulled downward by the glowing mint CTA pill into the clean corporate interface below.

移动端界面设计参考

Adaptive Motion

The interface is grounded on a warm off-white canvas (#F8F9FB) that allows crisp white rounded containers (#FFFFFF) to float with near-weightless elevation. Primary interaction hinges on a spirited coral red (#F05D5E), which drives the hero CTA, notification ping, ring chart, and selective typographic emphasis on 'moves.'. Typography relies on a modern geometric sans-serif, using weight modulation (Regular 400 to Extrabold 800) rather than scale alone to establish hierarchy. Layout modules are organized into distinct cards with generous 24px corner radii, giving the entire viewport an approachable, pebble-soft hand-feel. A user immediately notices the tactile juxtaposition between the rendered metallic fitness equipment angled against a pastel blush circle (#FAD5D5) and the bright coral progress arc at 72% below.

移动端界面设计参考

Aero Coastal

The canvas is structured around an ultra-clean white backdrop (#FFFFFF) framed by an expansive 36px-radius hero image tile depicting a sunlit alpine coast. Color is strictly bifurcated: visual drama belongs to natural photography and subtle pastel surface cards (#FFF1EE, #EDF5FF, #F3F0FF, #EEF9F6), while operational cues use vivid coral (#EE6C58) and sky blue (#3B82F6). Typography is anchored in crisp modern grotesque letterforms, employing stacked 38px display titles over landscape photos and 14px bold headers inside micro-cards. Component shapes maintain generous curvature, from 999px pills to 24px rounded service modules. A viewer immediately registers the high-contrast white typographic stack against the lake landscape before flowing downward into pastel feature tiles.