Test Post

Written by Knut Melvær

You built a prototype. Maybe it's a product catalog, a landing page, an internal tool. You prompted Claude Code for a few hours and now you have something that looks real. The demo goes well. People are interested.

Then comes the next question: "Can the content team try this out?"

And you realize the problem. The product names are strings in a React component. The descriptions are hardcoded in a TypeScript file. Every piece of content lives in code, which means every content change requires you. You can't hand the prototype to a content writer and say "populate this with real product descriptions." So the prototype sits in a folder, impressive but inert, while everyone waits for "real" development resources.

A content backend changes this. Your content writer logs in, adds real products, and discovers that the categories don't match the taxonomy they use. Your marketing lead puts in actual copy and realizes you need a short description field for product cards. These are the conversations that turn a prototype into a product, and they can't happen when content is locked in code files.

What this guide covers

This guide walks you through adding a content backend to your prototype using Sanity (a content management system) and Claude Code (an AI coding tool). By the end, you'll have an editing interface where your team can add and change content, a frontend that displays it, and a prototype that can evolve based on real feedback from real users.

The whole thing takes about an hour. You don't need to be a developer. You need to know what you're building and be comfortable prompting an AI tool to build it for you.

But this guide isn't a list of prompts to copy-paste. It teaches you a way of working with AI coding tools that's different from casual chat prompting. You'll learn:

• How to set up an AI coding tool for a specific domain (connecting it to real infrastructure, giving it expert knowledge through skills, and providing project context it reads before every task)
• How to describe what you need in terms of editorial workflows, not technical specs, and get output that's designed for your team
• How to go from an empty project to a working, editable prototype that your team can populate, test, and iterate on together

The example is a product catalog on Sanity, but the approach (set up your tools, describe the workflow, let AI handle the implementation) applies to any project and any AI coding tool. This is what takes you from asking ChatGPT to write code snippets to using AI to build real things at work.

We'll use a product catalog as the running example throughout. Swap in whatever fits your project: a marketing site, an event page, a resource library, a help center. The process is about the same.

Before you start: prerequisites for building with Claude Code

New to Claude Code? Start here

Already used it? Skip to the install list below.

Claude Code is Anthropic's AI coding assistant. You tell it what you want in plain English, it does the work, and it shows you what it changed. You approve or redirect. Two ways to use it:

• Desktop app. Mac and Windows. No terminal required. If the idea of a command line makes you uneasy, start here. Get it at claude.com/code.
• Terminal (CLI). What this guide assumes from here on, because the Sanity toolkit ships as a CLI plugin. Desktop users can still follow along, the prompts are the same.

Go through Anthropic's Claude Code quickstart (10 to 15 minutes) before continuing. You just need to install it, log in, and see the welcome screen. Never used a terminal? Their terminal guide for new users covers that part. Come back here once you're in.

What you'll install

Four things. If you've used Claude Code or Cursor before, you probably have most of these already.

• Node.js. Download the LTS version from nodejs.org. Node.js runs JavaScript outside a browser. It powers the tools we'll use throughout this guide.
• A terminal. On Mac: open Terminal (in Applications > Utilities). On Windows: open PowerShell (search for it in the Start menu). This is where you'll type commands. If you've never used one, it looks like a text-only interface. You type a command, press Enter, it runs.
• Claude Code (or Cursor). Get Claude Code at claude.ai/code. This guide uses Claude Code, but the prompts work in Cursor and similar AI coding tools too.
• A text editor. VS Code is a good default. Optional though, Claude Code can create and edit files without one.

Set up Claude Code for Sanity projects

This setup takes about 10 minutes. You'll install the Sanity toolkit, write a project brief, and let Claude Code handle the scaffolding.

Step 1: Install the Sanity agent toolkit

Open Claude Code and run: