A moodboard tells you exactly what your site should look like. Claude Code builds it. Put the two together and you go from a one-sentence brand to a coded, on-brand website without opening a design tool — or writing a line of code yourself.
Here's the gap most people hit when building a site for a new brand or product: you can describe what you want it to feel like, but turning that into real colors, type, layout, and code is a slog. You either fight a website builder's templates or stare at a blank editor.
MoodyBoards closes the first half of that gap — it turns a description into a concrete visual direction (palette, typography, mood, and example imagery). Claude Code closes the second half — it reads that direction and writes the actual website. This post walks the whole loop, and if you don't have Claude Code yet, exactly how to get it.
Claude Code is Anthropic's coding agent that runs in your terminal (or as a desktop app). You describe what you want in plain English; it reads and writes files, runs commands, pulls down images, and builds entire projects — iterating with you as you go. It's the thing that takes "build me a site that looks like this" and produces a folder of real HTML, CSS, and JS you can deploy.
Never used it — or never even opened a terminal? Don't worry. It's friendlier than it sounds, and we wrote a beginner's course that walks you through every step, start to finish.
In MoodyBoards, describe your brand in a sentence and generate a moodboard. You get a palette, a type pairing, a mood, and example images — your visual identity, locked in. Generate a few on-brand images too; they become reference material for the site.
Open your project and click Build your website in the sidebar — no need to open any image. MoodyBoards turns the whole project into a clean, structured brief: the exact palette hex values as ready-to-paste CSS custom properties, the font pairing, the mood, a suggested page structure, and the public URLs of your moodboard and every image in the project. Copy it (or download it as a .md file).
Open a terminal in a new, empty folder and start Claude Code:
claudePaste the brief and ask for what you want — for example: "Build a responsive single-page marketing site from this brief. Use the exact palette and fonts, and match the look of the reference images."
Claude Code will scaffold the site, wire up your palette and fonts, and download the reference images so it can actually match their composition and treatment (not just the colors). From there you steer it conversationally: "make the hero taller," "tighten the spacing," "swap section two for a 3-up of features." No template wrestling.
Ask Claude Code to set you up for deploy — it can get the project ready for Netlify, Vercel, GitHub Pages, or wherever you host. A few minutes from moodboard to a live, on-brand site.
A great model with no direction gives you generic output. A coding agent with no direction gives you a generic site. MoodyBoards supplies the direction — a real palette, a type system, a mood, and visual references — so Claude Code is building toward something specific instead of guessing. You never start from a blank canvas, and you never start from a blank page.
Claude Code requires a Claude Pro, Max, Team, or Enterprise plan (or a Console/API account). The free Claude.ai plan doesn't include it. Once you have a plan, install it one of these ways:
curl -fsSL https://claude.ai/install.sh | bashbrew install --cask claude-codeirm https://claude.ai/install.ps1 | iexnpm install -g @anthropic-ai/claude-codeThen open a terminal in your project folder, run claude, and follow the browser prompt to log in. Check it worked with claude --version.
Prefer not to touch a terminal at all? There's a Claude Code desktop app for macOS and Windows, plus extensions for VS Code and JetBrains. Full, current instructions live in the official setup docs.
The short version: MoodyBoards turns a sentence into a visual direction; the "Build your website" brief turns that direction into something an AI can build from; Claude Code turns it into a real website you can ship. If you've been stuck between "I know the vibe" and "I have a site," this is the bridge.
Make your moodboard →