Free tool

CLAUDE.md generator

Pick your stack and copy a ready CLAUDE.md for Claude Code. Free, no sign up.

Updated

1

Choose your stack

Not sure? The defaults work for most Claude Code projects.

Framework

What your app is built with. Not sure? Ask Claude Code, or keep the default.

Styling

How Claude Code writes the design. Tailwind CSS is the most common.

Language

TypeScript helps Claude Code catch mistakes early.

Package manager

The command Claude Code uses to install packages. Pick npm if unsure.

Tests

Checks Claude Code runs to make sure the code works. Pick None if you have none.

2

Your CLAUDE.md

CLAUDE.md
# Project guide

Next.js app written in TypeScript, styled with Tailwind CSS, using pnpm.

## Commands
- Dev server: `pnpm dev`
- Build: `pnpm build`
- Lint: `pnpm lint`
- Tests: `pnpm test`

## Code style
- Use the App Router in app/. Pages are server components unless they need state or browser APIs.
- Fetch data in server components; add "use client" only where needed.
- TypeScript strict mode. No `any`; type props and return values.
- Reuse existing components and helpers before creating new ones.

## UI and design
- Style with Tailwind utility classes. Use theme tokens from the Tailwind config, never arbitrary hex values.
- The design source of truth is design/template.html. Match its fonts, type scale, spacing, colours and corner radius.
- One accent colour. No new fonts, gradients or shadows that are not in the template.
- Every page works at 375px wide with no horizontal scroll.
- Interactive elements have visible focus states and accessible labels.

## Testing
- Write Vitest tests for new logic and fixed bugs.
- Run the tests before calling a task done.

## How to work
- Use plan mode for changes that touch more than two files.
- Read design/template.html before any UI change.
- Run the build, lint and tests before you finish, then summarise the change in three lines.

Claude Code reads it at the start of every session. Want the full design rules? Claude Code design rules template

What is CLAUDE.md?

A CLAUDE.md file is the project guide Claude Code reads at the start of every session: your commands, code style, design rules and how to work. This CLAUDE.md generator writes one from a few choices, so Claude Code follows your stack and your design from the first prompt instead of guessing.

How to use the CLAUDE.md generator

1

Pick your stack

Choose your framework, styling, language, package manager and test tool above.

2

Copy the file

Copy the generated CLAUDE.md and save it at the root of your project.

3

Add your details

Add anything specific to your project: folders to avoid, API rules, naming conventions.

4

Start Claude Code

Run claude in the project. It loads CLAUDE.md automatically in every session.

What a CLAUDE.md file does

Claude Code has no memory between sessions. CLAUDE.md is how it remembers your project: it is loaded into context before your first message, so every session starts knowing how to run, test and style your code.

You can keep one CLAUDE.md at the project root, a personal one in ~/.claude/CLAUDE.md for rules that apply to all your projects, and extra ones in subfolders for parts of a monorepo. Claude Code combines them.

CLAUDE.md generator vs /init

Running /init in Claude Code drafts a CLAUDE.md by reading your code. It is a good start for an existing project but it describes what is there, including inconsistencies. This generator writes the rules you want Claude to follow, which suits new projects and projects whose UI you want to clean up. Many people run /init and then paste the design and working rules from here into the result.

What makes a good CLAUDE.md

Short and specific

Claude reads the whole file every session. Keep it under about 100 lines of rules it can act on.

Real commands

List the exact dev, build, lint and test commands so Claude runs the right ones.

A design source of truth

Point at one design file so every page uses the same fonts, spacing and colours.

How to finish

Tell Claude to run checks and summarise changes before it says a task is done.

Common mistakes

Writing a manual

Long explanations get skimmed. Write rules, not essays.

Vague style rules

"Make it look modern" means nothing. Name the file to match and the rules to follow.

Never updating it

When Claude repeats a mistake, add one line to CLAUDE.md so it stops.

Design templates for Claude Code

The generated file points Claude Code at design/template.html. Save one of these templates there and every page it builds follows the same design.

Pixel SaaS landing page

Website template

SaaS finance dashboard

Website template

Tiered pricing section

Website template

Full Claude Code design rules template

Frequently asked questions

Where do I put CLAUDE.md?

At the root of your project. Claude Code also reads ~/.claude/CLAUDE.md for personal rules and CLAUDE.md files inside subfolders.

Is this CLAUDE.md generator free?

Yes. The generated file is free to copy and use. The full design rules template on the CLAUDE.md page comes with a BrowserMoon licence.

How long should CLAUDE.md be?

As short as possible while still useful, usually 30 to 100 lines. Everything in it uses context in every session.

Does CLAUDE.md work with Claude Code in VS Code and JetBrains?

Yes. The IDE extensions run the same Claude Code, so they read the same CLAUDE.md.

Can I use the same file for Cursor or Codex?

The rules can be the same. Save them as AGENTS.md for Codex or as a Cursor rule; the other generators on this site output each format.

What is the design template line for?

It tells Claude Code to match one design file for fonts, spacing and colours, which is what stops AI-built pages from looking generic.

More free generators

Cursor rules generatorAGENTS.md generatorcopilot-instructions.md generatorGEMINI.md generator

Related

Claude Code design rules templateClaude Code templatesClaude Code promptsWhat is vibe coding?Vibe coding templatesTemplates for every AI coding toolVibe coding promptsHow to build a website with AI