Recommended resources
The freely available resources this lesson will direct you to.
Hello! Welcome back.
In our last lesson, we successfully set up your digital workshop. You installed Visual Studio Code and equipped it with the essential Live Server and Prettier extensions, establishing a real-time feedback loop between your code and its visual output.
Today, we'll introduce your AI creative partner into this environment. Our goal is to integrate Claude into your VS Code setup for AI-assisted code generation. This is the most critical connection in our workflow, linking your development environment directly to the AI that will help us write the code for our animations. By the end of this lesson, you'll have the official Claude extension installed, authenticated, and ready for your first prompt.
Step 1: Understanding the Claude Code Extension
Before we install anything, it's important to understand what this integration gives us. The Claude Code extension for VS Code isn't just a chatbot in a side panel. It’s a deeply integrated tool that can:
- Read the files in your project.
- Understand the context of the code you're working on.
- Directly suggest, write, and modify the code in your files.
Think of it as a Figma plugin that has full access to your design file—it can read your layers, understand their properties, and create new elements based on your instructions. This level of integration is what allows you to direct the AI with high-level creative prompts and have it execute the low-level coding tasks.
Step 2: Installing and Authenticating Claude
Let's get the extension installed. The process is straightforward and happens entirely within the VS Code Extensions marketplace, which you used in the previous lesson.
The official documentation provides the most reliable instructions.
Use Claude Code in VS Code - Claude Code Docs
We'll start with the official guide from Anthropic. This will walk you through finding and installing the correct extension.
First, read the 'Prerequisites' to confirm you have what you need (a VS Code installation and an Anthropic account). Then, follow the steps in the 'Install the extension' section to add Claude Code to VS Code. The guide gives you a link or shows you how to search for it manually.
To give you a clear visual target, this is what you're looking for in the marketplace:
Once the installation is complete, you'll need to connect your Anthropic account.
- Open the Claude Panel: Follow the instructions from the documentation you just read to open the Claude panel. The easiest way is usually to click the "Spark" icon (âś±) that appears in the top-right corner of your editor or in the bottom status bar.
- Sign In: The first time you open the panel, Claude will prompt you to sign in. This will open a page in your web browser where you'll authorize the extension to use your Anthropic account.
- Confirmation: After you sign in successfully, you should see a confirmation. While the interface you're using is graphical, the underlying connection process is the same as what's shown in the image below, which confirms a successful login.
Now, you should have a Claude chat panel open directly inside VS Code, ready to receive instructions.
Step 3: A Glimpse of Deeper Integrations
One of the most powerful aspects of Claude Code is that it can be extended with its own set of plugins, much like Figma. This allows Claude to connect to and interact with other services and tools. While we won't be setting these up today, it's incredibly valuable to know what's possible, especially since it relates directly to your goal of linking Figma and code.
Discover and install prebuilt plugins through marketplaces
Let's take a quick look at the documentation for Claude's own plugin system. This will give you a sense of the powerful workflows you can build.
Skim the sections 'How marketplaces work' and 'External integrations'. You don't need to dive deep into the technical details. The key takeaway is understanding that, like an app store, you can add new capabilities to Claude. Specifically, notice the 'figma' plugin listed under 'External integrations'. This points to a future where you can have Claude directly reference your Figma files when generating code.
Seeing that a direct Figma integration exists should be motivating. It confirms that the workflow you envision—moving from a visual design in Figma to a coded animation via AI—is not just possible, but is a path supported by the tools we are setting up today.
Key Takeaways
- The Claude Code extension for VS Code is an integrated AI assistant that can read, write, and edit your project files directly.
- Installation is handled through the VS Code Extensions marketplace, and it requires you to sign in with your Anthropic account.
- The Claude ecosystem includes plugins and marketplaces, which can extend its capabilities to connect with external tools, including a dedicated plugin for Figma.
Next Up
Congratulations! You've now assembled the core components of your creative-coding environment. VS Code is your workshop, Live Server is your real-time preview, and Claude is your expert AI assistant, ready and waiting for instructions.
In the next lesson, we will put this new setup to work. You'll write your first structured prompt and ask Claude to generate a basic HTML, CSS, and JavaScript project structure. This will be your first experience of directing the AI to build a complete, working foundation from a single command.