Home / Web & Dev / Web Design

Premium Animated Website from Concept to Launch in 8 Phases

Plans and builds a premium, animated website in eight phases: overall concept, cinematic scroll and motion, design system, interactive landing page, front-end blueprint, AI-ready development tasks, performance and SEO optimization, and a full launch plan.

websiteanimationdesign systemfront-endlanding page
  1. Phase 1 — Website concept and roadmap
    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 motion
    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 system
    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 page
    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 blueprint
    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 development
    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 optimization
    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 plan
    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
Download pack .md
More in Web Design
3-Step "How It Works" Section for a Service WebsiteNewWeb DesignDesigns a 3-step "how it works" section for a service website: a number and icon idea per step, a headline under 6 words, a 2-sentence explanation and a flow where each step builds anticipation, so the process feels easy and trustworthy to first-time visitors.
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.
Download .txtDownload .mdOpen page
Dark Mode Fitness Tracker App Screen with Progress RingsNewWeb DesignCreates the interface of a fitness tracking mobile app in dark mode, with a layout built on cards, progress rings and an orange accent color.
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
Download .txtDownload .mdOpen page
Fill-In Design Brief for a Rendered Claude ArtifactNewWeb DesignA fill-in brief that gets Claude to design and render a page, component, graphic or diagram: say what it is, who it is for, the visual style, the key elements and your colors and fonts, plus the output format if you know it.
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]
Download .txtDownload .mdOpen page
Full Website Kit in 10 Phases: Pages, Copy, SEO, Legal and Audit10 phasesNewWeb DesignBuilds every part of a small business website in ten phases: landing page, homepage copy, about page, service tiers, an SEO article, contact page, case study, privacy and terms, a 404 page and a final audit of all the copy.
  1. Phase 1 — Landing page in HTML + CSS
    Product: [product]

Task: build a complete landing page for this product with these parts:
- hero section
- features
- pricing
- FAQ
- a CTA button

Style: clean and modern, and it must work well on mobile.
Output: the full HTML + CSS.
  2. Phase 2 — Homepage copy
    Target audience: [niche]

Task: write all the text for the homepage of my website, covering:
- headline
- subheadline
- section on the benefits
- a placeholder for social proof
- a CTA in the footer
  3. Phase 3 — About page
    My business: [business type]

Task: write a complete About page for it, with:
- the story of the brand
- mission
- values
- a placeholder for the team section
- trust badges

It should feel human and believable.
  4. Phase 4 — Services page with 3 tiers
    My business: [agency/freelance business]

Task: build a page presenting my services as 3 tiers. For every tier give:
- a name
- a description
- what it includes
- a "Book a Call" CTA
  5. Phase 5 — SEO article with outline
    Target keyword: [keyword]

Task: write first an outline, then the complete SEO article of 1,500 words for this keyword.

Include:
- meta title
- meta description
- H2 headings
- placeholders for internal links
  6. Phase 6 — Contact page in HTML
    Task: create a contact page that includes:
- the layout of a contact form
- a statement that builds trust
- a note on how quickly I reply
- an FAQ section answering the usual objections

Output: HTML.
  7. Phase 7 — Portfolio or case study page
    Project: [project]

Task: build a portfolio or case study page about this project, covering:
- the problem
- the solution
- the results
- the tools used
- a placeholder for a testimonial

Make it easy to skim.
  8. Phase 8 — Privacy policy and terms of service
    Type of website: [type of website]

Task: write a complete privacy policy and complete terms of service for my website.

Use plain English, with the structure of a legal document.

At the end, add one line reminding me to have both documents checked by a legal professional.
  9. Phase 9 — 404 error page
    Task: create a 404 error page with:
- copy that matches my brand
- a CTA that sends visitors elsewhere on the site
- a placeholder for a search bar

Tone: friendly, never robotic.
  10. Phase 10 — Full copy audit
    My website copy: [paste all of your website copy]

Task: audit all of this copy in full:
1. what is weak
2. what is missing
3. what to fix

Then rewrite the 3 areas with the biggest problems.
Download pack .mdOpen page
Link-in-Bio Page with a Dark Theme in One HTML FileNewWeb DesignCreates your own link-in-bio page: a profile photo placeholder, titled links, social icons and a clean dark theme, mobile-first, as one HTML file you can host anywhere for free.
Task: build my link-in-bio page.

- Name: [name]
- At the top: a placeholder for my profile photo
- Links to include: [list each link with its title]
- Social icons, one per platform: [Instagram, Twitter, TikTok, YouTube, etc]

Design: a clean dark theme, mobile-first.

Output: one HTML file that I can download and host for free on any service.
Download .txtDownload .mdOpen page