Prompts for Vibe Coders: A Practical Guide to Claude Code
Getting good results from vibe coding mostly comes down to knowing what to prompt. This is a practical guide to CLAUDE.md setup, prompt patterns that work, and the Frontend Design skill, for non-technical builders using Claude Code.
You've probably heard about vibe coding, and maybe you've already tried it. You opened Claude Code, typed "build me a website," got something back, and thought this is either magic or chaos, and I can't tell which.
Plenty of people are in the same spot. Thousands of non-technical founders, designers and product people are using Claude Code to build real software right now, and the ones getting good results are the ones who've learnt how to prompt well. That's something anyone can pick up.
This guide covers the prompts and setup patterns that we see working well for non-developers using Claude Code's desktop app, and you don't need any terminal experience to follow it.
Setting up Claude Code Desktop
Claude Code is available as a standalone desktop application for macOS, Windows, and Linux. If you're on a Claude Max, Pro, Team or Enterprise plan, you've already got access.
Once it's installed, you get a clean interface with three tabs at the top: Chat, Cowork and Code. For most vibe coding you'll live in the Chat tab, which is where you describe what you want and Claude builds it.
Before you write a single prompt, though, there's one setup step that makes everything a lot better.
The CLAUDE.md File: Your Most Important First Step
A CLAUDE.md file is a markdown file that Claude reads automatically at the start of every session. Think of it as a brief that tells Claude who you are, what you're building and how you want it to work. Without one, Claude starts every conversation from scratch, but with one it already knows the context.
How to create one
In the Claude Code desktop app, type:
/init
Claude will scan your project folder (or create a new one if you're starting fresh) and generate a starter CLAUDE.md based on what it finds. You can then edit it to suit your needs.
If you're starting a brand new project with no files yet, you can just ask Claude:
"Create a CLAUDE.md file for this project. I'm a non-technical founder building [describe your project]. I don't have a coding background, so please keep explanations simple and avoid asking me about technical implementation details. Just make good decisions on my behalf."
What to put in it
Here's a template that works well for non-technical vibe coders:
# Project: [Your Project Name]
## About Me
I am not a developer. I am a [your role: founder, designer, marketer].
When explaining technical concepts, use plain language.
Make implementation decisions yourself rather than asking me about
technical specifics I won't understand.
## What We're Building
[2-3 sentences about your project, who it's for, and what it does]
## Technical Notes
Update this section yourself as you make technical decisions.
Record what framework, hosting, and major libraries you've chosen
so you remember across sessions.
## Style Preferences
- Keep the design clean and modern
- Use [your brand colours if you have them]
- British English throughout
The most useful line is the last instruction in the Technical Notes section, which tells Claude to update the file itself. As Claude makes decisions about your tech stack, database or architecture, it writes them into the CLAUDE.md so they carry over between sessions. That way your project context builds up over time without you needing to understand or manage it.
Everyday Prompts That Actually Work
The biggest mistake new vibe coders make is being too vague, because "Build me a website" gives Claude nothing to work with. Here are some prompt patterns that tend to give good results.
Starting a new project
"Create a landing page for my dog walking business in Manchester. The business is called WalkAbout. We offer daily walks, puppy socialisation, and holiday boarding. I need a hero section, services overview, pricing, testimonials section (use placeholder content), and a contact form. Make it mobile-responsive."
Notice how specific it is, with the business name, location, services, page sections and a functional requirement (mobile-responsive). The more detail you give, the fewer rounds of "no, not like that" you'll need.
Building from reference sites
"Use the frontend design skill to create a marketing website for a SaaS product. Reference these sites for inspiration: [site 1 URL], [site 2 URL]. Match the general layout of [site 1] but use the colour palette from [site 2]. Ensure the hero section has a product screenshot mockup, three feature cards, a pricing table with two tiers, and a footer with newsletter signup."
Pointing Claude at real websites gives it concrete design direction, so it doesn't have to guess your taste.
Iterating on what you have
"The hero section feels too cramped. Add more vertical padding, make the headline larger, and put more spacing between the headline and the subtext. Keep everything else the same."
When you're iterating, short and specific prompts work much better than long ones. Change one or two things at a time so you can see what each change does.
Adding functionality
"Add a contact form that collects name, email, phone number, and a message. When submitted, send the data to [your email] using a free email service. Show a success message after submission. Validate that email and phone are in the correct format before allowing submission."
Fixing something that broke
"The navigation menu isn't showing on mobile. It should collapse into a hamburger menu on screens smaller than 768px. When tapped, it should slide in from the right. Don't change any of the desktop styling."
The constraint ("don't change any of the desktop styling") matters here, because without it Claude might helpfully rework things you didn't want touched.
Installing Skills for Better Results
Claude Code supports skills, specialised plugins that give Claude domain-specific knowledge. For vibe coders building websites, the most useful one is the Frontend Design skill.
The Frontend Design skill
This skill teaches Claude to build distinctive, production-grade interfaces that don't look like generic AI output. It focuses on strong typography, careful colour choices and layouts that look like a designer made them.
To install it, ask Claude:
"Install the frontend design skill"
Or if you'd rather do it by hand, you can download the skill file into your project's .claude/skills/ directory.
Once it's installed, Claude applies these design principles automatically whenever you ask it to build UI, so you don't need to mention the skill in every prompt.
Other useful skills
- SEO Audit: checks your pages for search engine optimisation issues
- Copywriting: helps write compelling marketing copy for your pages
You can discover available skills by asking Claude:
"What skills are available to install?"
Prompt Patterns for Common Tasks
Here are some ready-to-use prompts you can adapt for your own projects:
"Make it look professional"
"Review the current design and improve it. Focus on consistent spacing, a clear visual hierarchy, and a professional colour palette. Use a modern sans-serif font. Ensure all buttons have hover states and the overall feel is polished and trustworthy."
"Add a section"
"Add a 'How It Works' section between the hero and the pricing section. Use three steps with icons, each with a short title and one sentence of description. The steps are: 1) Book online, 2) We confirm within an hour, 3) Enjoy the service."
"Make it faster"
"Check the page load performance. Optimise any large images, remove unused CSS, and ensure the page scores above 90 on Lighthouse. Don't change any visual design."
"Prepare for launch"
"Review this site for launch readiness. Check for broken links, missing meta descriptions, missing alt text on images, and any placeholder content that needs replacing. Give me a list of everything that needs fixing before going live."
When the Prompts Get Hard
With vibe coding, the first 80% is really easy. You can get a good-looking landing page, a basic web app or a prototype up and running in an afternoon.
The last 20% is where it gets harder: payment integration, user authentication, database design, security hardening, deployment configuration, SEO, accessibility and cross-browser testing. In these areas, knowing what to ask for means knowing what can go wrong, and that's quite a different skill from knowing how to prompt.
This is the gap we see most often with the founders and product people who come to us. They've built something genuinely impressive with Claude Code, it works and it looks good, but they aren't sure if it's ready for real users, real payment details and real data.
Built something with AI that needs a professional review before launch? Our Vibe Code Review service is designed for exactly this situation. We audit AI-generated codebases for security vulnerabilities, code quality issues, and production readiness. We then either give you a clear report or fix the problems ourselves. Book a review
Beyond the Prompts: When to Bring in Help
Vibe coding is powerful, and it has genuinely changed who can build software. There's still a reason experienced developers exist, though, and it isn't because they type faster.
A lot of what a professional developer does is make hundreds of small decisions correctly, like which database suits your scale, how to structure your data so it doesn't fall apart at 10,000 users, where the security boundaries are, how to deploy without downtime, and how to recover when things go wrong at 2am.
If you're using Claude Code to build a prototype, a side project or an internal tool, you're doing it right, so keep going.
If you're building something that has to handle real customers, real money or real data, that's when the prompts stop being enough. Claude can do the work, but knowing the right questions to ask takes experience you haven't had the chance to build yet.
Want to skip the guesswork? We work with non-technical founders every day to turn ideas into production-ready software. Whether you need us to review what you have already built, build your MVP from scratch, or create a high-converting marketing site, we handle the hard parts so you can focus on your business. Start a conversation
Key Takeaways
- Set up a CLAUDE.md file first. It's the most useful thing you can do. Tell Claude who you are and what you're building, and let it update the file with technical decisions as it goes.
- Be specific in your prompts. Name the sections, describe the layout and point to real websites, because the more context you give, the better the output.
- Install the Frontend Design skill. It noticeably improves the visual quality of everything Claude builds.
- Iterate in small steps. Change one or two things per prompt and check each change before moving on.
- Know your limits. The first 80% is fun, but the last 20% (security, scalability and production readiness) is where professional experience really matters.
References
Related insights
View allWebsite Horror Stories (and How to Avoid Starring in One)
Microsoft lost hotmail.co.uk, the Dallas Cowboys let their domain lapse over $9.99, and a UK host deleted 67 servers with no backups. Here are five real ways small businesses lose their websites, what stops each one, and a one-page check of who owns what.
Claude Code's Idle Compaction: What It Does and When to Switch It Off
Claude Code now summarises a long session that sits idle for about 54 minutes, to save the cost of a cold prompt cache. It's a good trade for a single task and a bad one for a planning session that leads other agents. Here's how it works, the arithmetic behind it, and how to turn it off or raise the threshold.