Has an AI agent build a professional site for a small-business client from their branding, info, services, contacts and booking needs: structure, copy, pages, working forms and mobile layout, tested before launch, with a final list of issues to fix.
Role: you combine three top-level roles: creative director, front-end architect and web designer. Goal: produce a full blueprint for a premium animated 3D website, at the level a top digital agency delivers on a $10K+ project. About me: - Brand: [brand] - Audience: [audience] - Competitors: [competitors] - Goals: [goals] - Emotional impact I want visitors to feel: [desired feeling] Steps: 1. Analyze my brand, audience, competitors, goals and the emotional effect I am after. 2. Then design each of these, one section each: visual identity, site architecture, the 3D environment, the animation system, the storytelling flow, the tech stack, the performance strategy and the development workflow. If any of the details above are missing, ask me for them before you start.
Role: you are a film production designer and a top-tier 3D environment artist. Goal: design a full cinematic world for my animated 3D website. Define, one section each: - architecture of the world - lighting - materials and textures - atmosphere - camera choreography - visual hierarchy - transitions - interactive objects - color palette - storytelling through the environment Aim: every scroll should feel like travelling through a premium digital experience.
Role: you are an interactive experience designer with award-winning work. Goal: create a cinematic journey for my animated 3D website, driven by scrolling, in which every section flows naturally into the next. Design: - camera movements - depth through parallax - scene changes - immersive animations - interactions with objects - micro-interactions - emotional pacing For each transition, explain how it strengthens the story and keeps users engaged.
Role: you are a senior web developer who builds with the help of AI. Goal: lay out a complete workflow for producing an animated 3D website of agency quality with AI tools. Cover every stage in order: 1. Concept generation 2. UI creation 3. Generating 3D assets 4. Coding 5. Implementing animations 6. Testing 7. Optimization 8. Deployment 9. Maintenance For each stage, point out where AI speeds up the work dramatically while the result stays professional.
Role: you are a designer of luxury digital products. Goal: create a premium UI system for my animated 3D website. Include: - typography, spacing and colors - glassmorphism and gradients - buttons, cards and navigation - hover effects - loading animations - transitions and micro-interactions For each design choice, explain how it supports a high-end agency look. Constraint: the design must be minimalist, sophisticated and timeless, nothing else.
Role: you are a senior Three.js engineer who is also a motion designer. Goal: design an advanced interaction system for my animated 3D website. Include: - 3D models - animations based on physics - custom shaders - particle systems - dynamic lighting - camera controls - smooth scrolling - object transformations - immersive effects For each technique, explain where to use it to get the most visual impact while keeping the site easy to use.
Role: you are a web performance engineer who specializes in immersive experiences. Goal: build a framework so that my animated 3D website stays quick and responsive. Address: - optimizing 3D models - compressing textures - lazy loading - rendering optimization - efficient animations - accessibility - SEO - Core Web Vitals - responsiveness on mobile - compatibility across browsers
Attached: an image of [a landing page / dashboard / layout], captured as a screenshot. Task: - Recreate it as clean HTML + CSS that is responsive. - Reproduce its layout, its spacing and its visual hierarchy. - Wherever the image leaves something unclear, note the assumption you made, and give me the full list of those assumptions at the end.
Role: you are a UX content expert. Context: I am building a website for [service] and need to explain how it works. Task: design a complete process section in 3 steps. For each step, include: - the step number and a direction for its icon - a headline of fewer than 6 words - an explanation in 2 sentences Also show how each step creates anticipation for the next one, so that a first-time visitor sees the whole process as effortless and trustworthy.
Create the user interface of a mobile app that tracks fitness. - Theme: dark mode - Layout: based on cards - Key element: progress rings - Accent color: orange
Design [what it is, e.g., a landing page, a mobile app screen, an infographic] for [who it is for]. Visual style: [visual style, e.g., modern and minimal] Key elements: [the sections or components it must include] Colors and fonts: [hex colors and font names, if you have them] Format: [HTML for pages and layouts / React for interactive elements and dashboards with charts / SVG or Mermaid for graphics and diagrams — or leave it to you to choose]