# Custom instructions, styles, and artifacts
Stop pasting the same "be concise, no preamble, use British spelling" instructions into every chat. Claude lets you set tone and format once, then turns the conversation itself into a live workspace where it builds, you edit, and the thing actually runs. This lesson wires those two ideas together: persistent personalization through custom instructions and Styles, and the side-panel build environment called Artifacts.
These get confused constantly, so separate them clearly.
Custom instructions are standing rules that apply to a context. At the account level (Settings), they cover every chat. Inside a Project, the project's instructions apply to just that workspace and stack on top of your account-level ones. This is where you put durable facts and constraints: "I'm a product manager at a fintech, default to plain language, always flag regulatory risk, never invent figures."
Styles control *how Claude writes*, not *what it knows*. A Style is a reusable voice-and-format profile you switch on per conversation. Claude ships with presets like Formal, Concise, and Explanatory, and you can create a Custom Style by giving examples of writing you want to match. Claude infers the patterns (sentence length, structure, formatting habits) and applies them.
The practical split:
A custom Style is the better tool when your voice changes by task. You might write release notes in a terse "Engineering" Style and customer emails in a warmer "Support" Style, all under the same account instructions. See the official guidance on creating and using Styles.
The fastest way to a good custom Style is to paste two or three samples of your real writing and let Claude derive the rules. Then refine in words: "Tighter. No bullet lists unless I ask. Open with the answer, not context." Styles are editable after creation, so treat the first version as a draft.
One caution: a strong Style competes with strong in-chat instructions. If you ask for a formal legal summary while a "Casual" Style is active, you get tension. Match the Style to the task or switch it off.
An Artifact is a substantial, self-contained piece of content Claude renders in a dedicated side panel instead of inline in the chat. Code, a full document, an SVG diagram, an HTML page: when output is something you'll keep, edit, or reuse, Claude pops it into the Artifacts panel where it persists and updates across turns.
The important part for this lesson: Artifacts can run. An HTML/CSS/JS Artifact or a React component renders live. You're not reading a code listing; you're using the thing. That collapses the build-test loop into the conversation.
Let's build a working utility as an Artifact: a UTM link builder that takes a base URL and campaign parameters and produces a tagged URL with a copy button. This is the kind of single-file tool that's genuinely useful and lives forever in your bookmarks.
> Build a single-page UTM link builder as an HTML artifact. Inputs: base URL, source, medium, campaign, optional term and content. As the user types, show the assembled URL live with proper encoding. Include a "Copy" button. Self-contained: inline CSS and JS, no external libraries. Clean, modern look.
Claude generates a complete index.html in the Artifacts panel and renders it immediately. You type into the fields and watch the URL assemble. The core of what it produces looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UTM Link Builder</title>
<style>
body { font: 16px/1.5 system-ui, sans-serif; max-width: 560px; margin: 2rem auto; padding: 0 1rem; }
label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
input { width: 100%; padding: .5rem; box-sizing: border-box; }
#out { margin-top: 1rem; padding: .75rem; background: #f4f4f5; word-break: break-all; }
button { margin-top: .5rem; padding: .5rem 1rem; cursor: pointer; }
</style>
</head>
<body>
<h1>UTM Link Builder</h1>
<label>Base URL</label><input id="url" placeholder="https://example.com/page" />
<label>Source</label><input id="source" placeholder="newsletter" />
<label>Medium</label><input id="medium" placeholder="email" />
<label>Campaign</label><input id="campaign" placeholder="spring_launch" />
<div id="out">Your tagged URL appears here.</div>
<button id="copy">Copy</button>
<script>
const fields = ["source", "medium", "campaign"];
const out = document.getElementById("out");
function build() {
const base = document.getElementById("url").value.trim();
if (!base) { out.textContent = "Enter a base URL."; return; }
const params = new URLSearchParams();
fields.forEach(f => {
const v = document.getElementById(f).value.trim();
if (v) params.set("utm_" + f, v);
});
const q = params.toString();
out.textContent = q ? base + (base.includes("?") ? "&" : "?") + q : base;
}
document.querySelectorAll("input").forEach(i => i.addEventListener("input", build));
document.getElementById("copy").addEventListener("click", () =>
navigator.clipboard.writeText(out.textContent)
);
</script>
</body>
</html>Notice it used URLSearchParams, which encodes values correctly for free. That's the kind of detail you'd want a senior engineer to handle, and Claude reached for the right primitive without being told.
You try it and want two changes. You don't re-describe the whole tool; you point at what's wrong.
> Two fixes: (1) add optional "term" and "content" fields. (2) The Copy button should briefly change its label to "Copied!" for two seconds so I get feedback.
Claude edits the existing Artifact rather than regenerating from scratch. The panel updates in place: two new inputs appear, and the copy handler now does a timed label swap. The diff is small and surgical because Artifacts maintain state across turns. This iterative, "point and refine" loop is the whole reason Artifacts matter. You converse your way to a finished tool.
When it's done, you can copy the file out, or in the Claude apps, publish the Artifact to share a live link. For app-style React Artifacts, Claude supports interactive components that other people can use directly.
Artifacts run in a sandboxed browser context. That's perfect for self-contained front-end tools, calculators, visualizations, and documents. It is *not* where you build something that needs secrets, a database, or server-side execution.
The moment you need real file system access, package installs, or a multi-file repo, you've outgrown Artifacts and want Claude Code, Anthropic's agentic command-line tool that works in your actual project. And if you want Claude to pull live data into the chat (your calendar, a Google Drive doc, a GitHub repo), that's the job of Connectors and MCP, the Model Context Protocol, not Artifacts. Keep the mental model clean: Artifacts are an output and editing surface, not an integration layer.
Knowledge check
1. According to the lesson, what is the key distinction between custom instructions and Styles?
2. How do Project-level custom instructions interact with account-level custom instructions?
3. When creating a Custom Style by providing writing samples, how does Claude generate the Style?
4. Select ALL correct answers about when to use a Custom Style versus custom instructions.
Sélectionnez toutes les réponses correctes.
5. Select ALL correct answers about Claude's preset and custom Styles.
Sélectionnez toutes les réponses correctes.
The real workflow stacks these. Picture a Project called "Marketing Tools":
Because the project instructions already enforce "single-file, no CDNs," you stop repeating constraints in every prompt. The instructions shape every Artifact Claude produces in that workspace. This is the payoff of separating standing rules from per-task voice from buildable output: each layer does one job, and they compose.
You'll see Skills referenced alongside these features. A Skill is a packaged set of instructions and resources (and optionally code) that Claude loads when relevant, so it can perform a specialized task consistently, like filling a specific document template or following your team's brand rules. Skills overlap conceptually with custom instructions but are more portable and structured: you build a Skill once and Claude invokes it across chats when the task matches. For repeatable, well-defined jobs, a Skill is more durable than pasting instructions. For one-off voice tuning, a Style is lighter weight. The Anthropic docs are the place to track how Skills, Styles, and instructions are surfaced as the apps evolve, since the UI placement shifts.
A few habits make the two-turn loop reliably fast:
Point, don't repeat. In refinement turns, name the specific behavior to change. "The copy button needs feedback" beats re-pasting the spec. Claude edits in place and keeps everything else stable.
Ask for one logical change set per turn. Bundling "add fields" and "add copy feedback" worked because both were small and unrelated. Stacking a redesign plus a new feature plus a bug fix in one message makes the edit harder to verify.
Verify by using, not reading. The advantage of a live Artifact is that you can test the actual behavior. Click the button. Paste a URL with an existing ? query string and confirm it appends with &. Trust the running tool over the code listing.
Promote when you outgrow it. When a tool needs a backend or a real repo, ask Claude to export the logic and move it into Claude Code or your own project. Don't try to force server features into the sandbox.