I redesigned my website with Claude Design

On April 17, 2026 Anthropic Launched Claude Design. It lives inside https://claude.ai/design look for the palette icon in the left sidebar. It’s powered by Claude Opus 4.7, Anthropic’s strongest vision model, and it’s available in research preview for Pro, Max, Team, and Enterprise subscribers.

I decided to learn more about this new tool by asking it to redesign my website

What started as an experiment will be my upcoming website in less than a month. But before I too deep into my story, let me tell you a little bit about the tool.

First, the Problem Claude Design Is Trying to Solve

If you’ve prototyped as a designer or PM, you know the pain. You sketch something in Figma or Canva. You present it to stakeholders over Zoom. They give you feedback verbally. You scribble notes. You go back and update the design. Then you do another round. Maybe a third.

When the design is finally approved, you sit down and manually write a PRD, translating visual decisions into specifications your developers can act on.

That entire cycle the building, the feedback, the iteration, the handoff typically spans multiple tools and multiple weeks.

Claude Design tries to collapse all of that into one place.

You describe what you want. Claude builds a first version. You iterate through conversation, inline comments, or direct edits. Stakeholders leave comments on the design itself. And when you’re done, you can generate a PRD or hand the whole thing to Claude Code for implementation.

How to Get Started

A Note of caution: Claude Design has its own usage quota. Your design prompts don’t count against your regular Claude chat or Claude Code limits. They’re tracked separately.

The Onboarding Wizard

When you create a new project, Claude Design walks you through a short set of questions before it generates anything.

It asks about visual style: modern, traditional, editorial, even “gaming” how many screens I wanted, and a few other things.

I found this valuable because it forced me to make decisions I usually defer. What kind of typography do I want? How information-dense should the layout be? By the time Claude generated the first version, it was already closer to what I had in mind than any cold-start tool I’ve used. The wizard helps you clarify your thoughts.

For my website we had several conversations especially about my intent with the website, but it first started with creating four wireframes based on my prompt.

My Prompt: Review https://www.conceptsandbeyond.com and all sub pages We do three things 1. Training, 2. Product Management Consulting and 3. Jira Plugin product How do we improve the design of our website The first focus is improving enrollments to our training, second consulting and third the product

Claude

Got it. Priority is clear now:

1. Training enrollments (primary)
2. Consulting (secondary)
3. AtaGlance Jira plugin (tertiary)

I'll jump into wireframing. Based on my review of the current site, here's what I'm noticing and will address:

Current issues:

• Homepage treats all 3 businesses as equals — dilutes the training focus
• Training catalog is overwhelming (Live Courses menu has ~12+ items across 2 levels)
• No clear upcoming-cohort urgency on homepage
• Weak social proof (anonymous CEOs, no trainer credentials visible)
• No pricing anywhere
• Generic “growth” hero copy; doesn’t differentiate

Plan: 3–4 wireframe variations each for Homepage, Training Hub, and Course Detail. Lighter treatment for Consulting and AtaGlance pages. Low-fi, sketchy, black & white with a single accent.

Let me build this.

Wireframes vs. Visual UI Designs

Claude Design gives you two paths.

Wireframes are low-fidelity and fast. Think structural sketches. Claude generated four wireframes so we can nail down information architecture and intent. They generated in seconds

Option A: Booking a single seat in Training

Option B: Booking a learning journey

Option C: Focusing on the Trainers

Option D: Focusing on the Thought Leadership

My conversation with Claude Design

You I like both A and B. Help me decide

Claude

Good question. Here's how I'd think about it — they're not just visual variants, they're different bets on who your buyer is.

The core tradeoff

A (Cohort-first) optimizes for the visitor who already knows they want a cert.B (Learning Journeys) optimizes for the visitor who doesn't know what they need yet.

Choose A if…

• Most of your traffic is search-driven (“CSM certification”, “CSPO training”)
• Visitors arrive with high intent and just need dates + price
• Your strongest competitor is the cheaper certifier and you’re fighting on convenience
• You want results in weeks, not quarters — A is proven SaaS playbook, low risk
• Average deal size = 1 seat ($1,295-ish)

A is the safer bet. It fixes the biggest current problem (no seats/prices visible, no urgency) with a well-worn pattern. Expected lift: 20–40% on seat conversion.

Choose B if…

• You want to move upmarket — selling journeys to L&D buyers, not seats to individuals
• You believe the real problem isn’t price, it’s buyers not knowing which cert they need
• You can support a bundle SKU (journey = 3 courses + coaching at a premium)
• You’re willing to invest 3–6 months to reshape how people buy from you
• Average deal size = journey or team ($5k–$25k)

B is the bigger bet. Harder to pull off — you need real journey pricing, sequencing logic, and enough sales muscle to close larger deals. Expected lift: smaller on unit volume, much bigger on ARPU.

My recommendation: A now, B next

Ship A as v1 because:

1. It solves the urgent problem (enrollments) with the lowest execution risk
2. It gives you real conversion data before you bet on a new pricing model
3. You can borrow one element from B — add a “Not sure where to start? → 3 learning paths” strip below the cohort list. That tests journey appetite without committing.

Then, if the journeys strip gets clicks + the coaching add-on from Course Detail C sells, graduate to B in 6 months with confidence.

One tiebreaker question

Do you currently sell anything above $2k? (Private team cohorts, coaching packages, multi-course bundles.)

• Yes, regularly → lean B. Your business is already journey-shaped; the site should reflect it.
• No, mostly single seats → lean A. Don’t redesign the site around revenue that doesn’t exist yet.

Want me to mock up the hybrid (A + journey strip) as a mid-fi next, or go straight to pure A?

You Redesign For B

Visual UI Designs are fully interactive HTML prototypes. Buttons work. Hover states respond. Toggles toggle. You can also start from uploaded documents (DOCX, PPTX, XLSX), images, or even your codebase. There’s a web capture tool that grabs elements from your live site, so prototypes look like the real product from day one.

The html version of Option B design generated by Claude Design

Mid-fi Homepage B — Learning Journeys is live.

What's on the page

• Nav + announcement bar, hero pitching “don’t buy a course, buy an outcome”
• 3 featured journeys (New Scrum Master · Product Leader · Agile Coach) with steps, price, next start
• Journey detail strip showing the 4-step path for “New Scrum Master”
• Course catalog preview (6 cards) for visitors who already know what they want
• Proof row (logos + 2 named testimonials), consulting + AtaGlance teasers, footer
• Tweaks panel (toolbar toggle): accent color, density, hero variant, show/hide journey detail

Known tradeoffs to flag

• Copy is first-pass — “6,000+ learners” etc. are placeholders, replace with real numbers
• Journey prices ($3,495 / $4,995 / $7,995) are illustrative — these determine whether B’s upmarket thesis pencils out
• Hero photo is a placeholder; journey artwork is geometric. Real instructor/classroom photography will lift this a lot

Next moves, pick one

1. Iterate this page (tighter hero, different journey layout, pricing tiers)
2. Mid-fi the Journey detail page (what happens when someone clicks “See the journey”)
3. Mid-fi Course Detail C (three-tier pricing) to pressure-test the bundle-up motion

Design System Awareness:

If you give it access to your codebase or design files, it reads your brand colors, typography, spacing rules, and component patterns. From that point forward, every prototype it generates uses your actual spec. Not generic SaaS blue. Your blue.

For my website, this saved me from the usual cycle of “make this darker, no not that dark, match the hex code from our header.” Claude already knew.

You can refine the design system over time, and teams can maintain more than one. Aakash Gupta’s guide highlights that the system generates a SKILL.md file a config Claude reads at the start of every project. He calls it the most important artifact in the entire setup because its quality compounds. Every future project benefits from the time you invest in getting it right.

The caveat, confirmed by Anthropic: the import works best with a clean codebase. If your source code is messy, expect messy output.

The Tweaks Panel

When you run the onboarding wizard, Claude Design generates multiple design variations automatically based on the options you selected. The Tweaks panel sits in the toolbar and lets you switch between these variants in real time.

I set up three homepage layouts during my redesign. You can tweak things like timer visualizations (ice cube, ring, bar), response UX patterns (inline, modal, focus), accent colors, density, and font feel. All from a sidebar panel.

Inline Comments and the Draw Tool

Click any element in your design — a button, a heading, a data table and leave a comment. Claude reads the comment and makes changes.

You can also draw directly on the canvas. I circled a metric that looked off, wrote “I’m not sure what this means,” and Claude revised the calculation and the UI together.

More importantly, you can share your design with stakeholders and they can leave their own comments. Everything appears in the Comments tab. Claude acts on them directly.

Think about what this means for a stakeholder review meeting. Instead of “I’ll note that and get back to you,” you say “let me update it right now.” And Claude does. Live.

Conversational Editing and Custom Sliders

Beyond comments, there’s a chat sidebar where you can describe changes in plain language and watch Claude apply them.

Claude generates adjustment controls on the fly for spacing, color intensity, layout weight so you can fine-tune visually instead of typing “make the padding 8px smaller.” You just drag.

This seems minor until you’re in a review session and need to adjust something quickly. Then it matters a lot.

Export Options: Where Things Get Real

Claude Design has six export paths. They range from polished to clearly unfinished.

HTML export saves each page as a standalone HTML file. Clean, hostable, ready to share or hand to developers as a front-end starting point. This is what I share with Claude Code to create a wordpress theme.

ZIP export bundles the full web files — HTML, CSS, JavaScript not just the static markup. Hand this to a developer or load it on a web server.

Direct to Claude Code is the most ambitious option. Claude packages the design into a handoff bundle that Claude Code picks up with a single command. It reads the design system, the component structure, and builds around it. I used the HTML export path into Claude Code and had back-end scaffolding generated in one session.

If you’re a PM who doesn’t work in a command line, this step will stop you. Tools like Lovable and Replit handle this with one-click publishing. Anthropic hasn’t bridged that gap yet.

Canva export is a launch-day integration. Your design goes directly into Canva, fully editable and collaborative.

PDF export is functional but limited. It renders everything as images, including text. You can’t copy or extract text from the PDF cleanly. My multi-screen layout split awkwardly between pages with no formatting controls.

PPTX export converts elements to editable PowerPoint objects rather than screenshots, which is the right idea. But the output was messy in both font modes I tried.

Both the PDF and PPTX exporters need work. Given how recently the tool launched, I expect Anthropic will improve these soon.

PRD Generation

Once you finalize a prototype, you can ask Claude Design to generate a Product Requirements Document from it.

I tested this on my website redesign. Claude produced a detailed, structured PRD in a few minutes. The content was solid enough to hand to a developer with light editing.

Two limitations worth knowing. First, the output is HTML. Not a Google Doc, not a Word file. HTML. So sharing it with your team requires an extra step.

Second, Claude Design doesn’t support custom Skills yet. I have a well-defined PRD Skill that I use in Claude.ai, but I couldn’t trigger it from within Claude Design. The PRD came out in Claude’s default format, not mine.

My workaround was to export the design as an HTML file, upload it to Claude.ai, and trigger my own /create-a-prd Skill from there. That gave me the PRD in the exact format I wanted.

What Claude Design Is Not (Yet)

The hype has been intense. Figma’s stock dropped 7% on launch day. But the product’s current reality doesn’t match that market reaction.

It’s not a Figma replacement for professional designers. If your team runs design reviews at scale and manages design tokens across products, Figma is still your source of truth. Claude Design’s collaboration features are real but basic — not Google Docs-level multiplayer.

The Claude Code handoff assumes you can work in a terminal. That excludes a lot of the PM and founder audience Anthropic is targeting.

And it’s a research preview. Anthropic has intentionally not committed to a general availability date. They’ve said user feedback will determine when it’s ready.

My Take: Who Should Use This Now

Claude Design targets the much larger group of people who were never going to learn Figma. Founders who need to pitch an idea visually. PMs who need stakeholder buy-in on a feature direction. Marketers who need a landing page concept fast.

For that audience, this is already the best tool available. Prototype, collect feedback, iterate, generate handoff docs, export to code all without leaving one environment.

Start with something real. A page on your website. A feature you’ve been meaning to mockup. That’s how you’ll learn what this tool actually does for your work.

What’s your experience been? Drop a comment or send me a message. I’m collecting case studies from PMs using these tools and I’d like to hear yours.