Build a full animated brand website with Claude Code

What this costs and what it does not

The plugin is free. Claude Code is the part you pay for: it is included with a Pro or Max subscription, or you can run it on pay-as-you-go API credits (claude.com/pricing). Hosting the finished site is free. So the real cost is a Claude plan you may already have.

Step 1: get Claude Code running

1. 💻 Install it. On macOS, Linux or WSL, open Terminal and run curl -fsSL https://claude.ai/install.sh | bash. On Windows PowerShell it is irm https://claude.ai/install.ps1 | iex. If you would rather never touch a terminal, download the Claude desktop app instead, which runs Claude Code with a normal interface. Both routes are on the official setup page.
2. 📁 Make a folder for the project. Create an empty folder somewhere you will find it again, for example ember-and-oak on your desktop. Everything Claude writes lands in here, which keeps the build tidy and makes the site easy to upload later.
3. ▶️ Start a session inside it. In the terminal, move into that folder and type claude. Sign in when it asks. You are now talking to Claude with that folder as its workspace, so "build the site" means "build it here".

Step 2: install the frontend design plugin

This is the difference between a site that looks like every other AI build and one that looks art directed. It is Anthropic's own plugin, verified on the official marketplace, and it has passed a million installs (plugin listing). What it changes: before writing a line of code, Claude picks a real aesthetic direction, chooses unexpected type pairings, and plans motion and depth, instead of defaulting to system fonts and a purple gradient.

1. ➕ Install it. Inside your Claude Code session, type /plugin install frontend-design@claude-plugins-official and press enter. The official Anthropic marketplace is added automatically the first time Claude Code starts, so this usually works first time.
2. 🔁 If it says the marketplace is not found. Run /plugin marketplace add anthropics/claude-plugins-official first, then run the install command again. Both commands are documented on the discover and install plugins page.
3. ✅ Check it took. Type /plugin to open the plugin panel and confirm Frontend Design is listed as installed. You never have to call it by name after this: it activates on its own whenever you ask for an interface.

Step 3: the exact brand brief prompt

This is the one from the reel. Fill the brackets, paste the whole thing into Claude Code, and let it run. The reason it works is that it briefs three separate things: the brand, the structure, and the motion. Most people only give the first one and then wonder why the result feels generic.

You are designing and building a complete one-page marketing website for a small brand, and it needs to look like a real design studio made it, not a template.

Brand: [BRAND NAME], a [WHAT YOU SELL] for [WHO IT IS FOR]. The feeling I want is [THREE ADJECTIVES, e.g. warm, cosy, unhurried]. Palette: [BASE COLOUR] as the ground and [ACCENT COLOUR] for emphasis, nothing else. Type: a characterful serif for headings and a clean sans for body, both loaded from Google Fonts. Before you write any code, tell me the aesthetic direction you have chosen in one sentence so I can redirect you early if it is wrong.

Structure, in this order: a full-height hero with the brand name, one line of positioning and one call to action; a short story section; a products section with [NUMBER] items, each with a name, one line of description and a price; a section showing how it is made or how it works; social proof; and a footer with contact details and opening hours.

Motion matters as much as layout. On load, fade and lift the hero copy in sequence rather than all at once. As I scroll, reveal each section, move background elements at a slower speed than the foreground so there is real depth, and add one small looping ambient animation that suits the brand (for a coffee brand that would be steam drifting off a cup, drawn in CSS or SVG rather than a stock GIF). Keep every transition under 600ms, animate transform and opacity only so it stays smooth on a phone, use IntersectionObserver rather than a scroll listener, and respect prefers-reduced-motion.

Write real copy in the brand's voice, never lorem ipsum. Use plain HTML, CSS and vanilla JavaScript in one folder with no build step, so I can open it locally and host it anywhere. Put every colour and font in CSS variables at the top of the stylesheet so I can restyle in one place. When you are done, start a local preview server, give me the URL, and list the three design decisions you made that I am most likely to want changed.

Step 4: change it by talking

The build is the start, not the finish. These are the three follow-up prompts I use most, in the order I usually need them.

Swap the whole palette without breaking anything:

Change the palette to [NEW DIRECTION, e.g. sage green with a warm cream ground] across the entire site.

Do it by editing the colour variables at the top of the stylesheet rather than touching individual rules, so I can swap it again later in one place. Keep body text passing WCAG AA contrast against whatever it sits on, and check the hover and focus states too, not only the resting colours. Then show me the hero and the products section afterwards and tell me if any image, icon or illustration now clashes with the new palette.

Fix motion that feels flat or stuttery:

The scroll motion feels flat. Rework it so the page reads as one continuous camera move rather than a stack of separate reveals.

Stagger the items inside each section so they arrive one after another instead of all together, give the background layer a slower scroll speed than the text so there is depth, and make anything I hover or click respond within about 150ms so the page feels alive. Animate transform and opacity only, never width, height or top, and keep every transition under 600ms. Then walk me through what you changed and tell me exactly which lines in the CSS I can edit to dial each effect up or down.

Replace the placeholder feel with your real brand:

I want this to stop looking like a demo. Here is my real copy, and I have put my real photos in an images folder inside the project: [PASTE YOUR COPY HERE].

Replace every piece of placeholder text and every stand-in image with this content. Size the photos to what they actually display at, set explicit width and height so nothing jumps while the page loads, compress anything over 300KB, and write descriptive alt text for each one. Also write the page title, the meta description and the social share preview for [BRAND NAME]. When you are finished, read the page back to me and flag anything that still reads like filler or like AI wrote it.

What actually makes it look designed

Step 5: put it on the internet, free

1. 📦 Get the folder ready. Ask Claude: "confirm this folder is ready to host as a static site, and tell me which file is the entry point." It should be index.html sitting at the top of the folder with the CSS, JavaScript and images alongside it.
2. 🚀 Drag it onto Netlify Drop. Open app.netlify.com/drop and drag the whole project folder onto the page. You get a live URL in seconds, on the free tier, with no command line and no Git.
3. 🔗 Point your domain at it. If you own a domain, add it in the Netlify site settings under domain management and follow the DNS instructions it gives you. If you do not own one yet, the free Netlify URL is a completely respectable place to start.
4. 📱 Check it on a phone before you share it. Open the live URL on your actual phone, scroll the whole page, and tap every button. Then take anything broken back to Claude Code with a screenshot and say what is wrong. This one habit catches most of what desktop testing misses.

Every link in one place

Frontend Design plugin, by Anthropic
How to install Claude Code plugins
Claude Code setup and system requirements
Netlify Drop, free drag-and-drop hosting
Google Fonts