You vibe-coded the feature, but the screen looks flat and "AI-generated." Claude Design (beta) is Anthropic's design tool that handles the *make-it-pretty* part: describe what you want, Claude builds a draft, you refine it with clicks and sliders, then export to HTML or hand it to Vercel / Claude Code to ship a real site.
What you need
- A Claude Pro / Max / Team plan (Enterprise is off by default — an admin must enable it in Organization settings)
- A browser
Step 1 — Open Claude Design
- Go to
claude.ai/design(or click Start designing on the product page) - Log in and you land in the design canvas.
Step 2 — Describe it, get a draft
Be specific. Copy-paste and edit this:
> Build a landing page for a fintech startup. Sections: hero, three key features, testimonials, pricing, bottom CTA. Tone: trustworthy and minimal. Primary color: deep blue (#1E3A8A).
Claude builds a first version; you react to it and iterate from there.
Step 3 — Bring your brand (optional)
Got a company design system? Import it from a GitHub repo, design files, or a local codebase. Claude then builds with your actual components and checks its output against your design system, fixing mismatches before you even see them.
Step 4 — Refine (the important part)
Adjust right on the draft:
- Click an element and leave a comment ("make this button bigger")
- Double-click text to edit it inline
- Use the sliders Claude generates to fine-tune spacing and color
- Drag elements to move, resize, and align them
Pro tip: ask for "three directions to compare" up front, and lock your brand colors/fonts early — the result comes out far more consistent.
Step 5 — Export / ship it
- Export to HTML / PDF / PPTX
- Push to connected tools: Vercel, Wix, Canva, and more
- To keep building in code, hand off to Claude Code with
/design-syncor/design
Good to know
- Claude Design is beta and isn't a hosting service itself — publish by exporting HTML or through the Vercel/Wix integrations.
- On Enterprise it stays hidden until an admin enables it in Organization settings.