Verdant Ledger

The layout opens on an immaculate light canvas (#ffffff) immediately anchored by an expansive dark emerald container (#0c3b35) that encloses the hero value proposition and 3D device preview. Color is deployed with strict semantic precision: deep forest teal (#0c3b35) provides high-contrast grounding, while a vibrant mint green (#139871) highlights pivotal action verbs like 'done.' and commands primary call-to-actions. Typography relies on a contemporary geometric grotesque with tight tracking on bold headlines and generous breathing room for neutral slate body text (#60756f). Below the hero, horizontal feature segments are punctuated by tinted 44px circular icon badges (in mint, peach, and soft yellow) partitioned by hairline 1px dividers (#e5ece9). The interaction design feels approachable yet disciplined, relying on 24px container radii, 8px button curves, and subtle shadow diffusion beneath floating device mockups.

1 张设计参考图

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

完整提示词

Design a light-mode mobile app interface screen: crisp botanical greens ground mobile productivity in organic calm and focused structural clarity.

LAYOUT
The interface follows a single-column mobile rhythm starting with a minimal navigation header holding the ring logo and a compact login button. A high-contrast dark forest hero card dominates the initial viewport, immediately followed by a four-column segmented feature strip divided by hairline borders. Below, the 'How It Works' section utilizes centered titles and alternating device step preview cards stacked with comfortable 32px vertical gaps.

PALETTE (use these exact hex values)
- #0c3b35 — Deep Forest Canvas: Background fill for the primary hero banner and brand logo anchor mark.
- #ffffff — Primary Canvas White: Base page canvas background and card fill for feature preview units.
- #139871 — Vibrant Mint: Primary CTA button fill, highlighted text emphasis, and ring progress trackers.
- #11201d — Charcoal Text: High-emphasis typography including section headers and feature titles on white.
- #60756f — Slate Sage Muted: Secondary copy, feature subtitles, and micro-descriptions across the interface.
- #ddf3ea — Soft Mint Tint: Circular badge background for data and financial feature iconography.
- #fce9e4 — Soft Peach Tint: Circular badge background for savings and wallet feature icons.
- #fef0d9 — Soft Amber Tint: Circular badge background for monthly analysis and growth chart icons.
- #e5ece9 — Hairline Divider: Vertical divider rules separating adjacent feature benefit columns.

TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Inter, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 28px display. Tracking -0.02em on headings, 0em on body. Plus Jakarta Sans conveys architectural precision mixed with welcoming geometric circularity, particularly evident in the lowercase 'o' letterforms that echo the brand mark. Headlines feel decisive and direct when rendered in bold weights with negative tracking, while muted descriptive lines ensure the interface remains tranquil and legible. For open-source execution, Inter or DM Sans serve as direct, drop-in substitutes.

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

DEPTH
Depth is handled with restraint rather than physical skeuomorphism. Most surfaces sit completely flat on base levels, while device mockups and feature cards cast a very soft, diffused ambient shadow (0 12px 32px rgba(12, 59, 53, 0.08)) that lifts them slightly above the canvas.

IMAGERY
Photography integrates realistic, minimalist potted house plants inside modern device mockups to evoke calm and sustainable routine building. Graphic iconography uses soft pastel circular backgrounds with dual-tone minimalist line vectors; busy 3D renders or ungrounded abstract shapes are strictly avoided.

SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark pine curved hero enclosure (#0c3b35) populated by a 3D smartphone displaying physical flora alongside clean software metrics. It merges organic nature with digital productivity, established through a distinct mint accent highlight in the headline. Misusing it involves replacing the dark forest hue with generic corporate blue or stripping out the botanical plant imagery.

MUST
- Reserve vibrant mint (#139871) strictly for primary buttons and high-value single-word emphasis.
- Use 1px vertical borders (#e5ece9) to separate repeating horizontal feature columns cleanly without heavy boxes.
- Enclose all main section panels in generous 24px border radii for a soft, approachable mobile aesthetic.
- Keep descriptive feature copy set in muted slate (#60756f) to preserve strong reading hierarchy against bold titles.

AVOID
- Do not introduce sharp 0px corners; every card and interactive element requires softened radii.
- Never use generic black (#000000) for text; always employ charcoal (#11201d) or slate (#60756f).
- Avoid heavy drop shadows or harsh black outlines; rely on subtle value shifts and soft pastel badges.
- Do not color entire paragraph blocks in brand mint; limit bright green to single words or active CTA states.

OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456: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.