Make it yours
Let your AI coding agent turn the example "Acme" site into your product's website, or make the same changes by hand.
The kit starts with an example product called Acme, an invoicing tool for freelancers. Every word, plan and colour on it is a placeholder. The "Make it yours" task replaces them with your product's.
With an AI agent (recommended)
Open the project folder in your AI coding tool and start the task:
/make-it-yoursWhat the agent asks
It asks everything in one message. Answer what you know; for anything you skip, it picks something sensible and tells you what it chose.
- Product name, and a short description of what it does and the result for the customer
- Who it's for, and the problem it solves
- 3 to 6 main features
- How you'll charge: subscription, one-time purchase or both, with each plan's name, price, currency and interval (or "decide later" to keep two placeholder plans)
- How customers get the product after paying: use the web app after signing in, an invite to a private GitHub repo, a download, a service you deliver, or something else
- How someone gets started, in 3 short steps
- What the site should include or leave out: sections, pages, FAQ answers, comparisons, anything specific
- Brand colour (a hex value, or "pick one")
- Support email, company or legal name, and refund policy
- Tone: friendly, professional, playful…
Better answers, better site
Be specific. "Sends invoice reminders by email and WhatsApp until the client pays" makes a far better page than "helps freelancers get paid". The agent won't invent statistics, customer counts or testimonials.
What the agent changes
| File | What changes |
|---|---|
src/config.ts | Name, tagline, description, support email and your plans |
.env.example | One DODO_PRODUCT_<PLAN> line per plan |
src/content/landing.ts | Every section of the landing page, including the mock product screen in the hero and the feature icons |
src/app/globals.css | The brand colour (--primary) in light and dark mode |
src/app/(legal)/terms, privacy | Every [bracketed] placeholder, with your details and today's date |
src/content/blog/welcome.mdx | Deleted. The agent offers to draft your first real post |
It then runs the type check, lint, tests and production build, checks that no "Acme" text is left, and looks at the page at desktop and phone widths.
If the way you deliver your product needs code the kit doesn't have yet (download links, license keys), the agent says so and offers to build it after the site is done.
By hand
| Change | Where |
|---|---|
| Name, tagline, support email, plans | src/config.ts |
| Every word on the landing page | src/content/landing.ts |
| Landing page layout | src/components/landing/sections.tsx |
Brand colour (--primary) and fonts | src/app/globals.css |
| Privacy policy and terms | src/app/(legal)/ (replace the [bracketed] parts) |
| Blog posts | src/content/blog/ |
Then check your work:
npm run typecheck && npm run lint && npm test && npm run build
grep -rni "acme" src # should print nothingSee Plans and pricing and Landing page for details.
After this step
Run npm run setup to connect your database, payments and email. If you run setup while the site still says "Acme", it stops and asks whether you want to continue with the example plans. Choose No, make the site yours, then run it again.
Changed plans after running setup?
Setup finds products it created earlier by each plan's slug, and doesn't change their price. If you change a plan's price after setup, read Changing a plan's price.