Prompt Details
Model
(claude-4-6-sonnet)
Token size
992
Example input
[INSERT BUSINESS, BRAND, OR PROJECT]: freelance brand designer for startups and small businesses
[INSERT TARGET AUDIENCE]: founders who need a stronger visual identity and more professional brand presence
[INSERT MAIN OFFER OR GOAL]: book discovery calls for branding packages
[INSERT TONE OR STYLE]: modern, confident, creative
[INSERT PRIMARY CALL TO ACTION]: schedule a free consultation
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brand Designer — One-Page Website</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--ink: #1a1612;
--ink-soft: #5c574f;
--ink-muted: #9e9890;
--cream: #f5f0e8;
--cream-dark: #ede7d8;
--accent: #c8502a;
--accent-light: #f0ddd6;
--white: #ffffff;
--serif: 'DM Serif Display', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
}
body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.65; }
/* NAV */
nav { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 3rem; background: var(--cream); border-bottom: 1px solid var(--cream-dark); position: sticky; top: 0; z-index: 100; }
.nav-logo { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.01em; color: var(--ink); }
.nav-cta { background: var(--accent); color: var(--white); font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.6rem 1.25rem; border-radius: 2px; border: none; cursor: pointer; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.88; }
/* HERO */
.hero { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 3rem 4rem; position: relative; overflow: hidden; }
.hero-tag { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 2rem; }
.hero h1 { font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.08; color: var(--ink); max-width: 780px; margin-bottom: 2rem; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub { font-size: 1.05rem; color: var(--ink-soft); max-width: 520px; line-height: 1.75; margin-bottom: 2.5rem; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-primary { background: var(--ink); color: var(--white); font-family: var(--sans); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.85rem 2rem; border-radius: 2px; border: none; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover { background: var(--accent); }
.btn-secondary { font-size: 0.88rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; background: none; border: none; }
.hero-deco { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 420px; height: 420px; border-radius: 50%; background: var(--cream-dark); opacity: 0.7; }
.hero-deco2 { position: absolute; right: 120px; top: 30%; width: 180px; height: 180px; border-radius: 50%; background: var(--accent-light); opacity: 0.5; }
/* PROBLEM */
.problem { background: var(--ink); color: var(--white); padding: 5rem 3rem; }
.problem-inner { max-width: 840px; }
.section-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.5rem; font-weight: 500; }
.problem .section-label { color: rgba(255,255,255,0.4); }
.problem h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.2; margin-bottom: 2rem; max-width: 680px; }
.problem h2 em { font-style: italic; color: #e89070; }
.problem p { font-size: 1.05rem; color: rgba(255,255,255,0.65); max-width: 600px; line-height: 1.8; }
/* ABOUT */
.about { padding: 6rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-img { aspect-ratio: 3/4; background: var(--cream-dark); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; position: relative; overflow: hidden; }
.about-img::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(transparent, rgba(200,80,42,0.12)); }
.about-img-placeholder { text-align: center; line-height: 2; }
.about h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.2; margin-bottom: 1.5rem; }
.about p { color: var(--ink-soft); line-height: 1.8; margin-bottom: 1rem; font-size: 0.97rem; }
.about p strong { color: var(--ink); font-weight: 500; }
/* SERVICES */
.services { background: var(--white); padding: 6rem 3rem; }
.services-header { max-width: 600px; margin-bottom: 4rem; }
.services h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.services-intro { color: var(--ink-soft); line-height: 1.75; }
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5px; background: var(--cream-dark); }
.pkg { background: var(--white); padding: 2rem; }
.pkg-tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 1rem; }
.pkg h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 0.5rem; }
.pkg-sub { font-size: 0.82rem; color: var(--ink-muted); font-style: italic; margin-bottom: 1rem; }
.pkg p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.75; }
.services-cta { margin-top: 3rem; font-size: 0.95rem; color: var(--ink-soft); }
.services-cta span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* TRUST */
.trust { padding: 6rem 3rem; display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; }
.trust-left h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.2; }
.trust-pillars { display: flex; flex-direction: column; gap: 2.5rem; }
.pillar { border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.pillar h4 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--ink); }
.pillar p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.75; }
.proof-placeholder { background: var(--cream-dark); border-radius: 4px; padding: 1.5rem; font-size: 0.85rem; color: var(--ink-muted); font-style: italic; margin-top: 2rem; line-height: 1.7; }
/* FAQ */
.faq { background: var(--cream-dark); padding: 6rem 3rem; }
.faq-header { margin-bottom: 3rem; }
.faq-header h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0,0,0,0.08); }
.faq-item { background: var(--cream-dark); padding: 1.75rem 2rem; }
.faq-item h4 { font-size: 0.92rem; font-weight: 500; margin-bottom: 0.6rem; color: var(--ink); }
.faq-item p { font-size: 0.87rem; color: var(--ink-soft); line-height: 1.75; }
/* FINAL CTA */
.final-cta { background: var(--accent); color: var(--white); padding: 7rem 3rem; text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; border-radius: 50%; background: rgba(255,255,255,0.07); }
.final-cta h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; max-width: 680px; margin: 0 auto 1.5rem; position: relative; }
.final-cta p { font-size: 1rem; color: rgba(255,255,255,0.78); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; position: relative; }
.btn-white { background: var(--white); color: var(--accent); font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.9rem 2.25rem; border-radius: 2px; border: none; cursor: pointer; transition: opacity 0.2s; position: relative; }
.btn-white:hover { opacity: 0.9; }
.urgency { margin-top: 1.5rem; font-size: 0.82rem; color: rgba(255,255,255,0.55); font-style: italic; }
/* FOOTER */
footer { background: var(--ink); color: rgba(255,255,255,0.4); padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-logo { font-family: var(--serif); color: rgba(255,255,255,0.7); font-size: 1rem; }
@media (max-width: 700px) {
nav { padding: 1rem 1.25rem; }
.hero, .problem, .services, .faq, .final-cta { padding: 4rem 1.25rem; }
.about, .trust { grid-template-columns: 1fr; padding: 4rem 1.25rem; gap: 2.5rem; }
.about-img { display: none; }
.faq-grid { grid-template-columns: 1fr; }
.hero-deco, .hero-deco2 { display: none; }
footer { flex-direction: column; gap: 0.75rem; text-align: center; padding: 1.5rem 1.25rem; }
}
</style>
</head>
<body>
<nav>
<div class="nav-logo">Studio / [Your Name]</div>
<button class="nav-cta">Book a free call</button>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-deco"></div>
<div class="hero-deco2"></div>
<p class="hero-tag">Brand Design for Founders</p>
<h1>Your brand should be as strong as your <em>idea.</em></h1>
<p class="hero-sub">I help founders and small businesses build visual identities that command attention, earn trust, and grow with them — without the agency price tag.</p>
<div class="hero-actions">
<button class="btn-primary">Schedule a free discovery call →</button>
<button class="btn-secondary">See how it works ↓</button>
</div>
</section>
<!-- PROBLEM -->
<section class="problem">
<div class="problem-inner">
<p class="section-label">The problem</p>
<h2>You're losing trust before you say <em>a word.</em></h2>
<p>Most founders are running on a logo made in a hurry and a color palette that "seemed fine at the time." The result is a disconnect — between how good the business actually is, and how it comes across. Investors, customers, and partners decide in seconds. Your brand makes that decision for them.</p>
</div>
</section>
<!-- ABOUT -->
<section class="about">
<div class="about-img">
<div class="about-img-placeholder">
Your photo<br>goes here
</div>
</div>
<div>
<p class="section-label">About</p>
<h2>Design built around your business — not just the brief.</h2>
<p>I'm a freelance brand designer who works exclusively with founders and small businesses. My work isn't just about making things look good — it's about building visual systems that make your business <strong>easier to sell, easier to trust, and easier to scale.</strong></p>
<p>I approach every project as a business problem first, a design challenge second. You work directly with me — no account managers, no junior handoffs — and we don't start designing until I understand your goals, your audience, and where you're headed.</p>
<p>If your brand is holding you back, you're ready to change that.</p>
</div>
</section>
<!-- SERVICES -->
<section class="services">
<div class="services-header">
<p class="section-label">Services</p>
<h2>Branding packages built for how founders actually work.</h2>
<p class="services-intro">Whether you're starting from scratch or finally ready to fix what you've been patching together — there's a clear path forward. Every engagement includes direct collaboration and a brand you can actually use.</p>
</div>
<div class="packages">
<div class="pkg">
<p class="pkg-tag">Start right</p>
<h3>Brand Foundation</h3>
<p class="pkg-sub">For founders building from scratch</p>
<p>A complete visual identity — logo system, color palette, typography, and brand guidelines. Everything you need to show up consistently, without making it up as you go.</p>
</div>
<div class="pkg">
<p class="pkg-tag">Level up</p>
<h3>Brand Refresh</h3>
<p class="pkg-sub">For businesses that have outgrown their look</p>
<p>You've grown, but your brand hasn't kept up. This package refines and elevates what you have — sharper, more intentional, and built for where you're headed next.</p>
</div>
<div class="pkg">
<p class="pkg-tag">Full kit</p>
<h3>Brand + Collateral</h3>
<p class="pkg-sub">For founders who need everything in one place</p>
<p>Full identity plus the materials you actually use: pitch deck template, social media kit, email header, and more. Launch or relaunch with a complete toolkit.</p>
</div>
<div class="pkg">
<p class="pkg-tag">Get clarity</p>
<h3>Strategy Session</h3>
<p class="pkg-sub">Before you commit to anything</p>
<p>A 90-minute working session to audit your current brand, identify what's hurting you, and map out exactly what needs to change — whether or not we work together after.</p>
</div>
</div>
<p class="services-cta">Not sure which package fits? <span>Book a free 20-minute call</span> and we'll figure it out together.</p>
</section>
<!-- TRUST -->
<section class="trust">
<div class="trust-left">
<p class="section-label">How I work</p>
<h2>Design that earns its keep.</h2>
<div class="proof-placeholder">✦ Add client testimonials here — a first name, business type, and one specific outcome will convert better than a generic quote.</div>
</div>
<div class="trust-pillars">
<div class="pillar">
<h4>Process transparency</h4>
<p>Every project follows a structured process: discovery, concept, refinement, and delivery — with clear checkpoints and no disappearing acts in between. You always know where things stand.</p>
</div>
<div class="pillar">
<h4>Direct collaboration</h4>
<p>When you work with me, you work with me. No account managers, no junior designers, no brief-passing. Your project gets my full attention from kickoff to final file.</p>
</div>
<div class="pillar">
<h4>Business-minded design</h4>
<p>Every creative decision is anchored to your goals. Not just "does this look good?" but "does this work for your audience, your market, and your stage of growth?"</p>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq">
<div class="faq-header">
<p class="section-label">Questions</p>
<h2>Good questions. Here are the answers.</h2>
</div>
<div class="faq-grid">
<div class="faq-item">
<h4>What does the discovery call involve?</h4>
<p>A free 20-minute conversation about your business, current brand, and goals. No pitch, no pressure — just a chance to see if we're a good fit and what working together looks like.</p>
</div>
<div class="faq-item">
<h4>How long does a branding project take?</h4>
<p>Most projects complete within 3–5 weeks depending on scope and feedback pace. You'll get a clear timeline before we start — and I stick to it.</p>
</div>
<div class="faq-item">
<h4>What do I need to prepare?</h4>
<p>Not much. Existing brand assets if you have them, a rough sense of your audience, and a few brands you admire is plenty. If you don't have any of that, the discovery process sorts it out.</p>
</div>
<div class="faq-item">
<h4>Do you offer revisions?</h4>
<p>Yes. Every package includes defined revision rounds so you're never locked into the first concept. Full details are in the project proposal before you commit.</p>
</div>
<div class="faq-item">
<h4>Will I own everything when it's done?</h4>
<p>Absolutely. You receive full ownership of all final files — print-ready and web-ready. You're not renting your brand. It's yours, completely.</p>
</div>
<div class="faq-item">
<h4>Do you work with businesses outside your city?</h4>
<p>Yes, all projects are handled remotely. I've worked with founders across different time zones and industries — distance has never been a barrier.</p>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="final-cta">
<h2>Your next chapter deserves a better first impression.</h2>
<p>Book a free 20-minute discovery call. We'll talk about where you are, where you're going, and whether working together makes sense. No obligation, no pitch — just clarity.</p>
<button class="btn-white">Schedule my free call →</button>
<p class="urgency">I take on a limited number of projects each month to maintain quality. If you're ready, let's make sure we can work together.</p>
</section>
<footer>
<div class="footer-logo">Studio / [Your Name]</div>
<div>© 2025 · All rights reserved</div>
</footer>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
8
Views
CLAUDE-4-6-SONNET
A flexible website-writing prompt for founders, freelancers, creators, consultants, agencies, and small business owners who want a clean one-page website without starting from a blank page.
This prompt helps Claude generate a complete one-page website draft from just 5 inputs. It is broad enough to work across many industries and use cases while still producing structured, practical output for landing pages, personal brands, service businesses, product pages, and simple startup sites.
...more
Added 1 week ago
