No posts yet.
# MASTER BUILD PROMPT — IMMERSIVE FRUTIGER AERO AI ECOSYSTEM You are an expert senior software engineer, UI/UX designer, 3D web developer, creative director, AI product architect, and autonomous coding agent. Your job is to design and build a COMPLETE, FUNCTIONAL, POLISHED AI ECOSYSTEM — not a static mockup, not a concept page, and not a collection of disconnected dashboards. The finished product should feel like entering a beautiful interactive digital world whose purpose is to give the user access to an entire collection of AI-powered tools and agents. The experience should combine: * a fully explorable interactive world * an AI operating system / ecosystem * multiple specialized AI agents * a central home/base area * an interactive city * a large beautiful lake * Frutiger Aero visual design * highly interactive environmental elements * polished modern web technology * a strong sense of progression and discovery * functional AI tools behind the visuals The final product must feel like a REAL PRODUCT that happens to exist inside a beautiful world. Do not build a corporate SaaS dashboard with a Frutiger Aero skin. Build an actual WORLD. --- # 1. CORE PRODUCT CONCEPT The application is an "AI Ecosystem World." The user should enter the application and feel as though they have entered a living digital environment. Instead of presenting every feature as a row of cards, the ecosystem should organize functionality spatially. The user can move around the environment and interact with different locations. Different buildings, areas, terminals, structures, and landmarks represent different AI capabilities. For example: * Study Centre → GCSE learning and revision * AI Laboratory → general AI agents * Creative Studio → video/image/content creation * Automation Centre → workflows and automation * Research Centre → research and information gathering * Workspace → projects and files * AI Hub → model/provider management * Library → saved resources * Settings / Control Centre → ecosystem configuration * Personal Home/Base → profile, active projects, progress and shortcuts The architecture must be designed so additional buildings and AI agents can be added later without rebuilding the entire application. The world should feel cohesive. Everything belongs to the same ecosystem. --- # 2. VISUAL IDENTITY — FRUTIGER AERO THIS IS EXTREMELY IMPORTANT. The primary visual language must be strongly inspired by the Frutiger Aero aesthetic. Do NOT make this look like: * generic modern SaaS * minimal Apple UI * dark cyberpunk * monochrome glassmorphism * boring enterprise software * plain Material Design * standard Tailwind dashboard design The visual identity should be: VIBRANT. BRIGHT. PLAYFUL. GLOSSY. CLEAN. NATURAL. FUTURISTIC. OPTIMISTIC. IMMERSIVE. Use the visual language associated with classic Frutiger Aero: * brilliant blue skies * cyan * turquoise * aqua * vibrant green * fresh lime greens * white highlights * glossy surfaces * glass-like materials * translucent UI * soft gradients * shiny rounded surfaces * exaggerated reflections * water * bubbles * floating spheres * clouds * grass * leaves * flowers * clean futuristic architecture * sunlight * lens-like highlights * soft atmospheric haze * glossy buttons * subtle skeuomorphic details * environmental reflections * bright peaceful lighting The design should feel like: "the optimistic future people imagined in the 2000s." But it must still feel technologically sophisticated in 2026. --- # 3. BUBBLES — A MAJOR VISUAL ELEMENT Bubbles should be a recurring visual motif throughout the ecosystem. Do NOT simply place a few random bubbles on the homepage. Create an actual visual language around bubbles. Use: * tiny floating bubbles * large translucent bubbles * clusters of bubbles * bubbles rising from water * bubbles near UI elements * bubbles moving gently through the environment * bubbles catching sunlight * glossy reflections inside bubbles * subtle refraction * bubbles appearing when the user interacts with objects * bubbles floating around the lake * bubbles around water features * occasional bubble particles in the atmosphere Animation should be subtle enough not to become annoying. Bubbles should move slowly, naturally and continuously. Create variation in: * size * opacity * speed * direction * depth * reflection * position Avoid making the world look like it is filled with identical circles. --- # 4. THE LAKE THE LAKE IS A MAJOR PART OF THE WORLD. Do NOT treat it like decoration. The lake should be one of the most visually important locations in the ecosystem. It should be large enough to establish a sense of geography. The environment should be designed around it. The lake should include: * realistic stylized water * blue/cyan water * visible reflections * soft ripples * sunlight reflections * subtle waves * floating bubbles * small particles * vegetation around the shoreline * rocks * grass * flowers * trees * small platforms * bridges * possibly small islands * environmental lighting reflected on the surface The water should respond subtly to the environment. For example: * ripples when objects interact with it * different reflections depending on time/lighting * animated surface movement * gentle floating particles Do NOT make the lake look hyper-realistic. It should be stylized and beautiful while still feeling believable. --- # 5. WORLD LAYOUT Create a large explorable environment. The world should have a clear central hub surrounded by multiple areas. Suggested structure: ``` [RESEARCH DISTRICT] │ [STUDY CENTRE] \ \ [CREATIVE] —— [CENTRAL HUB] —— [AI LAB] \ │ \ │ \ [MAIN PLAZA] \ │ \ │ \ [LAKE] \ │ \ [ISLAND] \ [WORKSPACE] [AUTOMATION] ``` This is only a conceptual structure. Improve it as necessary while maintaining a coherent navigable world. The lake should visually connect several regions. The central hub should be the natural starting point. --- # 6. CENTRAL HUB The central hub should be the first area the player sees. It should immediately communicate: "This is my AI ecosystem." Include: * central futuristic plaza * large circular or organic architecture * water features * greenery * bubbles * interactive displays * paths leading to other districts * floating AI symbols * ambient particles * dynamic lighting * subtle animations * environmental sound hooks if supported The hub should have a strong focal landmark. Possible focal landmark: A large glowing AI core / energy orb / glass sphere surrounded by water. The user should be able to walk around it. --- # 7. PLAYER CHARACTER / NAVIGATION The user should have their own controllable character or avatar. This should NOT simply be a camera floating through a static world. The user should feel like they are physically inside the ecosystem. Support: * WASD movement * mouse look / camera control * smooth movement * sprint where appropriate * jumping if appropriate * interaction key * collision detection * camera smoothing * sensible movement boundaries * responsive controls On desktop: W / A / S / D = movement Mouse = camera E = interact ESC = pause / system menu Also consider: * controller support * touch controls for compatible devices Do not force complicated controls. The user should understand the environment immediately. --- # 8. INTERACTIVE WORLD Objects in the world should actually DO something. Examples: Walk up to the Study Centre. The building reacts. A holographic / glossy interface appears. The user selects: "Open GCSE Study Agent" The world transitions naturally into the study environment. Similarly: Walk to Creative Studio → open Video Editing Agent. Walk to AI Laboratory → choose AI agent. Walk to Automation Centre → create automation. Walk to Research Centre → launch research agent. The world is therefore the navigation system. The UI should support the world rather than replace it. --- # 9. AI ECOSYSTEM MODULES Build the ecosystem architecture around modular AI agents. At minimum, include these conceptual modules: ## A. GCSE STUDY AGENT A dedicated AI study system. Capabilities should eventually include: * GCSE topic explanations * revision assistance * quiz generation * flashcards * exam-question practice * mark-scheme analysis * past-paper marking * feedback * weak-topic detection * revision planning * progress tracking * topic mastery * exam technique * mistake tracking IMPORTANT: The study agent should be designed so the user can upload/paste past-paper questions and receive structured feedback. The long-term design should support marking systems such as: ✓ correct ✗ incorrect △ partially correct with an explanation. Do not hard-code the AI response. Create a proper agent interface that can later connect to the chosen AI provider. --- # 10. VIDEO EDITING AI Create a "Creative Studio" focused on video editing. The long-term goal is: The user provides a video. The AI analyses the video. The system identifies: * boring sections * pauses * dead air * unnecessary sections * repetition * weak moments * interesting moments * possible hooks * suitable cuts * visual opportunities The system should eventually be capable of generating editing instructions. Potential future capabilities: * automatic clipping * removal of dead air * caption generation * subtitle styling * B-roll suggestions * zoom recommendations * transition recommendations * emphasis effects * hook detection * short-form conversion * TikTok/Reels/Shorts formatting * documentary/interview editing workflows IMPORTANT: Create the architecture so these capabilities can later connect to real AI/video-processing services. Do not pretend these features are functional if they are not connected. Use clear "coming soon" or integration states when necessary. --- # 11. AI AGENT HUB Create a dedicated AI Laboratory / Agent Hub. This is where the user can view their available AI agents. Design it like an actual place in the world. The user should be able to see: * agent name * purpose * status * model * provider * recent activity * token usage where available * current task * health/status * launch button Potential agents: * Study Agent * Research Agent * Coding Agent * Video Agent * Writing Agent * Planning Agent * Automation Agent * General Assistant Make the architecture extensible. A new agent should be able to be added through configuration rather than rewriting the UI. --- # 12. MODEL / PROVIDER SYSTEM The ecosystem should NOT hard-code itself to one AI provider. Create an abstraction layer. Conceptually: User ↓ AI Agent ↓ Model Router ↓ Provider ↓ Model Support the possibility of: * OpenAI-compatible APIs * Anthropic-compatible APIs * Google/Gemini APIs * local models * OpenRouter * other compatible providers Do not expose API keys in the browser. All secrets must be handled securely on the server or through appropriate environment configuration. Create provider abstraction interfaces so the model can be switched later. Example conceptual configuration: provider: name model: name endpoint: URL credentials: environment/server-side secret The ecosystem UI should allow provider/model selection where appropriate without exposing credentials. --- # 13. MODEL ROUTING Build the architecture to support intelligent model routing. Possible routing strategies: * fastest * cheapest * highest quality * balanced * user-selected * fallback For example: User request ↓ Router ↓ Primary model ↓ failure? ↓ Fallback model The user should eventually be able to see which model handled a task. Do not make routing mandatory if it complicates the initial implementation. Build the architecture so it can be added cleanly. --- # 14. PROJECT WORKSPACE Create an interactive Workspace area. This should manage: * projects * files * AI conversations * tasks * notes * generated content * saved outputs * agent sessions For example: PROJECT "My AI Ecosystem" Inside: * Website * AI Agents * GCSE * Video Projects * Research * Notes * Automations Design this as part of the ecosystem world. --- # 15. AI MEMORY Create a proper memory architecture. There should be multiple levels: ## Short-term context Current conversation/task. ## Project memory Information related to the current project. ## Long-term memory Useful user preferences and persistent ecosystem information. Memory should be: * inspectable * editable * deletable * clearly explained Never create hidden mysterious memory. --- # 16. AUTOMATION CENTRE Create an Automation district. The visual concept should be a futuristic but friendly automation facility. The user should eventually be able to create: TRIGGER ↓ AI ACTION ↓ CONDITION ↓ ACTION ↓ OUTPUT Example: "New video uploaded" ↓ "AI analyses video" ↓ "Find strongest clips" ↓ "Create editing plan" ↓ "Save results" The UI should represent workflows visually. Use nodes, paths, flowing particles, or similar visual metaphors. Keep it beautiful and understandable. --- # 17. RESEARCH CENTRE Create a Research building. The user should eventually be able to: * ask questions * research topics * compare sources * summarize sources * save findings * generate notes * create citations * create research reports The UI should make source provenance visible. Never fabricate sources. --- # 18. LIBRARY Create a beautiful ecosystem library. It stores: * saved AI conversations * generated documents * research * study material * projects * videos * prompts * useful resources Use visual organization. Possible design: large glass shelves / floating panels / holographic archive system. But maintain Frutiger Aero style instead of generic sci-fi. --- # 19. UI DESIGN The UI should exist in two layers. LAYER 1: THE WORLD The interactive 3D/environmental experience. LAYER 2: THE INTERFACE Panels and menus that appear naturally when needed. Avoid putting huge permanent dashboards over the world. Use: * glass panels * translucent windows * rounded corners * soft shadows * glossy controls * white/cyan surfaces * blue gradients * green accents * subtle reflections * bubble effects * soft depth Interfaces should feel like physical objects from the world. --- # 20. FRUTIGER AERO UI DETAILS Buttons should feel slightly tactile. Use: * glossy highlights * subtle gradients * rounded shapes * soft inner shadows * slight reflections * tiny animated highlights Cards should look like polished glass/plastic rather than flat rectangles. Panels can include: * faint bubbles * light streaks * reflections * soft translucency BUT: Do not overdo blur. The interface must remain readable. The user must always be able to distinguish: * clickable * selected * disabled * processing * successful * failed --- # 21. ENVIRONMENT DETAILS The world should contain a LOT of environmental detail. Include: * grass * trees * flowers * bushes * clouds * water * rocks * fountains * bridges * paths * benches * signs * futuristic buildings * glass structures * glowing displays * water droplets * bubbles * floating particles * birds or gentle environmental life where technically appropriate Do not make the environment empty. Do not make every object perfectly symmetrical. Create natural variation. --- # 22. LIGHTING Lighting should create the optimistic Frutiger Aero feeling. Use: * bright sky lighting * warm sunlight * cyan environmental reflections * blue shadows * bright highlights * soft bloom * reflective water * atmospheric depth Avoid: * excessive darkness * cyberpunk neon * horror lighting * oppressive atmosphere The world should feel: PEACEFUL. ALIVE. OPTIMISTIC. SAFE. FUTURISTIC. --- # 23. SKY The sky should be an important part of the visual identity. Create: * rich blue sky * large soft clouds * subtle atmospheric gradients * sunlight * distant haze The sky should not look like a flat CSS gradient. Where practical, use environmental rendering or layered animated elements. --- # 24. ARCHITECTURE Buildings should be futuristic but friendly. Avoid dystopian cyberpunk buildings. Use: * curved architecture * large glass windows * blue/cyan surfaces * white structures * green environmental integration * rounded forms * water features * vegetation * organic shapes Think: "optimistic technology integrated into nature." --- # 25. SOUND DESIGN Create the architecture for ambient sound. Potential sounds: * soft water * birds * wind * subtle environmental tones * UI clicks * soft confirmation sounds * bubbles * distant city ambience Sound should be optional. Include a master volume setting. Do not autoplay intrusive music. --- # 26. ANIMATION The world should NEVER feel completely static. Add subtle motion: * water movement * cloud movement * bubbles * plants moving slightly * particles * lights * UI transitions * floating elements * environmental effects Animations should generally be slow and smooth. Avoid excessive bouncing. Avoid distracting constant motion. Respect reduced-motion accessibility settings. --- # 27. RESPONSIVE DESIGN The world is primarily designed for desktop. However, architect the interface so it can adapt to smaller screens. Desktop: full immersive experience. Tablet: simplified interaction. Mobile: potentially switch to a simplified ecosystem navigation mode if full 3D is impractical. Do not destroy usability on smaller screens. --- # 28. PERFORMANCE Performance is extremely important. Do NOT create a beautiful environment that runs at 10 FPS. Use: * lazy loading * asset optimization * instancing where appropriate * efficient rendering * level-of-detail techniques * texture compression where appropriate * code splitting * dynamic loading * sensible particle counts * efficient state management The ecosystem should remain responsive. --- # 29. TECHNOLOGY Choose a sensible modern stack based on the existing project. Preferred conceptual stack: Frontend: React / Next.js or the existing framework if one is already established. 3D: Three.js / React Three Fiber where appropriate. Styling: Tailwind CSS or a clean component system where useful, but heavily customized to achieve the Frutiger Aero identity. Backend: Use the existing project architecture if one exists. API: Secure server-side API routes/services. Database: Use an appropriate database abstraction if persistence is required. Authentication: Implement only when genuinely required. Do NOT rewrite the entire application just because another framework seems newer. First inspect the existing repository. Reuse working infrastructure. --- # 30. ABSOLUTELY NO FAKE FUNCTIONALITY This is one of the most important requirements. DO NOT create fake buttons that do nothing. DO NOT make interfaces that only LOOK functional. DO NOT pretend an AI agent is connected when it isn't. DO NOT hard-code fake AI responses and call them AI. When something cannot yet be connected: * create the correct interface * create the correct architecture * clearly label the integration state * prepare the API layer * make the feature easy to connect later A polished placeholder is acceptable. A fake feature presented as functional is NOT. --- # 31. REAL AI INTEGRATION Create an abstraction such as: AIProvider AIModel AIAgent AIRequest AIResponse AgentSession ModelRouter ProviderRegistry Use clean interfaces. The frontend should never contain secret API keys. Use environment variables and server-side requests. The architecture should make it possible to swap models without rewriting every agent. --- # 32. ERROR HANDLING The ecosystem should feel reliable. Every AI request should have states: idle connecting thinking tool_use streaming complete error cancelled Show these states clearly. When something fails: DO NOT show a mysterious error. Explain: * what failed * why it may have failed * whether retrying is possible Provide a Retry action. --- # 33. STREAMING RESPONSES Where supported by the provider, AI responses should stream naturally. Do not wait for a giant block of text before displaying it. Use: * streaming text * subtle thinking indicators * tool activity * progress indicators The user should feel that the AI is actively working. --- # 34. AGENT TOOL ACTIVITY For agents that can use tools, provide an optional activity view. Example: AI Agent Thinking... Reading project files... Searching for component... Editing App.tsx... Running tests... Fixing error... Complete. This should be readable without exposing private chain-of-thought. Show actions/results rather than hidden reasoning. --- # 35. NAVIGATION Users must always know: * where they are * how to return home * what area they're in * what agent is active Provide a subtle ecosystem navigation system. For example: HOME → AI LAB → Coding Agent or: HOME → STUDY CENTRE → GCSE Mathematics → Algebra Do this without destroying immersion. --- # 36. HOME / QUICK ACCESS Include a small unobtrusive quick-access interface. Possible buttons: HOME AGENTS PROJECTS SEARCH MEMORY SETTINGS The user can open this with a keyboard shortcut. For example: TAB or ESC The exact control can be chosen based on UX. --- # 37. SEARCH Create global ecosystem search. Search: * projects * agents * conversations * files * research * notes * settings Results should be fast. The search interface should match the ecosystem aesthetic. --- # 38. NOTIFICATIONS Use subtle ecosystem notifications. Examples: "Study Agent finished marking your paper." "Video analysis complete." "Research report saved." "Automation failed." Notifications should appear naturally and disappear when appropriate. Allow notification history. --- # 39. USER PERSONALIZATION The ecosystem should eventually support personalization. Possible settings: * player/avatar appearance * UI intensity * animation amount * sound * ambient music * accessibility * preferred AI provider * preferred model * theme variations * ecosystem layout Keep personalization modular. --- # 40. PROGRESSION / ECO-SYSTEM FEEL Consider creating a light progression system. Not a pointless videogame XP system. Instead, represent activity visually. Examples: More study completed → Study Centre becomes more active. More projects → Workspace becomes busier. More research → Research Centre gains archived materials. This should be subtle. Do NOT turn the application into a mobile game. --- # 41. LOADING EXPERIENCE Create an excellent initial loading experience. Instead of a generic spinner: Show the ecosystem beginning to load. For example: sky appears clouds appear lake appears bubbles appear buildings appear world loads AI core activates Then: "Welcome back." Keep loading efficient. Do not create a 30-second cinematic every launch. --- # 42. FIRST-TIME USER EXPERIENCE The first launch should teach the user naturally. Don't dump a massive tutorial on them. Use contextual guidance. Example: "Welcome to your AI ecosystem." "Move around using WASD." "Walk toward the glowing buildings to explore." "Press E to interact." Then let the user discover things naturally. The onboarding can be dismissed. --- # 43. ACCESSIBILITY Implement: * keyboard navigation where appropriate * readable typography * strong contrast * reduced-motion mode * screen-reader support for UI elements * clear focus states * scalable text * alternative navigation for users who cannot use the 3D world The immersive environment must NEVER prevent someone from accessing the actual tools. --- # 44. SECURITY Treat all AI credentials as secrets. Never: * expose API keys in frontend JavaScript * hard-code credentials * commit secrets * store provider keys in localStorage * send secrets to the browser unnecessarily Use: .env server-side secrets secure API routes and appropriate provider authentication. --- # 45. CODE QUALITY Write production-quality code. Use: * reusable components * clear folder structure * typed interfaces * error boundaries * modular services * separation of concerns * reusable hooks/utilities * sensible naming * comments only where they add value Avoid: * giant components * duplicated code * random magic numbers everywhere * inline API secrets * unnecessary dependencies * temporary hacks left in production --- # 46. ARCHITECTURE SHOULD BE EXTENSIBLE The ecosystem will grow. Therefore design around modules. For example: /agents /providers /models /world /buildings /ui /components /projects /memory /automations /research /study /creative /settings Do not make every feature depend directly on every other feature. Use clean interfaces. --- # 47. WORLD DATA MODEL The world itself should be data-driven. For example: Building: id name description position category agent interaction unlockState visualConfig This makes adding buildings easy. A new building should NOT require rewriting the renderer. --- # 48. AI AGENT DATA MODEL Likewise: Agent: id name description icon building provider model capabilities status configuration session This allows agents to be added dynamically. --- # 49. INTERACTION SYSTEM Create a centralized interaction system. Potential interactions: open agent open panel inspect object enter building view information start workflow launch project trigger automation Do NOT implement hundreds of custom interaction systems. Use a unified system. --- # 50. CAMERA / WORLD FEEL The camera should make the user feel physically present. Avoid: * stiff camera movement * extreme motion sickness * weird clipping * sudden teleportation Use smooth interpolation. Add sensible camera collision. Keep the environment readable. --- # 51. VISUAL DEPTH The ecosystem should have strong environmental depth. Use: foreground elements midground structures background skyline distant mountains/terrain if appropriate atmospheric haze cloud depth water reflections lighting gradients This prevents the world from looking like a flat game level. --- # 52. CITY DESIGN The city should be vibrant but peaceful. Include: * futuristic buildings * glass architecture * curved walkways * bridges * water channels * greenery * parks * signs * plazas Do NOT fill every available space. Leave intentional open areas. The lake should create breathing room. --- # 53. NATURAL + DIGITAL HYBRID The MOST IMPORTANT artistic concept is: NATURE + TECHNOLOGY. Not: TECHNOLOGY replacing nature. The ecosystem should feel as though technology grew naturally into the environment. Examples: glass buildings surrounded by trees AI displays beside ponds water running through technology hubs green parks surrounding futuristic architecture bubbles around terminals plants growing around structures This is a fundamental part of the identity. --- # 54. CENTRAL AI CORE Create one major landmark representing the entire AI ecosystem. It could be: a large floating sphere an energy core a massive transparent orb or another original structure. It should be visible from several places. The object represents: the ecosystem itself. It can provide: * global status * active AI model * system health * notifications * shortcuts Do NOT make it look like a generic glowing neon ball. Make it Frutiger Aero: glass water light organic shapes bubbles soft energy cyan/blue/green --- # 55. VISUAL MOTION LANGUAGE The entire environment should have a consistent motion language. Water: slow and fluid. Bubbles: slow upward drift. Clouds: very slow movement. Plants: subtle movement. UI: smooth transitions. AI activity: slightly faster energetic motion. Notifications: short subtle animation. Avoid chaotic animation. --- # 56. THE USER'S MAIN EXPERIENCE The ideal loop should be: ENTER WORLD ↓ LOOK AROUND ↓ CHOOSE DESTINATION ↓ INTERACT WITH BUILDING ↓ OPEN AI TOOL ↓ WORK WITH AI ↓ SAVE RESULT ↓ RETURN TO WORLD ↓ CONTINUE EXPLORING This should feel natural. --- # 57. DO NOT MAKE THE 3D WORLD A GIMMICK This is critical. The 3D environment must genuinely improve navigation and experience. A bad implementation would be: 3D background * huge dashboard * random buildings That is NOT acceptable. Instead: WORLD = NAVIGATION BUILDINGS = FEATURES AI AGENTS = FUNCTIONAL TOOLS LAKE = ENVIRONMENTAL ANCHOR CENTRAL HUB = HOME The world itself should organize the product. --- # 58. UI FALLBACK Because 3D can sometimes be slower or inaccessible, create a fallback navigation layer. A user should be able to access: Agents Projects Study Creative Research Automation Settings without needing to physically walk everywhere. But keep the world as the primary experience. --- # 59. EMPTY STATES Empty states should feel like part of the world. Instead of: "No projects found." Use something like: "Your workspace is waiting for its first project." Then give the user: Create Project Do not turn every message into cheesy writing. Use judgment. --- # 60. FINAL POLISH Before declaring the project complete: Test everything. Check: * navigation * responsiveness * AI request states * errors * loading states * world collisions * building interactions * menus * keyboard controls * accessibility * performance * console errors * broken links * broken imports * API failures * mobile fallback Remove: * placeholder text * obvious unfinished components * dead buttons * fake functionality * debug UI * console spam * temporary styling --- # 61. DEVELOPMENT PROCESS DO NOT blindly start coding. First: 1. Inspect the entire existing repository. 2. Understand the current architecture. 3. Identify what already works. 4. Identify what can be reused. 5. Identify what must be rebuilt. 6. Create a clear implementation architecture. 7. Then begin implementation. Do NOT destroy existing working functionality unless necessary. When modifying an existing feature: preserve working behavior. When creating new features: make them modular. --- # 62. DO NOT STOP AT THE HOMEPAGE This is especially important. Do not spend all your effort making the landing page beautiful and then leave the actual ecosystem incomplete. The finished result must include: WORLD NAVIGATION BUILDINGS AI AGENTS AI INTERFACE PROJECTS SETTINGS MODEL/PROVIDER ARCHITECTURE ERROR STATES PERSISTENCE WHERE APPROPRIATE and a clean path toward further AI integrations. --- # 63. VISUAL QUALITY BAR Imagine the user opening the website and thinking: "WHAT THE HELL, THIS IS AN ACTUAL WORLD." That is the target. The user should NOT think: "This is a dashboard with a blue background." The environment should feel carefully art-directed. --- # 64. AESTHETIC REFERENCES Use the following concepts as inspiration, NOT direct copying: * Frutiger Aero * early 2000s optimistic technology * glossy software interfaces * futuristic eco-technology * bright water * clean natural environments * futuristic parks * glass architecture * digital ecosystems * polished game-world environments Do NOT copy copyrighted characters, logos, game assets, or proprietary designs. The final aesthetic must be original. --- # 65. COLOUR DIRECTION Primary family: sky blue cyan aqua turquoise Secondary: fresh green lime grass green Supporting: white soft grey very light blue Accent: deeper blue bright cyan occasional energetic green Avoid relying on dark purple, black, or red as dominant colours. The ecosystem should feel bright. --- # 66. TYPOGRAPHY Typography should be modern, clean and highly readable. Use rounded or humanist forms where appropriate. Avoid overly futuristic fonts that reduce readability. Headings can be expressive. Body text must remain extremely readable. --- # 67. DESIGN PRINCIPLE Every design choice should answer: "Does this feel like a beautiful optimistic digital ecosystem?" If not: rethink it. --- # 68. IMPORTANT: BUILD THE REAL THING You are not being asked to generate a concept. You are being asked to implement the ecosystem. Therefore: write the code create the components create the world create the interactions create the architecture connect the functionality that can actually be connected test it fix errors polish it and leave the repository in a working state. Do not simply tell me how I could build it. BUILD IT. --- # 69. FINAL DELIVERABLE When implementation is complete, provide: 1. A working application. 2. A clear summary of the architecture. 3. A list of implemented AI agents. 4. A list of integrations that are genuinely functional. 5. A list of integrations that require API/provider credentials. 6. A list of intentionally unfinished features. 7. Instructions for running the project. 8. Instructions for configuring AI providers. 9. A brief performance/accessibility summary. Never claim something works when it has not been tested. --- # FINAL CREATIVE DIRECTION The final ecosystem should feel like: A beautiful futuristic eco-city. A peaceful digital world. A personal AI operating system. A place the user can actually explore. A collection of powerful AI agents hidden inside an optimistic world. Bright blue sky. Huge beautiful lake. Green landscapes. Glossy architecture. Hundreds of subtle bubbles. Water reflections. Glass surfaces. Clouds. Trees. Flowers. Futuristic buildings. Interactive AI systems. And underneath all of that: REAL SOFTWARE. REAL AGENTS. REAL PROJECTS. REAL AI. REAL FUNCTIONALITY. The goal is not simply to make an AI website. The goal is to make the user feel like they have their OWN AI WORLD. Build it accordingly.
No posts yet.