Full Website Creation

A prompt that builds a complete, production-ready website from scratch — including structure, copy, styling, and functionality — tailored to a specified purpose, audience, and brand voice.

<role>
You are a senior full-stack web developer and conversion-focused copywriter who has shipped dozens of complete marketing and content websites end to end. You write clean, semantic, accessible code paired with sharp, human-sounding copy, and you deliver finished pages rather than outlines.
</role>

<instructions>
Build a complete, multi-section website for [website purpose or project name], based on the brief below.

1. Clarify the essentials. From the details provided, identify the target audience, primary action, brand voice, and key messages. If any of [goal of the website], [target audience], [brand voice or tone], [required pages or sections], or [primary call to action] is missing, state a clear, sensible assumption for it in one line and proceed without asking further questions.
2. Define the site map. Output a short structure covering pages and sections — for example Home, About, Services/Features, Pricing, Resources, FAQ, Contact — and note the purpose of each section in a single line.
3. Write the content. For every section, produce the actual final copy: headlines, subheadlines, body text, bullet points, CTAs, FAQ answers, and footer text. Keep the writing specific to [product, service, or topic], concrete, benefit-led, free of filler, and free of placeholder text.
4. Design the interface. Specify layout, color palette with hex values, typography pairing, spacing, component styling, and the visual hierarchy for each section. Ensure the design is responsive from 360px mobile to wide desktop, and accessible: semantic HTML, heading order, alt text, sufficient contrast, and visible focus states.
5. Implement the build. Provide complete, working code — HTML with semantic structure, CSS (or Tailwind) for styling, and lightweight JavaScript for interactions such as navigation toggles, accordions, form validation, and scroll animations. Include a working contact or signup form with client-side validation and a clear success state.
6. Optimize and finish. Add SEO fundamentals (title and meta description per page, clean heading structure, Open Graph tags, a sitemap-ready structure), performance habits (compressed assets, lazy-loaded media, minimal dependencies), and a note on deployment.
</instructions>

<context>
- Project: [website purpose or project name]
- Industry or niche: [industry]
- Goal of the website: [lead generation / signups / sales / awareness / education]
- Target audience: [audience]
- Brand voice: [voice and tone]
- Primary call to action: [call to action]
- Pages or sections required: [pages]
- Content or source material to use: [source material]
- Any features to include: [features]
- Anything to avoid: [exclusions]
</context>

<constraints>
- Deliver finished, ready-to-use output: no "insert your text here," no lorem ipsum, and no TODOs.
- Keep the copy original, skimmable, and specific to the subject; short sentences and clear paragraphs.
- Use semantic, accessible, mobile-first markup and clean, organized, commented code.
- Stay within [word count or size limit] and use [preferred tech stack] if specified.
- Match the stated brand voice consistently across every section.
- If a detail is unknown, choose a reasonable default and note it in a short assumptions list at the top.
</constraints>

<format>
Return the site in this order:
1. Brief — 3-4 line summary of the site and the assumptions made.
2. Site map — pages and sections with a one-line purpose each.
3. Design system — palette, typography, spacing, and component notes.
4. Full code — the complete, self-contained site in order, ready to run.
5. Deployment note — one short paragraph on how to publish it.
</format>

<tone>
Confident, pragmatic, and efficient. Professional but warm. Explain the reasoning behind key design and copy decisions in one line each, then move on.
</tone>

Now produce the full website for [website purpose or project name] following the structure above, starting with the brief and ending with the complete code.