Copy-paste Claude Code prompts for landing pages, dashboards, pricing, login, onboarding and AI apps, written for a real repo, paired with a design template, plus a prompt that writes your CLAUDE.md design rules.
A full landing page for a SaaS product: hero, logos, features, how it works, pricing, FAQ and a closing call to action.
Template: Pixel SaaS landing page
“Build a landing page for [product name], a SaaS product that helps [audience] [main outcome]…”
A hero section that explains the product in one line and gets the click, with a product visual and social proof.
Template: Dark gradient hero
“Build the hero section for [product name], which helps [audience] [main outcome]…”
A pricing page with three plans, a monthly and yearly toggle, a comparison table and a pricing FAQ.
Template: Three tier pricing section
“Build a pricing page for [product name]…”
An app dashboard with sidebar navigation, key metrics, a chart, a recent activity table and empty states.
Template: SaaS analytics dashboard
“Build the main dashboard for [product name], used by [user type] to [main job]…”
Sign in, sign up and forgot password screens with social login, clear errors and a branded side panel.
Template: Login page
“Build the sign in, sign up and forgot password pages for [product name]…”
A short onboarding flow: welcome, role, goals and a first-step checklist that gets new users to value fast.
Template: Onboarding role selection
“Build the onboarding flow new users see after sign up for [product name]…”
A ChatGPT-style AI chat app: conversation list, streaming answers, suggested prompts and a clean message box.
Template: AI chat interface
“Build an AI chat app called [product name] that helps [audience] with [topic]…”
A landing page for a mobile app with phone mockups, feature screens, reviews and App Store and Google Play buttons.
Template: Mobile app landing page
“Build a landing page for [app name], a mobile app that helps [audience] [main outcome]…”
A personal portfolio site with selected work, case study pages, an about section and a contact form.
Template: Designer portfolio website
“Build a portfolio website for [name], a [role] who wants [type of client or job]…”
Account, billing, team and notification settings pages with a settings sidebar and clear save states.
Template: Account settings page
“Build the settings area for [product name]…”
A pre-launch waitlist page that collects emails, shows the product and gives people a reason to share.
Template: Waitlist landing page
“Build a pre-launch waitlist page for [product name], launching [launch date]…”
A short launch video built in code: hook, product name, three feature scenes and a closing line, exported as MP4.
Template: App launch video
“Adapt the launch video template for [product name], which helps [audience] [main outcome]…”
Redesign an existing vibe-coded site or app to match a professional template, without breaking content or routes.
Template: AI chatbot landing page
“Redesign this [site or app] so it looks professional, using the template as the new design…”
A design section for CLAUDE.md that tells Claude Code which template to follow, which colours and type sizes to use, and what never to do.
“Create the design rules file at CLAUDE.md for this project, so every future change follows the same design…”
Every Claude Code prompt above shows its opening line for free. The full prompts, and the templates they are written for, come with a BrowserMoon licence.
Get a licenceClaude Code can build a whole site from the terminal, but its design is only as good as the reference you give it. These Claude Code prompts point it at a BrowserMoon template saved in your repo, spell out the sections, and include a CLAUDE.md design file so every page it writes stays on brand.
Choose the Claude Code prompt for the page you are building, from a SaaS landing page to a login screen or an AI chat app.
Each prompt is written to go with the template shown on its card. Copy that template, or any template from the Claude Code templates page.
The design template is saved at design/template.html. Read it before you write any code, then match its fonts, spacing, colours, corner radius and components exactly.
Replace the parts in brackets, like [product name] and [audience], with your own details. The prompt ends with: “Plan the files first and show me the plan, then build. Run the dev server and check the page at 375px and 1440px wide before you finish.”
Start with the CLAUDE.md design rules prompt. Claude Code reads CLAUDE.md at the start of every session, so once your design rules are there, every later prompt on this page builds pages that match. Then run the landing page or dashboard prompt.
Claude Code is strong at reading a codebase and making careful changes across many files. What it cannot do is guess what your product should look like, so it reuses whatever styles it finds, or falls back to plain defaults when the repo is new.
These prompts are written for how Claude Code works: they point it at a template saved in your repo, ask it to plan before it edits, reuse your existing components and run the build when it is done. The result is a page that matches the design and fits your code.
Each prompt on this page is built from the same five parts. The page-specific part changes per prompt; the rest is written for how Claude Code works.
Save the template to design/template.html instead of pasting it. Claude Code can re-read it whenever it needs to, and it stays out of the chat.
Put your design rules in CLAUDE.md. Claude Code reads it at the start of every session, so new pages follow the same rules.
Let Claude Code list the files it will create before it writes them. It is easier to fix a plan than a finished page.
Ask it to run the dev server and check the page at phone and desktop widths. It catches layout bugs before you do.
Without project rules, every session starts from zero and the design drifts. Write the design rules once.
Save it in the repo and reference the file. Claude Code can reread it at any time without losing context.
Ask for a plan first so you can correct the approach before Claude Code edits ten files.
Tell Claude Code to reuse existing buttons and cards, or you end up with three versions of each.
Claude Code is used by developers who already have a codebase and want an agent that edits it properly. These Claude Code prompts are for engineers who can build anything but do not want to hand-design every page, and for teams who want Claude to follow one design across the whole repo.
A prompt says what to build; a template shows Claude Code what it should look like. These templates also fit the prompts above.
One that points Claude Code at a design file in the repo, lists the sections of the page in order, and asks it to plan before it builds and check the result in the browser.
Save it as a file, like design/template.html, and tell Claude Code to read it. It can look at it again later, and your chat stays short.
Which template to follow, your colours, font sizes and spacing, and a short list of things to avoid. These prompts include a ready-made design section for CLAUDE.md.
Yes. Use the redesign prompt: it tells Claude Code to keep your content and routes and change only the design to match the template.
For a full page, yes. Plan mode lets you check which files Claude Code will create and change before it writes anything.
Yes. The prompts tell it to reuse components already in your repo and only restyle them to match the template.
Prompts for other AI coding tools
