A direct comparison between Anthropic's new Claude Design product (launched April 17) and your existing 27-skill mcp-page-builder-skillset. Built from official docs, TechCrunch, Hacker News, Reddit, and hands-on reviews.
No, you don't need it for landing pages. Claude Design is a visual prototyping canvas for pitch decks and mockups — not a production LP pipeline. It also burns your weekly quota fast: 30 minutes of use can lock a Pro account for 7 days.
Keep it in mind only for non-LP artifacts (client decks, one-pagers). Your existing skillset is more capable and economically superior for Google Ads pages.
Before anything else — let's name the three products so the comparison is clean.
Web app at claude.ai/design. Closed source, runs on Anthropic's servers, counts against your Claude Pro/Max weekly quota. Opus 4.7. Research preview. This is what launched April 17, 2026.
Official productA Claude Code skill published on GitHub by a developer named "jiji262." They claim it's adapted from Anthropic's internal design prompt. Not Anthropic. Not the source of Claude Design. Ignore for this comparison.
Community portYour 27-skill pipeline in Claude Code. Specialized for Google Ads landing pages with conversion copy, accessibility, performance, tracking, and Cloudflare deploy. Single-file HTML output.
Your stackA web canvas where you describe what you want, Opus 4.7 generates an interactive HTML prototype, and you refine it via inline comments, direct edits, or sliders. Optimized for speed of visual iteration, not production delivery.
Point it at a GitHub repo or Figma file and it infers your design system (palette, typography, spacing, components). This is genuinely novel — no other tool extracts design tokens from source code.
This is the single most-cited issue across every review and forum thread.
"It produced great results for me, in 10 mins, and then my usage was blown and now I have to wait a week." — Hacker News, April 2026
"Two to three full prompts can exhaust weekly Pro limits." — r/ClaudeAI thread summary
Compare to your current workflow: your skillset runs in Claude Code on API tokens scoped per skill invocation. One landing page project fits comfortably inside normal usage. There's no weekly quota cliff — you control the spend per call.
For each LP workflow concern, what Claude Design provides and what your skillset already does.
| Workflow concern | Claude Design | Your skillset |
|---|---|---|
| Brand extraction | From GitHub repo or Figma only | site-scraper-brand-extractor from any URL |
| Design system / tokens | Inferred from codebase | design-system-generator — 12 directions, fonts, motion |
| Conversion copywriting | None | conversion-copywriter — 15 sections, 4U, 8 principles |
| Headline A/B variants | Manual re-prompts | headline-variant-builder — index-v2, index-v3 |
| Testimonial / review mining | None | testimonial-miner — 6 platforms |
| Competitor analysis | None | competitor-scanner — differentiation matrix |
| Image sourcing / generation | Limited, often placeholder | image-sourcer + image-generator |
| Accessibility (WCAG 2.1 + 2.2) | Not audited automatically | accessibility-fixer + Round 4 audit |
| Core Web Vitals / perf budgets | None | performance-optimizer — LCP / INP / CLS + budgets |
| JSON-LD schema / SEO | None | FAQPage + LocalBusiness in landing-page-html-builder |
| Mobile preview frame | Device mockups visual only | mobile-preview-builder — iPhone 14 Pro frame |
| Visual QA across viewports | Canvas view only | visual-qa — 375 / 768 / 1280 |
| Expert review / scoring | None | expert-review 4-round + expert-panel 11 experts |
| Form backend | None | form-backend-setup — Google Apps Script |
| GTM / UTM / enhanced conversions | None | tracking-setup |
| Deployment | Hand off to Claude Code | cloudflare-deployer with _headers |
| Rapid visual iteration per element | Sliders panel, fast regeneration | quick-editor — slower per tweak |
| Pitch decks / one-pagers | Yes — this is its sweet spot | Not built for this |
| Scenario | Verdict | Reasoning |
|---|---|---|
| Replace your skillset with Claude Design | Don't | You'd lose conversion copy, accessibility, SEO, perf, form backend, tracking, deploy, A/B, expert panel. Claude Design gives you a pretty mockup — you'd bolt everything else back on. |
| Insert upstream as a mood-board stage | Optional | Gains fast visual exploration but burns weekly quota, and your design-system-generator already produces 12 directions. Mostly duplicative. |
| Use only for non-LP artifacts | Yes | Pitch decks, client proposals, one-pagers — your skillset isn't built for these. Claude Design + Canva export is the right tool for this class of work. |
| Let it replace site-scraper-brand-extractor | Don't | Claude Design needs GitHub or Figma access — most clients don't provide either. URL-based scraping is more reliable. |
| Task | Claude Design (reported) | Your skillset (estimated) |
|---|---|---|
| Brand kit from codebase | 30–40 min (DEV.to hands-on) | 3–10 min from URL via site-scraper-brand-extractor |
| Landing page to production | 2–3 attempts + manual polish, "same night" | 30–90 min for full page-builder pipeline (research → copy → QA → deploy) |
| 3 hero variations | 5–10 min | Built in via headline-variant-builder |
| Per-element tweak | Seconds (sliders panel) | Minutes via quick-editor — but no quota burn |
Claude Design wins per-iteration speed. Your skillset wins end-to-end delivery — the moment you need accessibility, SEO, tracking, or deploy, the Claude Design time advantage evaporates.
"Every generated app looks identical, right down to the serif font, the blinking status dot, colored accent bars… unless you upload reference screenshots or your own design tokens, the output screams 'I just used one Claude prompt.'" — r/ClaudeAI community summary
"Spacing inconsistencies, typography that does not quite sit right, and components needing rebuilding from scratch are issues, with limited precise control compared to Figma." — Multiple first-impression reviews
"This isn't a real tool. This is a plaything, if that's what they're providing as examples." — Hacker News, top-rated skeptical comment
"Accessibility (ARIA, contrast, keyboard navigation, screen readers) isn't audited automatically. No native SEO optimization. Core Web Vitals not optimized. Generated code requires security and scaling audits before production." — Agence Scroll 2026 Guide
For landing pages: your skillset is more capable, better scoped to production concerns (accessibility, SEO, performance, tracking, deploy), and economically superior (per-call API tokens vs. weekly quota cliff).
For pitch decks, one-pagers, client proposals: Claude Design is genuinely good. Use it for this class of work — but budget for Max tier ($100+/mo) if you'll use it more than occasionally.
Do not try to replace site-scraper-brand-extractor with it. Claude Design needs GitHub or Figma access. Your URL-based scraper works on any client site.
| Lost | Conversion copy framework (15 sections, 4U, 8 principles) |
| Lost | WCAG 2.1 + 2.2 accessibility compliance |
| Lost | Performance budgets + Core Web Vitals targets |
| Lost | GTM + UTM tracking + enhanced conversions |
| Lost | Form backend (Google Apps Script) |
| Lost | Cloudflare deploy with security headers |
| Lost | 11-expert panel (95+ score gate) and 4-round expert review |
| Lost | A/B headline variants (index-v2, index-v3) |
| Lost | Predictable per-call token spend |
The analysis above was skewed toward your skillset. Fair critique — here's what I underplayed or got wrong, written to be unflattering where it needs to be.
| Capability | Claude Design | Your skillset (honest) |
|---|---|---|
| Live rendering canvas | Output renders in-canvas as it generates. Claude iterates against the rendered pixels, not just source code. | Generates HTML file, then visual-qa takes screenshots as a separate step. Feedback loop is slower and coarser. |
| Embedded sliders inside the prototype | Claude writes actual <input type="range"> controls into the artifact for theme color, accent, timing, spacing — the user tweaks live without re-prompting. | No equivalent. Tweaks require editing CSS variables via quick-editor and re-running. |
| Voice narration for edits | Talk through the change instead of typing it. Lower friction for iterative design work. | Text prompts only. |
| Draw-on-canvas annotation | Sketch directly on the rendered artifact; queued markup sent as a batch. | No spatial targeting. You describe the element in text. |
| Pin comments to specific rendered elements | Click an element, attach a comment, batch-send multiple comments in one turn. Cheaper than verbose prompts. | Not possible without the element being selectable in a canvas. |
| Design token extraction from source code | Reads theme.ts, tokens.css, _variables.scss in a GitHub repo. Lifts exact hex codes, spacing scales, font stacks. | site-scraper-brand-extractor reads rendered CSS from a URL. Less exact than reading source — inferred vs. declared. |
| Figma file parsing | Accepts Figma as input. | No Figma integration. |
| DOCX / PPTX / XLSX input parsing | Reads Word, PowerPoint, Excel files as design input (briefs, existing decks, data tables). | Your input pipeline is URL + text brief. Parsing Office docs would require additional tooling. |
| PPTX and Canva exports | Real PowerPoint file output. Round-trip to Canva for non-technical stakeholder editing. | HTML only. |
| Animations, 3D, motion design | Generates timeline animations, particle effects, rotating 3D elements, video-style motion in single prompts. | Your design-system-generator has 5 motion presets. Not built for timeline animation, 3D, or video. |
| Proprietary design system prompt | Anthropic's design team wrote and iterates on the system prompt specifically for design quality. Likely state-of-the-art. | Your rules are custom-authored. Solid for LP conversion, but not necessarily optimal for general design aesthetic. |
| Team-wide design system persistence | Once onboarded, a team's design system is applied automatically to every project. No per-project re-upload. | Each run starts fresh with the scraper. |
| Handoff bundle format | Structured package of components + tokens + copy + interaction notes, explicitly optimized for a Claude Code implementation pass. | Direct-to-HTML — you skip the handoff step, but lose the structured intermediate artifact. |
Honest admission: I was dismissive of Claude Design's iteration UX. The canvas + sliders + voice + click-to-comment model is a real productivity advantage for visual work. Your skillset is more powerful end-to-end, but Claude Design is legitimately better at the design iteration loop itself.
Same model weights. Different wrapper. Different feedback loop.
Claude Design runs on claude-opus-4-7 — the same model ID you can call via the API, Claude Code, or Amazon Bedrock. Per Anthropic's docs: "The vision and coding improvements are integrated into the same model across all access points (API, Claude Code, and other platforms)."
So the raw intelligence — including image understanding, HTML/CSS generation, layout reasoning — is identical to what you get running Opus 4.7 in Claude Code.
| Layer | Claude Design | Your skillset (Opus 4.7 in Claude Code) |
|---|---|---|
| Model weights | claude-opus-4-7 | claude-opus-4-7 [1m] (same model, 1M context variant) |
| Vision input | Up to 2,576px long edge, ~3.75 MP | Identical — it's a model-level capability |
| System prompt | Anthropic's proprietary design prompt, tuned by their design team | Your custom skill instructions in SKILL.md files |
| Tools the model can call | Canvas renderer, slider injector, comment capture, export engines, Figma/GitHub readers, Canva connector | Bash, Read, Write, Edit, WebSearch, WebFetch, MCP servers you've installed |
| Rendering surface | Sandboxed HTML iframe inside the web app — model sees its output render in real time | Files on disk — model sees rendered output only when visual-qa explicitly takes a screenshot |
| Input types accepted | Text, images, DOCX, PPTX, XLSX, URLs, GitHub repos, Figma files, PDFs | Text, images (via Read), URLs (via WebFetch / scraper), PDFs (via Read with pages). Office docs need extra tooling. |
| Cost model | Counts against weekly Pro/Max quota (conversational overhead included) | Per-call API tokens, scoped to skill invocation, no weekly quota |
| Where it runs | Anthropic's servers, accessed via browser at claude.ai/design | Your local machine (Claude Code CLI) calling the Anthropic API |
| Persistence | Project-based, design system applied automatically across projects | File-based; state persists per project folder |
Yes — and no.
Yes in the sense that the raw vision model is identical. When Claude Design processes an image you upload, and when your skillset processes an image you Read via Claude Code, the model gets the same pixels, the same resolution handling (up to ~3.75 MP), the same reasoning ability over the image.
No in the sense that Claude Design has a tighter feedback loop over its own rendered output. The model generates HTML, the canvas renders it, the model can look at the rendered result in the same turn and self-correct. Your skillset requires an explicit visual-qa screenshot step before the model can inspect its work — which means self-correction happens across skill invocations, not within one turn.
This isn't a capability gap at the model layer. It's a wiring gap at the product layer. You could theoretically replicate it in Claude Code with a tighter MCP server that renders HTML and pipes screenshots back inline. You haven't, because production LPs don't require that loop the way design iteration does.
You correctly flagged this. A landing page is technically one page, so calling Claude Design good for "one-pagers" was confusing. Here's the real distinction:
So: a landing page you build for a business is a landing page, not a "one-pager" in the Anthropic docs sense — even though it sits on a single URL. The "one-pagers" Claude Design docs and marketing mention are the static summary documents above, which your skillset isn't designed to produce.
If a client asks you for a one-page website with all their content on one scroll (hero + about + services + contact, no separate URLs) — that's a "one-page website" or "single-page site", and your skillset is built for that. Different thing again from "one-pager."
| Term | Medium | Built for | Your skillset? |
|---|---|---|---|
| Landing page | Live URL | Ad-campaign conversion | Yes — primary use case |
| One-page website | Live URL | Small business site, all on one scroll | Yes — your pipeline handles this |
| One-pager | PDF / PPTX / print | Sales, investor, partnership, event summary | No — Claude Design instead |
| Pitch deck | PPTX / Canva / PDF | Investor meetings, proposals | No — Claude Design instead |
You're giving up a genuinely better design iteration loop (live canvas, sliders, voice, click-to-comment) and access to Anthropic's proprietary design system prompt. That's not nothing. It means Claude Design may produce visually stronger first drafts than your design-system-generator does — purely on aesthetic quality.
But "visually stronger first draft" is not the bottleneck in LP production. The bottleneck is the 80% of work after the visual draft: CRO copy, accessibility, perf, tracking, deploy, QA. Your skillset owns that 80%. Claude Design owns none of it.
If you care specifically about visual first-draft quality: consider using Claude Design upstream to generate 1–2 hero section directions, screenshot them, and feed them into your design-system-generator as reference. Costs weekly quota but gives you access to Anthropic's design-tuned prompt without rewiring your pipeline.
For actual one-pagers (static PDFs), pitch decks, or any non-LP visual work: Claude Design is clearly the better tool. Your skillset isn't designed for these outputs.