Home / Web & Dev / Web Design

Business Website from Strategy to Code and SEO in 7 Phases

Plans and builds a website for your business in seven phases: site structure and goals per page, brand voice and positioning, homepage layout, copy for the main pages, visual direction, responsive HTML/CSS code and an SEO setup.

websitesitemapwebsite copyhtml cssseo

Phase 1 — Site structure and goals

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

Phase 2 — Brand identity and messaging

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.

Phase 3 — Homepage that converts

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

Phase 4 — Website copy

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.

Phase 5 — Visual direction

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.

Phase 6 — Responsive HTML and CSS

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.

Phase 7 — SEO foundation

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

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 .txt Download .md Open 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 .txt Download .md Open 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 .txt Download .md Open 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.

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.

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

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.

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

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

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.

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.

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.

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.

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 .md Open 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 .txt Download .md Open page