Image Generation Prompts

Detailed prompts for generating the visual assets TracePlot needs. Each prompt targets a specific placement on the site where CSS-drawn mocks currently live.

---

1. Hero Product Dashboard

Replaces: ProductMock component in hero section Placement: Right column of the hero, next to headline Gemini config: aspectRatio: "16:9", imageSize: "2K"

Primary prompt

Professional SaaS dashboard UI screenshot, top-down satellite map view of tropical agricultural plots in Southeast Asia, lush green canopy with clearly delineated farm boundaries drawn as translucent emerald polygons, 3 location pins with status indicators (2 green "pass", 1 amber "flag"), right sidebar panel showing shipment review queue with company names and verification status badges. Clean minimal interface, warm off-white chrome (#f4efe6), dark forest green text (#16312a), accent green (#12725f) for interactive elements. Glassmorphic card panels with subtle frosted blur. Top toolbar with tab navigation and "Radar verification live" status indicator. Dashboard typography uses refined serif headings with clean sans-serif body text. Realistic UI design, not a wireframe. No people. Ultrasharp. Subtle warm ambient lighting, no harsh shadows.

Alternate prompt (photographic composite)

Aerial drone photograph of cocoa farmland in Cote d'Ivoire at golden hour, patchwork of dark green canopy and cleared plots, overlaid with a semi-transparent UI dashboard layer showing farm boundary polygons in emerald green, verification badges, and a sidebar with shipment status cards. The overlay uses glassmorphic frosted panels. Color palette: warm earth tones with forest green (#12725f) accents. Professional product screenshot aesthetic, photorealistic.

Recommended tool

Figma mockup with a real satellite map background, then screenshot. AI image generators struggle with realistic UI chrome. Build a high-fidelity Figma mock using the site's design tokens and export at 2x.

---

2. Supplier Collection Mobile

Replaces: SupplierPortalMock component in Step 1 (Collect) Placement: Inside the StepFlow card when "Collect" is expanded Gemini config: aspectRatio: "3:4", imageSize: "2K"

Prompt

Photorealistic smartphone mockup (modern Android device, no brand markings) held at slight angle against a blurred background of a coffee farm with red cherries on branches. Screen shows a mobile web app with a satellite map view of agricultural land, a hand-drawn polygon in translucent emerald green (#12725f at 40% opacity) outlining a farm plot, a blue GPS location dot, and a floating action button labeled "Confirm plot". Clean minimal mobile UI with white header bar, sans-serif typography. The map shows real satellite imagery texture -- mixed green canopy, dirt paths, a small structure. Warm natural daylight, shallow depth of field on the background. No hands visible. Shot from slightly above. Studio product photography style.

Recommended tool

Midjourney v6 or Flux Pro. The phone-against-blurred-background composition is well within current photo generation capabilities. Post-process the screen content in Figma if the generated UI text is garbled.

---

3. Satellite Verification Compare

Replaces: PlotCompare component in Step 2 (Verify) Placement: Inside the StepFlow card when "Verify" is expanded Gemini config: aspectRatio: "16:9", imageSize: "2K"

Prompt

Split-screen satellite imagery comparison of a single agricultural plot in tropical landscape. LEFT side labeled "December 2020 baseline": dense intact forest canopy, deep green, viewed from directly above at approximately 500m altitude. RIGHT side labeled "March 2026 review": the same plot showing established cocoa plantation with orderly tree rows, lighter green, clearly cultivated but with maintained canopy cover. A vertical white divider line separates the two views. Small UI badges: left side shows a neutral gray label, right side shows a green "PASS" badge indicating no deforestation detected. The imagery has the characteristic look of Sentinel-2 optical satellite data -- slightly soft, true-color composite with visible soil paths and water features. Clean white border frame, no chrome. Flat overhead perspective.

Recommended tool

Real Sentinel-2 data from Copernicus Browser (free). Download actual satellite imagery of a tropical agricultural region at two different dates. Composite in Figma with the UI labels overlaid. Real satellite data will be far more credible than any AI-generated version -- this audience will notice fakes.

---

4. DDS Document Ready

Replaces: DdsDocumentMock component in Step 3 (Submit) Placement: Inside the StepFlow card when "Submit" is expanded Gemini config: aspectRatio: "3:4", imageSize: "2K"

Prompt

Clean document preview mockup showing a completed EU Due Diligence Statement form. Off-white paper texture background (#f4efe6). The document has a structured layout with section headers in dark forest green serif font: "Due Diligence Statement", "Operator Information", "Product Description", "Risk Assessment Summary". Partially visible form fields filled with realistic but generic data. A prominent stamp-like badge in the bottom third reading "DDS ready for submission" in emerald green (#12725f) with a dashed border, pill-shaped. The document sits at a very slight perspective angle on a clean surface, with a soft drop shadow. Minimal chrome -- just the document itself. Think: a premium legal document, not a spreadsheet. Warm muted tones throughout. No EU flag or official branding.

Recommended tool

Figma or Midjourney. A Figma-designed document will give you full control over the text content and ensure nothing reads as gibberish. If using Midjourney, plan to composite real text over the generated layout.

---

5. Open Graph / Social Share Image

Placement: <meta property="og:image"> in page head Gemini config: aspectRatio: "16:9", imageSize: "2K"

Prompt

Minimal social card graphic on warm off-white background (#f4efe6). Left side: large serif text in dark forest green (#16312a) reading "Every shipment needs proof." with a smaller sans-serif subtitle "EUDR compliance workflow for importers". Right side: a small abstract illustration of overlapping emerald green (#12725f) translucent polygons suggesting farm plot boundaries on a muted satellite map texture. Bottom left corner: "TracePlot" wordmark in serif font with a small circular logo mark. Clean, editorial feel, like a premium magazine cover. No photographs, no people, no stock imagery feel. Refined and understated.

Recommended tool

Design in Figma. This is mostly typography and simple shapes -- full creative control matters more than generation capability here.

---

6. Favicon / App Icon

Placement: Browser tab, PWA manifest, Apple touch icon Gemini config: aspectRatio: "1:1", imageSize: "2K" Sizes needed: 16x16, 32x32, 180x180, 512x512 (resize with sharp after generation)

Prompt

Minimal geometric app icon on transparent background. A single emerald green (#12725f) circle with two concentric inner rings (thinner, slightly lighter green), suggesting orbital paths or plot boundaries. The innermost space contains a tiny abstract polygon shape in slightly darker green suggesting a farm plot. Clean vector style. No text, no gradients, just flat geometric shapes. Think: cartographic precision meets modern app icon simplicity.

Recommended tool

Hand-draw as SVG. This is too simple and precise for AI generation. The existing SiteLogo component already has the concentric circle motif -- export and refine that as the favicon base.

---

Design Tokens Reference

For consistency across all generated images:

Production Notes

• All images should be exported as WebP with AVIF fallback for performance.
• Provide 1x and 2x versions. The site max content width is 1160px, so hero images wider than 2320px are wasted bytes.
• Run through ImageOptim or squoosh.app before committing to the repo.
• Add images to /public/images/ and reference via next/image for automatic optimization.