Five Design Concepts for Instagram, a Website or an App

1. Phase 1 — Site structure and goalsCopy

   Role: you are a premium website strategist hired to plan a website that converts well for my business.
   
   Business details (model, target audience, offer, goals):
   [paste everything]
   
   Task: using these details, define the full structure of the website:
   - the pages it needs
   - the hierarchy of sections on each page
   - how the content flows
   - the conversion goal of every page

2. Phase 2 — Brand identity and messagingCopy

   Business details:
   [paste]
   
   Task: analyze my business and define:
   - the brand tone
   - the voice
   - a positioning statement
   - the core message
   - the emotional angle
   
   The messaging must be clear, feel premium and match my target audience.

3. Phase 3 — Homepage that convertsCopy

   Business details:
   [paste]
   
   Task: design the full structure of the homepage so that it builds trust, makes the value clear and pushes visitors to act. Include:
   - the headline strategy
   - the logic behind the subheadline
   - where to place proof
   - the benefit sections
   - how the offer is explained
   - how the calls to action are structured

4. Phase 4 — Website copyCopy

   Business details:
   [paste]
   
   Task: write the full copy for every main page of the website: Home, About, Services or Products, and Contact.
   
   Language: clear and persuasive, consistent with my brand voice.

5. Phase 5 — Visual directionCopy

   Business details or brand identity from the earlier phases:
   [paste]
   
   Task: give me a detailed visual direction for my website, covering:
   - layout style
   - color palette
   - typography suggestions
   - spacing principles
   - image style
   
   The design must feel modern, premium and professional.

6. Phase 6 — Responsive HTML and CSSCopy

   Site structure and content from the earlier phases:
   [paste structure and copy]
   
   Task: write clean, responsive HTML and CSS for my whole website, built on this structure and this content.
   
   Requirements: it must work well on mobile, and the code must be cleanly organized so it is easy to edit.

7. Phase 7 — SEO foundationCopy

   Website content:
   [paste content]
   
   Task: optimize this content for search engines. Suggest, page by page:
   - title tags
   - meta descriptions
   - heading structure
   - where to place keywords
   - an internal linking strategy

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

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

1. Phase 1 — Website concept and roadmapCopy

   Take on the role of a team that brings together performance engineers, front-end engineers, senior UI/UX designers and award-winning creative directors.
   
   Task: design and build a website of agency quality for [brand / product] that gives visitors a premium experience.
   
   Deliver:
   - the complete information architecture
   - the visual identity
   - the animation system
   - responsive layouts
   - the conversion strategy
   - an accessibility plan
   - an implementation roadmap

2. Phase 2 — Cinematic scroll and motionCopy

   Website: [website / brand]
   
   Take on the role of a world-class designer of digital experiences.
   
   Task: turn my website into an immersive storytelling experience built with modern web technologies.
   
   Design:
   - transitions between sections
   - storytelling driven by scrolling
   - page reveals
   - motion principles
   - interactive scenes
   - cursor interactions
   - micro-animations
   - the visual pacing
   
   For every interaction, explain how it serves the user's journey instead of pulling attention away from it.

3. Phase 3 — Premium design systemCopy

   Website: [website / brand]
   
   Take on the role of an award-winning product designer.
   
   Task: build a full design system for my website covering:
   - typography
   - spacing
   - grids
   - color palette
   - component library
   - navigation
   - buttons
   - forms
   - cards
   - iconography
   - motion guidelines
   - responsive behavior
   - accessibility standards
   
   Every design choice must support one coherent, premium brand identity.
   
   Constraints: the design system must scale, and it must be optimized for easy maintenance.

4. Phase 4 — Interactive landing pageCopy

   Take on the role of a creative director and UX strategist focused on conversions.
   
   Product or service: [product / service]
   
   Task: design a premium landing page for it that makes a first impression people remember.
   
   Sections to include:
   - hero experience
   - interactive showcase of the product
   - storytelling around the features
   - testimonials
   - pricing
   - FAQ
   - calls to action built for conversion
   
   For every section, suggest animations and interactions that keep the page usable and fast.

5. Phase 5 — Front-end implementation blueprintCopy

   Website: [website / brand]
   
   Take on the role of a senior front-end architect.
   
   Task: produce a full blueprint for building this website with modern web technologies.
   
   Cover:
   - project structure
   - reusable components
   - animation architecture
   - responsive layouts
   - performance optimization
   - SEO
   - accessibility
   - testing strategy
   - analytics integration
   - deployment workflow
   
   For each major technical decision, explain the trade-offs.

6. Phase 6 — Tasks for AI-assisted developmentCopy

   Website: [website / brand]
   
   Take on the role of an expert software engineer who builds with AI.
   
   Task: split the website into implementation tasks that suit development with an AI assistant.
   
   For every section, provide:
   - development prompts
   - testing checklists
   - accessibility validation
   - responsive requirements
   - performance benchmarks
   
   Constraints: the workflow must be production-quality, and fast to develop with no loss of quality.

7. Phase 7 — Performance, SEO and accessibility optimizationCopy

   Website: [website / brand]
   
   Take on the role of a specialist in web performance, SEO and accessibility.
   
   Task: optimize my website for:
   - Core Web Vitals
   - responsive performance
   - accessibility compliance
   - structured data
   - image optimization
   - caching
   - lazy loading
   - visibility in search engines
   - analytics
   
   Then write a complete quality assurance checklist to run before launch.
   
   Constraints: performance comes first in every optimization.

8. Phase 8 — Full agency build and launch planCopy

   Website: [website / brand]
   
   Take on the role of a coordinated digital agency whose team includes a creative director, a brand strategist, a UI/UX designer, a front-end engineer, a motion designer, a copywriter, an SEO specialist and a conversion strategist.
   
   Task: build a complete website of agency quality, from the first concept all the way to launch.
   
   Include:
   - branding
   - storytelling
   - page layouts
   - animation systems
   - design system
   - implementation guidance
   - optimization strategy
   - analytics setup
   - deployment plan
   - maintenance recommendations

1. Phase 1 — HomepageCopy

   My business: [what you do, who you help]
   
   Role: you are a brand copywriter.
   
   Task: write my homepage. It has to make three things clear: the work I do, the people I serve and why that work matters.

2. Phase 2 — About pageCopy

   My business: [what you do, who you help]
   My story: [key points of your story]
   
   Task: write my About page. Tell my story in a way that creates an emotional connection with my audience.

3. Phase 3 — Services pageCopy

   My business: [what you do, who you help]
   My offers: [list your offers]
   
   Task: write a Services page that presents my offers, covering for each one its benefits, its features and a strong call to action.

4. Phase 4 — FAQCopy

   My [product/service]: [describe it]
   
   Task: write the FAQ section for it, based on the objections and questions customers raise most often.

5. Phase 5 — SEO meta titles and descriptionsCopy

   My business: [what you do, who you help]
   Pages of my site: [list the pages]
   
   Task: for each page of the site, write a meta title and a meta description optimized for SEO.
   
   Output: a table with the columns Page, Meta title, Meta description.

6. Phase 6 — Copy and layout tipsCopy

   My business: [what you do, who you help]
   
   Role: you are a UX strategist.
   
   Question: which copy and layout choices will keep visitors scrolling down the page and get them to take action?