Prompting Claude to Write Code
Get better HTML, CSS, and JavaScript by giving Claude clear goals, constraints, and context.
Claude is excellent at writing front-end code, but the quality of what you get back depends on the quality of your request.
What a good coding prompt includes
- The goal — what should the code do? ("a responsive pricing table").
- Constraints — the stack, framework, and rules ("vanilla HTML and CSS, no libraries, mobile-first").
- Context — existing code, design tokens, or an example to match.
- The output shape — "return a single HTML file I can open in a browser".
Vague vs. clear
A vague prompt ("make a form") forces Claude to guess. A clear prompt ("an accessible contact form with name, email, and message, client-side validation, and no external CSS") gets you usable code on the first try.
Example
const prompt = `Write a responsive pricing table.
Requirements:
- Vanilla HTML and CSS only, no frameworks or CDN links.
- Three tiers: Starter, Pro, Enterprise.
- Mobile-first; stack the cards on narrow screens.
- Accessible: real headings and sufficient colour contrast.
Return a single, complete HTML file I can open in a browser.`;
const response = await client.messages.create({
model: "claude-opus-4-8",
max_tokens: 4096,
messages: [{ role: "user", content: prompt }],
});When to use it
- Ask Claude to generate a responsive CSS grid layout by specifying the number of columns, gap size, and breakpoints.
- Request a JavaScript fetch wrapper with error handling by describing the expected API shape and retry behaviour.
- Get a form validation function by telling Claude the exact fields, rules, and error message format your app uses.
More examples
Vague vs. specific prompt comparison
Shows how specificity — naming props, framework, constraints — drastically improves the result.
# Weak prompt — too vague
"Write a button component."
# Strong prompt — clear goal, constraints, context
"Write a React <Button> component that accepts label, onClick,
disabled, and variant ('primary'|'ghost') props. Use Tailwind.
No extra dependencies. Export as default."Prompt with input/output example
Provides a concrete input/output example so Claude knows exactly what shape the function must produce.
const prompt = `Write a JS function slugify(str) that:
- Lowercases the string
- Replaces spaces with hyphens
- Removes non-alphanumeric characters
Example: slugify("Hello World!") => "hello-world"`;
const msg = await client.messages.create({
model: "claude-sonnet-4-5",
max_tokens: 256,
messages: [{ role: "user", content: prompt }],
});Constraint-first code request
Lists constraints up front (single dependency, return format) so the generated code fits the project immediately.
const prompt = `Generate a Node.js Express middleware that:
- Reads a Bearer token from the Authorization header
- Verifies it with jwt.verify(token, process.env.JWT_SECRET)
- Returns 401 JSON on failure
- Calls next() on success
No third-party packages beyond jsonwebtoken.`;
const msg = await client.messages.create({
model: "claude-sonnet-4-5",
max_tokens: 512,
messages: [{ role: "user", content: prompt }],
});
Discussion