Google Stitch Design Prompts for Mars City Entertainment Co.
Use these prompts in Google Stitch (Standard Mode) to generate UI designs for the various components of the Mars City Entertainment ecosystem.
1. Main Control Panel (Central Hub)
Goal: A central dashboard that links to the three main projects (DAM Pro, Legacy Data Vault, Media Wiki) with status indicators.
Prompt:
Design a futuristic yet professional "Main Control Panel" dashboard for a media company called "Mars City Entertainment". Dark mode default.
Layout: * Header: "Mars City Control Plane" logo on left. User profile, system status (green dot "Systems Nominal"), and a date/time widget on the right. * Hero Section: Three large, card-based entry points arranged horizontally (or vertically on mobile): 1. DAM Pro: Icon representing a cloud media library. Status text: "Online - 1.2TB Used". Action button: "Launch DAM". 2. Legacy Data Vault: Icon representing a secure vault or archive. Status text: "Secure - Last Backup: Today". Action button: "Open Vault". 3. Media Wiki: Icon representing a book or knowledge base. Status text: "Documentation & Specs". Action button: "Read Wiki". * Quick Stats Widget: A row below the cards showing aggregate stats: "Total Assets: 15,420", "Network Traffic: Low", "Active Users: 3". * Footer: Minimalist footer with "Mars City Cloud Infrastructure v2.0" and links to support.
Style: * Background: Deep space blue/black (
#101822). * Cards: Slightly lighter dark blue (#1c2430) with subtle borders. * Accents: Electric Blue (#136dec) for primary actions, slight neon glow effects on hover. * Typography: 'Inter' font, clean and readable.
2. Digital Asset Manager Pro (DAM Pro) UI
Goal: A modern, functional interface for managing large media libraries.
Prompt:
Design a "Digital Asset Management" web application interface called "DAM Pro".
Layout: * Sidebar (Left): Navigation menu items: "Dashboard", "All Assets", "Collections", "Upload", "Settings". Below that, a "Storage Used" progress bar (65% full). * Main Content Area: * Top Bar: Search bar ("Search assets...") centered. Filter button on right. View toggle (Grid/List). * Gallery Grid: A responsive grid of media thumbnails (images, video placeholders). Each card has a thumbnail, title (truncate), file type badge (JPG, MP4), and a "more options" (three dots) menu. * Upload Area: A distinct "Drag & Drop" zone at the top of the grid or as a floating action button (FAB) in the bottom right. * Right Panel (Contextual): When an asset is selected, show "Asset Details": Preview image, Metadata fields (Date, Size, Dimensions), Tags input field (with chips for existing tags), and a "Download" button.
Style: * Clean, data-dense but not cluttered. * Background: Light gray (
#f6f7f8) or Dark Blue (#101822) depending on mode. * Primary Color: Blue (#136dec). * Rounded corners (rounded-xl) on cards.
3. Legacy Data Vault UI
Goal: A secure, archival-focused interface. Less about "browsing", more about "preserving" and "timelines".
Prompt:
Design a "Personal Data Archive" interface called "Legacy Data Vault".
Layout: * Concept: A timeline-based or folder-tree based view of personal history. * Header: "Legacy Vault" secure lock icon. "Vault Locked/Unlocked" toggle. * Main View: * Timeline Mode: A vertical timeline on the left showing years (2024, 2023, ...). The main area shows "Life Events" or "Data Dumps" associated with that year. * Folder Mode: A hierarchical tree view of folders: "Documents", "Photos", "Financials", "Health". * Security Indicator: Prominent "End-to-End Encrypted" badge.
Style: * Theme: "Secure & Stable". Darker, perhaps slate gray or obsidian. * Accents: Gold or Amber (
#f59e0b) to signify "precious/archival" data, contrasting with the DAM's blue. * Font: Monospace for data hashes/IDs, Sans-serif for titles.
4. Media Wiki UI
Goal: A readable documentation site (like the one we just built).
Prompt:
Design a "Documentation Wiki" interface for "Mars City Entertainment".
Layout: * Sidebar (Left): Collapsible navigation tree. Sections: "Home", "DAM Pro", "Architecture", "Components". * Main Content: * Breadcrumbs: "Home > DAM Pro > Architecture". * Article Header: Large title "System Architecture", "Last updated: Today". * Content: Text paragraphs, code blocks (dark background with syntax highlighting colors), info callout boxes (blue background "Note", yellow background "Warning"). * Table of Contents (Right): Sticky sidebar with "On this page" links.
Style: * Clean, high-contrast text for reading. * Code blocks: Dark theme (Monokai-ish). * Brand: Minimal Mars City logo in top left.
Technical Notes for Export
- Framework: Tailwind CSS.
- Font: Inter (Google Fonts).
- Icons: Material Symbols.