Web Design

You are a senior designer.

Here is my design to review: [describe it or paste it].

Deliver:
1. The mistakes
2. The improvements to make
3. A better version

You are a senior UI/UX designer.

I'm planning a design for [platform: Instagram / website / app]. What it is about: [short description].

Give me, each under its own heading:
- 5 design concepts
- The layout structure
- The color style
- Typography suggestions

1. Phase 1 — Website system and roadmapCopy

   Role: you combine four profiles: a world-class creative director, a UI/UX designer, a senior front-end engineer and a conversion strategist.
   
   Task: build a complete operating system for producing premium 3D animated websites that feel modern and immersive, at the level of a top agency.
   
   Design each of these parts:
   1. Information architecture
   2. Visual identity
   3. The 3D interaction system
   4. The animation language
   5. Responsive layouts
   6. Accessibility strategy
   7. The implementation roadmap
   
   For every animation and every interaction, explain why it is there.

2. Phase 2 — Cinematic scroll journeyCopy

   Role: an elite designer of digital experiences.
   
   My website: [describe your website: purpose, audience, main sections].
   
   Task: turn it into a cinematic journey in 3D. Use:
   - interactive scenes and camera movements
   - storytelling driven by scrolling
   - parallax layers and depth transitions
   - lighting effects and particle systems
   - sections that reveal themselves in an immersive way
   
   Explain how each scene leads the visitor through the story while the site stays clear and easy to use.
   
   Constraint: storytelling must always have a purpose, never decoration for its own sake.

3. Phase 3 — Premium UI and motion systemCopy

   Role: an award-winning product designer.
   
   My website: [describe your website: purpose, audience, main sections].
   
   Task: design a luxury interface system for it, covering:
   - typography, spacing and grids
   - colors
   - glassmorphism, only where it fits
   - cards, buttons, navigation, icons and forms
   - hover effects and loading sequences
   - micro-interactions
   - responsive behavior
   
   Then define one coherent motion language, so that each interaction feels deliberate and finished.

4. Phase 4 — Three.js interaction frameworkCopy

   Role: a senior Three.js developer who is also an interaction designer.
   
   My website: [describe your website: purpose, audience, main sections].
   
   Task: design a full 3D interaction framework for it, including:
   - hero scenes
   - object animations
   - hover interactions and cursor effects
   - camera movements triggered by scrolling
   - transitions between sections
   - loading experiences
   - interactive showcases of the product
   - animations for the calls to action
   
   For each interaction, state precisely what triggers it and how it makes the experience better for the user.

5. Phase 5 — AI-assisted development sprintCopy

   Role: an expert software engineer specialized in building with AI.
   
   My 3D website: [describe your website: purpose, audience, main sections].
   
   Task: split the site into implementation tasks that can be built with AI-assisted development. For every section, provide:
   - development prompts
   - reusable components
   - the scene architecture
   - animation systems
   - responsive requirements
   - accessibility checks
   - testing procedures
   - optimization techniques
   - guidance for deployment
   
   Constraints: the workflow must be ready for production, with a clean architecture, and tuned for fast development.

6. Phase 6 — 3D landing page that convertsCopy

   Role: a creative director and UX strategist focused on conversion.
   
   My product or offer: [describe what the landing page sells and who it is for].
   
   Task: design a striking 3D landing page that wins attention right away and then leads visitors toward taking action. Include:
   - an immersive hero scene
   - animated demonstrations of the product
   - storytelling sections
   - feature showcases
   - testimonials
   - pricing
   - FAQs
   - calls to action built for conversion
   
   Recommend the places where 3D elements should strengthen understanding and trust.

7. Phase 7 — Performance, accessibility and launch QACopy

   Role: a web performance engineer who is also an accessibility specialist.
   
   My 3D animated website: [describe your website: stack, main 3D features, hosting].
   
   Task: optimize it across these areas:
   - Core Web Vitals
   - smooth frame rates
   - lazy loading and asset compression
   - responsive rendering
   - accessibility compliance
   - SEO and structured data
   - analytics integration
   - caching and deployment
   
   Then build a complete quality assurance checklist to run before launch.
   
   Constraint: optimize with performance first, without sacrificing the premium 3D experience.

8. Phase 8 — Full agency-style buildCopy

   Role: act as a coordinated digital agency made up of a creative director, a brand strategist, a UI/UX designer, a front-end architect, a QA engineer and a conversion strategist.
   
   My website: [describe your website: purpose, audience, main sections].
   
   Task: take my premium 3D animated website all the way from the first concept to production, end to end. Include:
   - branding and storytelling
   - the architecture of the 3D scenes
   - animation systems and interaction design
   - guidance for implementation
   - the optimization strategy
   - analytics setup
   - the deployment workflow
   - recommendations for long-term maintenance