Browse and preview all 570+ Claude Code templates for free. Copy any template, and every Claude Code setup file on this page, with a BrowserMoon licence.
Get a licenceDesign help before you prompt Claude Code
Ask Mon, the AI design assistant, which layout and template fit your app. Then paste it into Claude Code.
What are Claude Code templates?
Claude Code templates are ready-made starting points you give Claude Code so it builds the right thing the first time. There are two kinds: design templates, which are finished pages and sections Claude Code turns into working code in your stack, and setup templates, the CLAUDE.md, skills, agents and hooks in your .claude folder that tell Claude Code how to work. This page has both: the design templates below, and a design-focused CLAUDE.md, skill, agent and hook further down.
How to use templates with Claude Code
Pick a template and copy it
Find a page or section above that is close to what you want, open it and press Copy code. Every template is one self-contained HTML file.
Save it in your repo
Save it as design/template.html. Claude Code can read a file whenever it needs to, which works better than pasting long code into the chat.
Add the design setup files
Add the CLAUDE.md design section and the frontend design skill from this page. From then on, every session follows the template without being told.
Ask for the page
In Claude Code, describe the page and say: follow design/template.html. It plans, builds in your framework and checks the result at phone and desktop width.
Claude Code setup templates: CLAUDE.md, skill, agent and hook
Most Claude Code templates you find are setup files for coding in general. These four are for design: they make Claude Code build UI that matches your template and catch off-brand styles before you see them.
CLAUDE.md design template
A design section for CLAUDE.md. Claude Code reads it at the start of every session, so every page it builds follows your template, colours and spacing.
CLAUDE.md# Design rules These rules apply to every UI change in this repo. Read them before writing any component, page or style. ## Design source of truth - Match the BrowserMoon template in design/template.html for fonts, spacing, colours, corner radius, shadows and components. When in doubt, open it and copy what it does. - Never invent a new style. If something is not in the template, use the closest thing that is.
Frontend design skill
A Claude Code skill that loads when you ask for UI work. It makes Claude Code plan the layout from your template, build with your components and check its own result.
.claude/skills/frontend-design/SKILL.md--- name: frontend-design description: Use when building or changing any page, component, layout or style in this project. Makes the UI match the design template in design/template.html and the project's design rules. --- # Frontend design
UI review agent
A Claude Code subagent that reviews a page against your design template and returns a fix list: spacing, type, colour, states and mobile layout.
.claude/agents/ui-reviewer.md--- name: ui-reviewer description: Reviews UI changes against design/template.html and the design rules. Use after building or changing a page or component, before saying the work is done. tools: Read, Grep, Glob, Bash --- You are a senior product designer reviewing a pull request for visual quality. You do not write features; you find design problems and say exactly how to fix them.
Design check hook
A Claude Code hook that runs after every edit and warns when a change adds raw hex colours or new fonts, so off-brand styles never slip in.
.claude/settings.json (hook)Add this to .claude/settings.json in your project. After Claude Code edits or writes a file, it scans the changed file for raw hex colours and font families that are not your tokens, and reports them back to Claude Code so it fixes them.
{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write|MultiEdit",Free logo, app icon and favicon for your Claude Code app
Still showing the default icon? Pick a free SVG logo, then make a matching app icon, favicon, social share image and App Store screenshot with the free app launch kit. Drop the files in your Claude Code project's public folder. If the rest of the app still looks default, read why AI apps look generic.
Design templates or CLAUDE.md templates: which do you need?
Both, for different jobs. A CLAUDE.md template, a skill or an agent changes how Claude Code works: what it reads first, the rules it follows and how it checks its work. A design template changes what it builds: it is the finished page Claude Code copies.
Without a design template, even a great CLAUDE.md gives you a tidy but generic interface, because Claude Code has nothing specific to match. Without the setup files, Claude Code follows the template on the first page and drifts on the fifth. Use the template for the look and the setup files to keep it.
Why Claude Code works so well with templates
Claude Code runs in your terminal with your whole repo, so it can turn one HTML template into components in React, Next.js, Vue, Svelte or plain HTML, wire them to your data and keep your existing routes. It reads files on demand, which is why saving the template in design/template.html beats pasting it.
It can also check itself. Ask it to run the dev server and compare the page against the template at 375px and 1440px wide, or run the UI review agent from this page before you merge.
Best Claude Code templates by use case
SaaS landing page template for Claude Code
Save it as the design file and ask Claude Code to build the marketing site in your Next.js app, section by section.
Analytics dashboard template for Claude Code
Claude Code turns it into components and wires the charts to your real API.
Pricing page template for Claude Code
A quick win: Claude Code connects the plans to Stripe price IDs from your config.
Settings and billing template for Claude Code
The screens AI tools usually rush; start from a finished design instead.
Launch video template for Claude Code
Claude Code rewrites the story and screens for your product and keeps the MP4 export.
Tips for better results in Claude Code
Plan first
Ask Claude Code for a plan before it writes files; correcting a plan is cheaper than correcting code.
Use the UI review agent
Run it after every new page to catch spacing, colour and state problems.
Give it the browser
Add a browser MCP server so it can screenshot pages and compare them with the template.
One page per session
Long sessions drift; start a fresh session for each new page with the same CLAUDE.md.
Claude Code vs Cursor for building from templates
Claude Code works from the terminal across the whole repo and is strongest on multi-file work: turning a template into a set of components, wiring data and checking the result. Cursor works inside the editor and suits reviewed, file-by-file changes. Both follow a design template well when it is saved in the repo and named in their rules file: CLAUDE.md for Claude Code, .cursor/rules for Cursor.
What to ask Claude Code after you paste a template
- Turn design/template.html into components in our components folder and use them to build the pricing page.
- Run the ui-reviewer agent on this branch and fix everything marked must fix.
- Make the dashboard work at 375px without changing the desktop layout.
- Replace the sample numbers in the dashboard with data from our /api/metrics endpoint.
Common mistakes with Claude Code templates
Pasting huge templates into the chat
Save the template as a file and reference it; it keeps the session focused.
Skipping CLAUDE.md
Without design rules, the second page drifts from the first.
Accepting without checking
Ask Claude Code to run the dev server and check widths before you accept.
Claude Code templates by category
Claude Code templates by framework
Frequently asked questions
What are Claude Code templates?
Starting points for building with Claude Code. Design templates are finished pages and sections it turns into working code. Setup templates are files in your .claude folder, like CLAUDE.md, skills, agents and hooks, that tell it how to work. BrowserMoon has both, focused on design.
How do I use a template in Claude Code?
Copy the template, save it in your repo as design/template.html, and ask Claude Code to build the page following that file. Adding the CLAUDE.md design section makes it follow the template in every session.
What should a CLAUDE.md file include for design?
Which template to follow, your colour tokens, type scale and spacing, rules for reusing components, and a short list of things to never do. The CLAUDE.md design template on this page has all of it.
What is a Claude Code skill?
A folder in .claude/skills with a SKILL.md file. Claude Code loads it when a task matches its description. The frontend design skill here loads for UI work and makes Claude Code plan from your template, build with your components and check the result.
Do these templates work with any framework?
Yes. Each template is plain HTML and CSS, and Claude Code converts it into whatever your project uses: React, Next.js, Vue, Svelte, Astro or plain HTML.
Are the Claude Code templates free?
You can browse and preview every template and read the start of every setup file for free. Copying the full code and files needs a BrowserMoon licence, which covers unlimited projects.
Templates for other AI coding tools