Vibe-coding gets the app working, but the screen you open often looks flat or has that unmistakable "AI made this in a hurry" look. This guide is for people who know nothing about UI design — the work of choosing a screen's colors, fonts, and layout — but still want a decent-looking result using only Claude Code (Anthropic's coding tool that turns natural-language instructions in a terminal into real code). It covers installing Claude Code's official Frontend Design plugin and refining the result with screenshots. Budget about 10 minutes to check prerequisites and 20-30 minutes to build and polish your first screen.
🟢 Model references match the current lineup · model notice · Fable subscription
Fable 5 and 5.1 subscription (updated September 7, 2026): Claude Fable 5.1, released September 1, 2026, is the current Fable model and Fable 5 is now legacy. Plan terms are the same for both — Max and Team Premium plans include Fable at up to 50% of the weekly usage limit; Pro and Team Standard use usage credits (
What you'll be able to do after this
You'll install Claude Code's official Frontend Design plugin and use a screenshot feedback loop to polish the result, so your UI looks less like a generic AI default. Plan for about 10 minutes to check prerequisites, 5 minutes to install the plugin, and 20-30 minutes to build and refine your first screen.
Before you start
- Claude Code must already be installed and running in your terminal. (If this is your first time, install it following the official setup guide before continuing.)
- Using Claude Code requires a paid plan or API usage. Check the official pricing page for exact requirements.
- Basic comfort opening a terminal and typing commands.
- (Optional) A browser to preview the generated screen.
Quick terms
- Vibe coding — building software by describing what you want to an AI in natural language and reviewing/adjusting the code it produces, rather than writing every line yourself.
- Claude Code — Anthropic's AI coding tool that creates and edits real files when you give it instructions in a terminal, as if you were talking to it.
- Plugin / Skill — an add-on that extends what Claude Code can do. A skill is essentially a set of instructions Claude follows for a specific kind of task — in this case, screen design.
- Marketplace — a catalog of plugins. You register a catalog with Claude Code before you can install plugins from it.
- MCP (Model Context Protocol) — a standard that lets Claude exchange data directly with outside services such as Figma.
- Design tokens — named values that capture design decisions, like "background color is this hex value" or "body text uses this typeface." Not to be confused with the "tokens" an AI model uses to process text — this is a separate, design-specific term.
Three ways to give Claude Code a sense of design
Which approach fits depends on your starting point. Starting from a blank slate calls for the official plugin; wanting to skip redesigning basic parts like buttons calls for an open-source component library; already having a Figma file calls for the official Figma integration.
| Approach | When it fits | Prior knowledge needed | What you get |
|---|---|---|---|
| Official Frontend Design plugin | Starting from scratch with no design reference | None — just describe it in natural language | Screen code where Claude planned color, type, and layout first |
| Open-source component library (e.g. shadcn/ui) | Don't want to redesign buttons, forms, dialogs every time | Basic steps for adding components to your project | Finished, accessibility-considered parts; Claude only handles placement and copy |
| Official Figma integration plugin | You already have a Figma file or a designer's output | Access to the Figma file | Turn the file into code, or send Claude's screens to Figma as editable layers |
Step by step: from installing the official Frontend Design plugin to your first screen
-
Step 1 — Add the demo marketplace. The Frontend Design plugin lives in the example marketplace Anthropic publishes in its own GitHub repository (anthropics/claude-code), so you need to register that repository as a marketplace first. In your Claude Code terminal, run:
/plugin marketplace add anthropics/claude-codeSuccess looks like: a confirmation message that the marketplace was added, and the new plugins appear when you run
/pluginand open the Discover tab. -
Step 2 — Install the frontend-design plugin.
/plugin install frontend-design@claude-code-pluginsSuccess looks like: the install summary shows "Plugin is now active." and you're ready to go. If it instead shows "Run /reload-plugins to activate.", run:
/reload-pluginsCaution: if this is skipped with a warning that it would invalidate the prompt cache, rerun it as
/reload-plugins --forceto actually apply it. -
Step 3 — Describe your first screen with a specific purpose, audience, and tone. For example: "Build a dashboard for a music streaming app. The users are listeners in their twenties who discover indie music, and I want it to feel calm and analog."
Success looks like: before writing code, Claude describes a color palette (4-6 named hex values), a font pairing, and a layout idea, then generates the screen. If the result isn't the usual purple-gradient-with-three-rounded-cards default, it's working.
-
Step 4 — Refine with screenshots. Capture the generated screen in your browser, attach it as an image in the Claude Code conversation, and point at specific parts you want changed. The official skill documentation describes this process as a picture being worth far more than a written description.
Success looks like: only the part you pointed at changes, and the rest of the layout stays intact.
Common sticking points and fixes
- "I don't see the /plugin command" — your Claude Code version may be outdated. Run
claude --versionto check, then update using whichever method you installed with (for an npm install,npm install -g @anthropic-ai/claude-code@latest). If it's still missing, you may be in an environment such as a cloud session where/pluginisn't supported — use the plugin browser in the Claude desktop app instead. - "Marketplace not found" error — this happens if you try to install before adding the marketplace. Run
/plugin marketplace add anthropics/claude-codefrom Step 1 first. - Nothing changed after installing — check the install summary again to see whether it's waiting on
/reload-plugins. - Results keep looking similar (purple gradient, rounded cards) — describe the purpose, audience, and tone more specifically, or show a screenshot of a site you like and ask Claude to use that style as a reference.
- Caution — plugins and marketplaces can run code on your machine with your permissions. Only install from sources you trust, such as Anthropic's official repository covered in this guide.
If you already have reference material
If you already have a Figma file, the official Figma integration plugin — included in the official marketplace (claude-plugins-official) that Claude Code registers automatically — is a better fit than starting from scratch. Install it with /plugin install figma@claude-plugins-official; it can read a Figma file's components and layout and turn them into code, or send Claude's screens to Figma as editable layers.
For basic parts you don't want to redesign every time — buttons, inputs, dialogs — an open-source component collection like shadcn/ui is another option. Rather than installing as a traditional package, it uses a CLI (command-line tool) to copy the actual component code directly into your project, so you're free to modify it afterward. You can let a library like this handle the basic parts while Claude focuses on layout and copy.
Frequently asked questions
Q. Can I really get a usable-looking screen with zero design knowledge?
Don't expect professional-designer quality right away, but the official Frontend Design plugin at least avoids the obvious "AI made this fast" look, since Claude plans color, type, and layout before writing code. Fill in the details with the screenshot feedback loop.
Q. Does installing the plugin cost anything extra?
Installing it doesn't cost anything on its own, and the conversations that follow are covered by your normal Claude Code usage. That said, having many plugins installed adds more context to every turn, so it's worth disabling ones you're not using.
Q. If I already have a Figma file, do I still need this?
In that case, the official Figma integration plugin is the better fit. It's part of the official marketplace that's registered automatically, so you can install it directly with /plugin install figma@claude-plugins-official.
Q. Can I use this with zero coding knowledge at all?
Claude Code runs on natural-language instructions, so you can get started without writing code yourself, but you do need to know how to open a terminal and type commands. If you're completely new, start by learning how to install and use Claude Code itself.
Related articles
- Setting Up Claude Code for Side-Project Coding: Install, Plans, and Cost Control
- Claude Code for Beginner Developers: From Install to Your First Commit
- Why Claude Code Token Usage Suddenly Spikes, and 8 Ways to Cut It
- Getting Started with Claude: From Sign-Up to Your First Chat (Beginner's Guide)
- How to Use Claude: A Step-by-Step Guide for Beginners