Claude Code
an orientation for designers

Welcome everyone. This talk is about how designers can use Claude Code to ship real work to production.

Just describe what you want in plain English.

Plain English isn't always enough — we need to provide better context using these tools.

No notes

You don't need to get to know a codebase, but Claude definitely does! It needs to know how to run tests and how to deploy, etc. Context is our constraint — how much can Claude hold in its memory? Codebases are large, so they gobble up memory quickly, so we summarise things.

Claude.md is your system prompt. Use strong words like ALWAYS, NEVER, DO NOT. Claude can update its own .md file if you ask it to. EXAMPLES — Always use icons from Tabler Icon Set, do not use other icon sets. Always use Ransack for searching.

Skills are contextual system prompts — modular context. All these things are is TEXT that the agent knows to reach for if they need to. Copywriting skill for marketing tone and voice. Cloudflare docs skill for documentation standards. Commit skills can be different per company — get someone to codify your standards. Find skills at skills.sh. We can push skills to our codebase so other devs and designers can use them. That helps you leverage your skills to make all your devs better if you write well-structured modular skills on how to implement your UI, typography, brand styles, etc.

You can paste a screenshot directly into the conversation — Claude can see images. CleanShot X lets you annotate screenshots with arrows, highlights, and text before pasting them in. This helps Claude understand exactly what you're pointing at. Agentation takes this further — it can grab specific elements from the page along with their location in the DOM and React component tree, so Claude gets structured context instead of just pixels.

Agentation gives you structured page feedback instead of a raw screenshot. Claude can read this directly — element locations, React component tree, and your feedback all in one block.

MCP — Model Context Protocol — is a standard API that Claude knows how to talk to. It lets Claude connect to external tools and services beyond your local files. Useful MCP servers for designers: Linear (pull tasks directly into your workflow), Chrome (navigate to your site and verify changes), Figma, and more. MCP can be a bit slow, but it's very powerful. Worth asking: does your company already have MCP servers for the tools you use? If not, it's worth building them.

This is where it all comes together. Walk through the end-to-end flow of a designer spotting an issue and shipping a fix.

No developer is going to be mad at you for opening a PR. But everyone will be annoyed if you open one you didn't test thoroughly. That is the bar. A pull request is the start of a conversation about a change you want to make. Start things off on the right foot by making sure everything you've changed actually works. It can be a good idea to share your prompt — that might help people reason with your choices.

Ask Claude for trade-offs, not whether something is good or bad — it'll just nitpick. You can polish something forever, but you are the only person with the judgement to know when a trade-off is acceptable. Use /clear to reset the conversation when you want a fresh perspective. It clears the chat history but doesn't undo any file changes. It doesn't hurt to learn how to write PRs yourself, but a skill can codify your standards so Claude writes them like you would. The important thing is to start the conversation on the right foot by making sure everything works.

"Interview me about..." can be especially useful if you're exploring and not quite sure how to articulate what you're looking for.

npm install, cd into project, run Claude. That's it. First time you'll need to authenticate.