DEV Community

Cover image for How to Write Great Claude Code Prompts to Build Apps and Websites in One Shot
Joel Stafford
Joel Stafford

Posted on

How to Write Great Claude Code Prompts to Build Apps and Websites in One Shot


🚀 100 Projects in 1 Prompt? Master Claude Code for One-Shot Apps

If you have ever stared at a blank IDE wondering where to start, or spent hours wrestling with a tutorial that assumes you already know everything, Claude Code changes the game entirely. This guide walks you through everything you need to know to go from an idea to a fully working application — in a single, well-crafted prompt.

I’ve prepared a prompt library containing 100 real-world Claude Code prompts and a skill.md (knowledge base) that contains the most important takeaways for any AI coding tool. Previously, I collected 5,000 prompts for ChatGPT and Gemini, but those are often too generic for building real-world programs; now, it's time to dig deeper into starting your career in the age of AI.


🤖 What Is Claude Code?

Claude Code is Anthropic's AI-powered coding tool that lives directly in your development environment. Unlike simply pasting code into a chat window, Claude Code acts as a genuine coding collaborator — it reads your files, writes and edits code, runs commands, tests your application, and iterates until things work.

There are two main ways to use it:

1.  The CLI (Command Line Interface)
The Claude Code CLI is installed as an npm package and runs inside your terminal. You open a project folder, type claude, and start a conversation. It is powerful, lightweight, and ideal for developers already comfortable in the terminal.

bash
npm install -g @anthropic-ai/claude-code

2.  The Claude Code Desktop App ✨
The desktop app is the recommended starting point for this guide. Available for both Mac and Windows, it wraps the same underlying power in a polished visual interface with significantly more options:

Visual environment selection — Choose between local folders, GitHub repositories, or a cloud-hosted sandbox with a single click.
Drag-and-drop context — Drop images, PDFs, skill files, and other documents directly into the chat to give Claude rich context.
Live preview panel — See your website or web app render in real-time as Claude builds it.
Browser testing built-in — Claude can open a browser, click around your app, and report back what it finds.
Multiple projects side-by-side — Switch between codebases without losing conversation history.


🌍 Choosing Your Environment

When you open a new project in Claude Code, you have three primary options for where the code will live and run:

Local Environment: Connecting Claude to a folder on your own machine for full control.
Claude Cloud: One-shot builds. A temporary, sandboxed Linux container with no setup required.
GitHub Integration: Connecting directly to a repository to create branches and open pull requests.


📝 The Anatomy of a Perfect One-Shot Prompt

A great Claude Code prompt is a structured specification that gives Claude everything it needs to make good decisions. Every strong prompt has five essential ingredients:

1.  The Goal — What should this thing do? Be specific in one sentence.
2.  The User / Context — Who is using this? This helps Claude choose sensible defaults.
3.  The Stack — What language, framework, or libraries should be used?
4.  The Features — List the key features or screens in a bulleted list.
5.  The Constraints — Anything Claude should avoid or prioritize (e.g., "no external libraries").


🛠️ Use Case 1: Building a Website in One Shot

The Goal: A personal portfolio website for a freelance photographer.

✅ Pro Prompt Example:

Build a single-page photography portfolio website using HTML, CSS, and vanilla JavaScript. No frameworks.

Context: This is for a freelance photographer named Maria Chen. The site needs to feel minimal, editorial, and high-end.

Features:
-  Hero section with full-viewport background image.
-  Masonry photo grid using picsum.photos placeholders.
-  About section and a simple email contact form.
-  Smooth scroll navigation.

Constraints: Mobile responsive. Monochrome color scheme. No jQuery. Use CSS variables.


🔄 How Claude Plans and Executes

When you submit a request, Claude breaks it into a visible task list — a prioritized sequence of concrete steps.

1.  Plan: It identifies steps like creating the HTML structure or writing the CSS. This plan is interactive.
2.  Execute: Claude writes the files and runs the code.
3.  Test: In the desktop app, Claude will actually use the application it builds — verifying that it renders correctly and fixing bugs automatically.


💡 Using a Skill File: The Simplest Power Move

A skill file (a .md file with structured instructions) works like a system prompt for a specific type of task.

How to use it: Simply drag the .md file into the Claude Code chat window, and it becomes active context for that session. For a team, skill files become shared standards; for solo developers, they capture knowledge you would otherwise have to re-explain every session.

The companion skill.md file for this article (available with the prompt library) gives you a ready-to-use template covering the essential ingredients for prompting Claude Code.


✅ Write-Your-Own Checklist

Before you hit publish or enter, check your prompt against these rules:

Title/Goal: Starts with a clear goal or specific number.
Opening: Answers "why read this" within 10 words.
Stack: Explicitly mentions the language or tools.
Structure: Uses scannable H2 sections and bulleted lists.
Tone: Uses "I" and "you" for a conversational, personal feel.


🏁 Final Thoughts

Claude Code is not a replacement for knowing how to code — it is an amplifier. The developers getting the most out of it are those who know exactly what they want and can express it clearly. Start with one of the 100 prompts. Modify it. Run it. Iterate.

What are you building first? Let me know in the comments! 👇

javascript #webdev #beginners #tutorial #ai #productivity

Top comments (0)