Welcome to Buildkit. Let's build your site.
Everything is running. Browse the blocks, then build your site with your AI agent or by hand. This page and the previews are a demo: they get archived when your site takes shape.
What's included? Everything you need to build your site.
Every piece has a preview page with real examples. Your agent reads the same pages before it builds your site, so you can point it at any one by name.
Blocks
Heroes, features, pricing, testimonials, FAQ, and more, grouped by family.
Components
Buttons, forms, cards, typography, and the design tokens.
Backgrounds
Grids, glows, meshes, stars, and images that stack behind any section.
Animated visuals
60 animated illustrations from CodedVisuals for any visual slot.
Blog
A content collection, listings, and a typeset article page.
Online docs
From a fresh clone to a deployed site, on one page.
Fill in the brief, run one skill.
Drop your copy, logo, and images into brief/, then run /buildkit-website. Your agent asks for anything missing, proposes every page for your approval, and builds the site. /buildkit-audit then checks it before launch.
# 1. Put what you have in brief/
brief/brand.md # name, audience, tone, colors
brief/pages.md # the pages you want
brief/content/ # existing copy, product notes
brief/assets/ # logo, screenshots, photos
# 2. Ask your agent
/buildkit-websiteOne config file, then compose pages from blocks.
Set your site, theme, and layout in src/config.ts, put your palette and fonts in src/styles/brand.css, then build pages from blocks. The preview pages show each block in use with real examples.
// src/config.ts
export const SITE = {
domain: "example.com",
name: "Acme",
title: "Acme: analytics for small teams",
};
export const THEME = { name: "brand", showSwitcher: false };Know where things live. Six places run your whole project.
Settings, brand, navigation, pages, your own components, and the skills your agent reads. Start in these and you rarely need to open anything else.
src/config.ts
Your site name, domain, theme, dark mode, layout, and analytics, in one file.
src/styles/brand.css
Your palette and fonts, applied as the brand theme across every block.
src/layouts/Layout.astro
Your header links, call to action, and footer, shared by every page.
src/pages/
One file per page, each a stack of blocks with your copy.
src/components/custom/
Your own blocks and components, plus a log of anything you forked.
.agents/skills/
Buildkit's rules, catalogs, and workflows, read by your agent before it builds.
New updates will keep coming.
When a new release is out, run /buildkit-update. Your agent fetches it from the private GitHub repo (or a local copy you point it to), updates the skills and components, keeps your changes, and reports anything that needs you.
Want more animated visuals? Get the full CodedVisuals library at half price.
Buildkit comes with 60 of them. The full library adds the rest, in the same style and ready for any visual slot.
- Install any animated visual with the shadcn CLI from the private CodedVisuals registry.
- You get access to every new visual as it is released, at no extra cost.
- Add your registry token to .env as CODEDVISUALS_TOKEN and this project is ready.
- The animated visuals can be used in unlimited projects outside Buildkit too.
- There are 115+ visuals, and growing, so you can find the perfect one for your project.
- Works with the shadcn CLI and MCP server in any React project that uses shadcn.