Sprout Craft

The screen is built on a clean #F8FAFC canvas softened by a subtle sky-tinted ambient glow in the top-right header zone. High-contrast deep slate type (#1E293B) anchors titles, while a rich cobalt blue (#2563EB) establishes primary action weight on the hero CTA. The interface balances high-density informative modules—like the 3-step 'How it works' vertical stack—against airy margins of 20px on the viewport edges. Cards rely on pure white #FFFFFF surfaces bounded by hairline borders (#E2E8F0) and friendly 16px to 20px corner radii rather than harsh dropshadows. A reader first encounters the tactile 3D isometric greenhouse diorama, which effortlessly transitions into structured social validation and sequential onboarding cards.

1 张设计参考图

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

完整提示词

Design a light-mode mobile app interface screen: crisp air-conditioned agritech clarity anchored by vibrant isometric warmth and approachable rounded card structures.

LAYOUT
The mobile layout follows a top-down journey starting with a personalized header greeting and round utility buttons. The hero lockup splits headline copy and the isometric garden illustration, anchored below by an asymmetrical cobalt CTA. Following this, a trusted-by badge offers social proof before launching into an encapsulated 3-step vertical onboarding card stack and a horizontal scrolling catalog.

PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: ambient app background providing soft daylight contrast under white cards
- #FFFFFF — Surface Pure White: card tiles, circular icon controls, and container backdrops
- #2563EB — Cobalt Blue: primary call-to-action button, action links, and focal utility highlights
- #1E293B — Slate Heading: primary headings, section titles, and active list numerals
- #64748B — Slate Muted: supporting body text, list descriptions, and greeting subtitles
- #E2E8F0 — Hairline Border: card borders, secondary item boundaries, and button rings
- #10B981 — Leaf Green: onboarding plant icon badge glyph and ecological highlight
- #ECFDF5 — Leaf Green Soft: background for the plant selection icon container
- #F43F5E — Warm Coral: notification badges, analytics icon tint, and 'Sold Out' status pill
- #FFF1F2 — Warm Coral Soft: background fill for the monitor and earn icon container

TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 20px heading, 32px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers an engineered yet friendly Scandinavian agritech personality. Its rounded geometric construction and wide counters maintain extreme legibility at small caption sizes while presenting a premium consumer-tech tone at 32px display weights. If unavailable, Inter or DM Sans provide a serviceable substitute without losing compositional rhythm.

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

DEPTH
Depth is predominantly achieved through 3D isometric asset rendering rather than CSS drop shadows. UI surfaces remain flat and crisp, relying on #FFFFFF plates contrasted against a #F8FAFC canvas with delicate #E2E8F0 hairline borders. Subtly tinted atmospheric glows occasionally bleed behind hero illustrations.

IMAGERY
Hero and product assets use polished 3D isometric diorama renders with miniature-world proportions, smooth clay-like textures, and sunny directional lighting. Product previews use isolated white-background botanical and fruit photography or 3D cutouts. Flat editorial photography or abstract line art is off-brand.

SIGNATURE DETAIL — the thing that makes this design itself
The integrated cobalt CTA with an embedded white circular arrow badge, juxtaposed directly against a lush 3D isometric mini-garden diorama. Recreate it by pairing bold 32px slate titles with an asymmetric 3D illustration and anchoring it with a 52px high blue button containing a nested icon circle.

MUST
- Pair rich isometric 3D illustrations with ultra-clean, flat structural UI elements.
- Use distinct pastel tinted backgrounds for functional category icons (e.g. mint, ice blue, pale coral).
- Nest full process step items within their own subtler 1px inner rounded boundaries.
- Apply 16px to 20px corner radii consistently across actionable and informational cards.

AVOID
- Do not use dark muddy dropshadows; rely on 1px borders (#E2E8F0) and background contrast.
- Do not make primary buttons sharp or pill-shaped; keep them firmly at 16px radius.
- Never replace 3D diorama imagery with generic photographic stock or flat line art.
- Do not use saturated yellow or dark green for accents; stick to the curated palette.

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