Designing Claude Code

• Claude Code integrates a large language model (LLM) directly into the terminal, leveraging its ubiquity in developer workflows and its natural text-in/text-out format as an ideal interface for AI-driven coding.
• This approach streamlines the developer workflow by enabling direct code changes from prompts, moving beyond simple auto-completion to full file or task-level modifications within the native coding environment.
• Claude Code empowers non-technical users, such as designers, to directly interact with and modify code, fostering better collaboration with engineers and accelerating the design-to-production cycle.

• Claude Code was designed as a CLI product to enable rapid iteration and integrate seamlessly into any developer's workflow, whether they primarily use an IDE or Vim.
• The terminal is considered the "perfect form factor" for an LLM because its text-in, text-out nature mirrors how users interact with command-line interfaces.
• The product eliminates the need for manual copy-pasting between Web UIs and local files, allowing developers to make direct edits and interact with the AI natively within their environment.
• Claude Code aims to evolve developer workflows from line-level auto-completion to PR level changes (full file/task modifications), with future plans for project-level orchestration and more autonomous agents.
• The user interface is structured around prompting in the terminal, using slash commands for tools, and configuration via files like settings.json and CLAUDE.md.
• Design principles prioritize a clean, focused CLI that acts as the "thinnest wrapper possible" to allow the raw capabilities of the underlying LLM to shine.
• Designers can utilize Claude Code for brainstorming ideas, estimating the scope of designs (by asking the LLM), and directly implementing final design polish to the codebase.
• Using Claude Code can enhance collaboration between designers and engineers by enabling designers to make initial attempts at code changes, leading to more productive discussions.

CLI — Command Line Interface; a text-based interface used to operate software and operating systems. IDE — Integrated Development Environment; a software application that provides comprehensive facilities to computer programmers for software development. Vim — A highly configurable text editor for efficiently creating and changing any kind of text, often used from the command line. LLM — Large Language Model; a type of artificial intelligence algorithm that uses deep learning to perform a variety of natural language processing tasks. Web UI — Web User Interface; the graphical, interactive elements that allow users to interact with a web application or website. PR level — Refers to the scope of changes typically associated with a Pull Request, which is a method for submitting contributions to a project, usually involving a significant set of related code modifications. slash commands — Specific commands entered by typing a forward slash (/) followed by a keyword, used to trigger actions or access tools within an application's interface. sub-agent — A secondary or specialized AI agent designed to perform specific tasks or workflows, often under the coordination of a primary agent or user. P2s — Priority 2; a categorization for tasks or issues that are important but not critical or immediately urgent, often related to bug fixes or minor improvements.

Hi, I'm Alex, I lead Claude Relations here at Anthropic. Today, we're talking about design for Claude Code, and I'm joined by my colleague, Megan. Hi, my name is Megan, and I'm the design lead for Claude Code. Megan, I want to start with the very unique form factor that Claude Code has. We built this coding product and it lives within a terminal. Can you tell me how we even got to that? Yeah, yeah, definitely. Well, if you've seen some of our previous videos, you know that Claude Code was a brainchild of a few folks here at Anthropic who are really passionate about Claude's ability to solve coding problems and help developers. And part of the initial decision for CLI was really just the ease of the form factor to be able to build really quickly and to iterate on features and functionality. But I think from there, really kind of against, honestly, my expectations and all our expectations, it took a life of its own because it's just so versatile. Like a terminal is in every developer's workflow, whether or not you're primarily in IDE, or even if you're just like a vim user, you're using terminal as part of your workflow in one shape or another. And so it lets you really integrate directly into developer's workflow where they are today, without needing to adopt a new tool of any sort. I think that's like a really good point. It's like the terminal has kind of been a foundational piece of software development since then, since forever, basically, as long as we've been doing this. So it's almost natural to kind of embed the next generation of a coding product within it. But Claude Code does some things that I didn't know were possible with a terminal. So maybe you'd like mark me through what is kind of the history bin of terminal products thus far and how is Claude Code like the next step there? Yeah, this is something I'm personally very, very passionate about. I think terminals are like the first user interface, right? Like the first ways that people use to talk to computers, they were text only, they were like very specific commands you needed to know in order to be able to interface with these devices. And they're like a super power tool. And then kind of from there, we evolved into these really rich web interfaces. We had like all these beautiful web UI. We had like tailwind. We had like CSS, we had JavaScript. Everything became very animated and very polished. But then when LLMs came out, we actually went all the way back to just chatting with a computer again. Like you didn't actually need all these buttons. You just needed to chat. And so I think terminal, interestingly, is actually the perfect form factor for an LLLM. Because you're giving text in, you're getting text out. And it's just as like so native to how you think about using like a command line interface that it was like a beautiful marriage, I think of like what the technology can do and what the product can do. And then it just happened to be that developers also spend their time there. So it's great. I see. So we're almost like going full circle to some degree because the model allows us to do it in some sense and removes the need for the UI abstractions that we've had to develop previously for different applications. Exactly, exactly. I also think a big part of why I think Claude Code is successful is no one likes copying pasting things from like a web UI to like your local file. I definitely do this all the time when I'm using Claude AI. And so being able to be like natively in the environment where everything lives is just such a rich part of the experience. But it does come with some challenges. CLI is not necessarily the most rich interaction surface. Let's talk more on that workflow piece because I remember very vividly when I was first using Claude and using language models for programming. And I would be on the website on Claude.AI and type in a prompt and paste in a file. Then obviously when I get a code output and I have to copy it, find my file. I'm like a local computer, paste it in, make the edits myself manually. And now we've kind of taken out that piece of the developer workflow and gone straight from the prompt to the direct edits on the file. Tell me a little bit more about how we're thinking about future iterations of this dev workflow and this dev loop within Claude Code. Absolutely. I think the way that I've been thinking about it within the team and a lot of folks will talk about it is the developer workflow initially started as writing lines of code. Like you're at a word level, you're at a function level, and that's where you spend time. And then the first really big AI development for coding was tab to auto complete. But that's still not a line level of code. When we get to the first generation of Claude Code, we're up leveling it to full file changes, or full task changes, almost like a PR level. And of course there are some things that Claude Code can do better or worse, but we're trying to move in that direction. As time goes on, as our models get more intelligence, as our capabilities get stronger, I think we're going to be moving not just from a specific task, but almost to a project level, where you're orchestrating multiple clouds from multiple places in order to be able to accomplish something. And I think the task will be longer running, and the Claude will be a lot more autonomous. And so you'll just get into a place where I do believe eventually, well, we might algorithm CLI, but also you're operating at a higher order of workflow than you ever were before as a developer. OK, related to the agent front, I know that we just recently, a few weeks ago, put out a sub-agent product. Talk more about that and how this paradigm of slash commands and sub-agent workflows and some of the other features that we've shipped under the hood of Claude Code. How do those all tie together? Yeah, definitely. So I think part of the reason terminal is so great is because it has a built-in architecture of how you control the interface. You have your flags that you put in as you launch Claude, and then you have your commands that you have within a terminal. And we introduced a very new paradigm, which is prompting in the terminal. There was so much debate. I even have a doc that I have with Boris from, I think, November, December of last year of like, we can't put outlines in terminal because when you resize the window, it's going to break everything. Every experience I've had with designing for CLI's before, I avoid outlines like the plague because it breaks everything when you have a problem. What is an outline? It's like the outline around the input box thing you'll have right now. You tend to avoid those in CLI design because when you resize, it's all just characters and spaces. And so it doesn't align properly. But Boris had a vision, and I was wrong. We found a great library and a great interface, and the teamwork's really hard to make it usable. And so the combination of being able to separate your prompting, which is how you're talking to the model, and then the tools that you have available, which is our slash commands, and the settings and the way you configure it, which is in our settings.json and our Claude to MD, I think that's kind of the architecture that I think powers Claude Code, but also is just part of the regular architecture software development. A readme file is very similar. So it just pairs really beautifully. How do we actually design new things? Like the outline box or just the visual aesthetics? Do we have design principles we follow? Is there rules or just walk me through that process? Yeah, definitely. I would say everyone is an inventor here at Anthropic and not the Claude Code team. So for the most part, it's a small team of one or two engineers coming up with ideas and then prototyping them, and then we rigorously test them internally. For the most part, they are used by all of everyone at Anthropic, everyone uses Claude Code. And so that's where we get a lot of our feedback. And then we'll typically do a cycle of UX polish towards the end when we feel like we have the right shape of what this technology should be. Subagents was a really fast one where it went from an idea to land, and there was a little bit of design polish on how we show a subagent and differentiate from a subagent versus Claude, how you set it up, same thing with MCP. But the big principles I think that I hold and push for very duly is, you know, a CLI is a very limited interface. We need to keep it clean as possible. And so we want to make sure that we're not flooding it with a lot of information and just keeping it really focused on the tasks that you're doing. The second is that we really want the model to shine, because at the end of the day, part of the reason CLI is so nice is that it's a thinnest wrapper possible around our models. And so you just get access to the raw capability of Claude. And that's honestly what makes Claude code so powerful. Do you have any favorite little design polishes or things that touches in Claude code? I definitely do. I really like the ASCI retillating and thinking. I think those are at such a great point of personality for Claude. And I also really, really like the different modes, how we've outlined if you're in thinking mode or planning mode or auto accept mode. I think it's just a very rich way to communicate complex information in a way that people can understand. I agree. And I love the personality touches as well. It feels like sometimes programming in the process of programming can be a robotic thing. You're dealing with lines of code and lots of characters. But when you're using Claude code, it's almost like a different experience. And it kind of elicits a different emotion than just like if I'm in an ID. And I'm just typing line after line of code. Yeah, definitely, definitely. I think there's actually a lot of really rich things you can do in terminal. And sometimes it's even about pulling us back. It's like, oh, actually, we don't need to over-design this. We can just let the model take care of it. Because it is really great at it, honestly. That's great. I'm really curious to hear some of your tips and best practices for using Claude code, especially as a designer and not a traditional technical person. How do you best use Claude code day to day? I love this question. It's something I'm personally very passionate about. I am a product designer. I will be the first to admit that I should not be writing any code. And any code I write is definitely five-coded and should be reviewed. But Claude and all these coding agents have what I consider unlocked a new skill set, or like a new skill tree for non-technical folks, where before I would need to maybe request time for a software engineer or kind of let some things go if it didn't necessarily make it to the right level of priority, I now have a new skill set to reach into to do it myself. And so the two big axes that you'll hear a lot, like designers talk about, the first one is the cost of an idea is zero. You can prototype very, very quickly. And I think that's interesting, but it's actually not the most exciting unlock for me. I think the more exciting unlock is I can actually push code to production. It can make the changes that I want. I'm in the live code base itself. And so some of the most common use cases that I do, almost on the daily, is if I'm designing a new feature, I'll actually brainstorm with Claude code at first. I'll be like, what are the most common use cases here? What are the edge states that I should think about? How would you design this, maybe? And then I'll do some iterations from there. I also ask Claude code sometimes to help me scope designs that I've proposed. I'll like draw I can drop it as an image. I'll be like, hey, how long do you think it'll take to make this? And Claude will give me estimates so I can, you know, friendly debate with the engineers. How long it'll actually take to build something, and we get to a compromise. And then the last one is, you know, when you're launching a new product, you often don't really get to do the last 2% of design polish you always want to do. And that's no longer true because I can just go in there once the engineers are done and in the last day before launch, or even in the few days after launch, I will go up and clean up all those things that are P2s that I really wanted to happen in the product. Wow, that's amazing. I love that. And those are awesome tips. It's kind of exciting to hear about this, almost convergence, almost of like the designer and the engineer into this design engineer, I guess, in some sense, because of Claude code and what it allows. Yeah, absolutely. And I think one thing that it's actually done surprisingly for me, is it's made my partnership with my engineers a lot better because there's a lot of things I honestly can't do on my own right now. But even making a first attempt and then going chatting with the engineer makes our collaboration. A lot stronger as well. So it's not just like giving you a new skill set. It's also helping you collaborate better with your partners, which I think is a really important part of this and a whole cycle we're building out right now. I agree. That's great. Well, Megan, this has been awesome. I really appreciate the conversation.