Overview

A working website template that ships with your DESIGN.md file inside it. You apply the design system whenever you want with a normal prompt, plus AI conventions set up so any AI coder already knows how to extend it. Keep the look or restyle it however you want.

Docs link: https://getdesign.md/vibecoder-kit-docs

Bookmark it. Everything below (and more) lives there in a clean sidebar layout, kept in sync with your kit.

Just downloaded this?

Open Start here first. Two phases, and you will have the kit running locally. Come back to this overview after.

Site is running. Now what?

Your DESIGN.md ships as a file in the kit. You apply it whenever you want with a normal prompt, the whole system across the site or just one page, then review and refine until it looks right. After that, the work is content: your name, your copy, your pages, then deploy and connect a domain. The sidebar on the left walks you through it, in order:

1. Edit your content — brand name, tagline, headline, services, copy
2. Use DESIGN.md — how the design system steers your AI, and how to change colors, fonts, spacing
3. Add and remove pages — trim what you do not need, add anything outside the default set
4. Ship your site — deploy, then point your own domain
5. Keep editing forever — the day-to-day loop and how to pull in bigger capabilities (auth, payments, copywriting help, and more)
6. What you can ask your AI — quick-reference tables for common requests

You do not need to memorize anything; you talk to your AI in plain language and it does the work.

What is in this kit

• A working template with pre-built pages: landing, about, services (with detail), pricing, portfolio, case studies (with detail), contact, blog (with detail), terms, privacy, 404.
• DESIGN.md at the root that captures the visual language of your chosen design, ready to apply to the site with a prompt.
• AI instruction files for every major AI coder. Most tools read them on their own when you open the folder; if yours does not, you can paste the relevant file into chat as context.
• agent-skills/ — how-to guides your AI reads when you ask for things like "add a pricing page" or "add SEO tags". You do not need to open these yourself; they exist so your AI has consistent context and produces a clean result every time. Just chat in plain language, the AI consults the right kit skill on its own.
• docs/ — pointers for the things we do not bundle: deploying, domains, git backup, email providers, contact form backends, auth setup.

Auth and email setup

Some kits include a working contact form, Supabase magic link + Google auth, a protected /dashboard route, and optional Resend Contact sync for signed-in users.

For the full dashboard-by-dashboard checklist, see Auth and email setup.

The main .env values are:

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxx
CONTACT_TO_EMAIL=you@yourdomain.com
CONTACT_FROM_EMAIL="Your site <contact@yourdomain.com>"
VITE_SUPABASE_URL=https://your-project-ref.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
VITE_SITE_URL=http://localhost:5173
# Optional newsletter/contact sync
RESEND_SEGMENT_ID=seg_xxxxxxxxxxxxxxxxxxxxxxxxx
RESEND_TOPIC_ID=topic_xxxxxxxxxxxxxxxxxxxxxxxxx

Use the exact local origin printed by pnpm dev for VITE_SITE_URL and Supabase redirect URLs.

Reference docs

• How to start chatting with your code — every way to start chatting, side by side
• Auth and email setup — Supabase auth, Google login, Resend email, newsletter contacts
• AI tools — comparing the AI coders you can use with this kit
• Extending with other tools — agent skills for writing copy, designing pages, adding auth/DB/payments, and more, organized by what you are doing