Home / Web & Dev / Web Design

Personal Website Without Coding in 6 Phases: Sections to SEO

Builds a personal website with AI in six phases: the homepage sections your goal needs, the whole site as one responsive HTML file, specific copy, a palette and font pairing, a contact section with a call to action, and the SEO title, meta description and keywords.

personal websitehtmlwebsite copycolor paletteseo
  1. Phase 1 — Homepage sections for your goal
    I want to create a personal website. Its goal: [your goal: e.g. selling a product, getting freelance clients, growing your personal brand]
    
    Task: tell me which 5 sections the homepage needs, and in which order, so that the site really reaches that goal. For each section, add one line on the job it does.
  2. Phase 2 — Full site in one HTML file
    Task: build a complete, modern personal website on a single page, delivered as one HTML file.
    
    Sections to include: [paste the sections from phase 1]
    Name or brand: [your name/brand]
    
    Requirements:
    - clean, modern design
    - fully responsive on mobile
    
    Return the whole file in a single code block, ready to save and open in a browser.
  3. Phase 3 — Homepage copy that sounds specific
    What I do: [paste your background/offer]
    
    Task: write the copy for my homepage:
    1. a headline
    2. a subheadline
    3. a short bio section
    
    Tone: confident and specific. Avoid generic phrasing like "passionate professional".
  4. Phase 4 — Color palette and font pairing
    My industry or vibe: [your industry or the vibe you want: e.g. minimal, creative, corporate]
    
    Task: propose a color palette, with hex codes, and a font pairing for my personal website. The result should feel professional without looking cookie-cutter. Present the palette as a list of colors with their role and hex code, then the heading font and the body font.
  5. Phase 5 — Contact section with a reason to reach out
    Task: add a contact section to my website that includes [email/calendar link/contact form].
    
    Above it, write a short call to action that gives visitors a clear reason to get in touch right now.
  6. Phase 6 — SEO basics
    My site's content:
    [paste it]
    
    Task: based on what I do, write:
    1. an SEO title tag
    2. a meta description
    3. 3 keyword phrases I should target
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.
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
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]
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.
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.