記事一覧へ
Anthropic Labsによる「Claude Design」のご紹介: Claudeと話しながらプロトタイプ、スライド、1ページ資料を作れる。
Claude Opus 4.7搭載。当社の最も高性能なビジョンモデル。Pro、Max、Team、Enterpriseプランのリサーチプレビューとして利用可能。本日一日かけてロールアウト。
市場はそれを好意的に受け取らなかった。Figmaの株は同じ日に10%下落した。Canvaのお堀は一夜にして薄くなった。「ピッチデッキを2000ドルでデザインします」というフリーランス市場は終わった。Anthropicは言わなかったが、DatadogのチームはClaudeとの1回の会話で1週間のデザインサイクルを圧縮した。デザインはもはやボトルネックではない。アラインメントがそれになった。
1日費やして掘り下げて使い込んだ。以下に30のことを書く。何をするか、何でつまずくか、誰も警告しないこと、そしてどうやって本当の仕事をこなすか。
1. トークン消費
Proユーザーは30分の使用後にロックアウトされている。2セッションで週間クォータの60%が消えた。
週に2回以上Claude Designを使う予定なら（そうなるはずだ）、Maxティアが最低限必要だ。「Proに無料で付いてくる」に興奮する前に予算を確認しよう。
2. オンボーディングクイズ
下書きを始める前に、Claude Designは短いクイズを実施する。意図、ターゲット、スタイルについての明確化の質問。ほとんどの人が1語で答え、なぜアウトプットが一般的なのかと不思議に思う。
クイズの答えの品質がアウトプットの品質の最低ラインだ。デザインブリーフのように扱おう。
3. プロンプト対結果比: 2 vs 20
競合ツールで複雑なマーケティングページを再現するには20以上のプロンプトが必要だ。Claude Designは平均2回で済む。その理由はOpus 4.7が文字通りの言葉よりも意図を読むよう訓練されているからだ。過度に指定するのをやめろ。言いたいことを言い、Claudeに質問させろ。
4. カスタムスライダーがキラー機能
皆はプロンプトについて話している。スライダーについては誰も話さない。スライダーはデザインごとに生成される（汎用テンプレートではない）。
間隔、密度、色の温かさ、レイアウトのタイトさ。各スライダーはあなたの特定のアーティファクトのために作られている。
これがClaude Designをプレビューペイン付きのプロンプトボックスではなくデザインツールのように感じさせるものだ。プロンプトを学ぶ前にスライダーを学ぼう。
チャットでスライダーを追加するよう頼むとデザインページに表示される。
5. インラインコメント
ほとんどのAIデザインツールは1つの変更を頼むとページ全体を再生成する。良い部分も失う。
Claude Designでは特定の要素にコメントをドロップして、その要素だけを反復できる。
これだけでも、MidjourneyやV0から乗り換える価値がある。
6. デザインシステムを公開する
Claude Designでデザインシステムを公開すると、組織全体のドロップダウンオプションになる。すべての新しいプロジェクトは自動的にあなたのトークンから始まる。
これをスキップすると、チームの全員が毎プロジェクトで色とタイポグラフィを再発明することになる。初日にセットアップしよう。さもなければ永遠にしない。
7. コードベースを読む
Claude Designはリポジトリから直接デザイントークンを取得する。CSSの変数が --color-blue-2、--blueish、--primary-old と名付けられていたら、そのカオスがアウトプットに反映される。デザインアウトプットの品質はリポジトリがどれだけクリーンかの関数になった。
これがAnthropicの本当のお堀だ。コードを真実の情報源にした。
8. デフォルトの美学はGeneric SaaSなので明示的に禁止する
制約なしでは、Claude DesignはInter、Roboto、Arial、そして予測可能なグラデーションにデフォルトする。
YCバッチ美学だ。
特徴的なものを得るには、プロンプトで禁止しなければならない: 「no inter, no generic gradients, no stock blue-to-purple.」これはドキュメントにはない。すべての真剣なユーザーが発見する最初のヒントだ。
9. 各デザイン次元を別々にプロンプトする
タイポグラフィ、色、モーション、背景。1つの段落にまとめず、1つずつプロンプトする。
クックブックが確認している: 次元を個別にガイドすることで1つのメガプロンプトよりも一貫して良いアウトプットが生まれる。組み合わせると混乱する。
10. 1つのプロンプトでbuild + critique + learnを混ぜない
Claude 4.x時代のルールがここでも完全に当てはまる: 何かを作り、批評し、コンセプトを説明するよう同じターンで頼むと、3つすべてが劣化する。より小さく、より集中したターンがより強いアウトプットを生む。動詞を分けろ。
11. 「クリーンにして」は無意味。本物のプロダクトを参照する
一般的な形容詞は無意味だ。「2023年頃のXXXXアプリのような感じだがより密度高く」は機能する。「クリーンにして」は機能しない。Claude Designはインターネットを見てきた。それを使え。プロダクト、時代、美的運動を参照する。「professional」や「modern」ではなく。
12. プロンプトのXMLタグで無料の構造が得られる
`<constraints>`、`<brand>`、`<output>`、`<examples>` のようなタグでプロンプトセクションをラップする。Claudeモデルはこのフォーマットで大量に訓練されている。これは利用可能な最も安い品質向上で、ほとんどのユーザーはまだ自由形式の散文で入力している。
例:
```xml
<task>プロダクトローンチのランディングページのヒーローセクションをデザインする。</task>
<context>
プロダクト: AIエージェントの意思決定ツリーをリアルタイムで記録するデバッガー。
ターゲット: シニアエンジニアとAI研究者。
ステージ: Product HuntとHacker Newsのローンチウィーク。
</context>
<brand>
ボイス: 直接的、技術的、マーケティング的修辞ゼロ。
トーン参照: Supabaseローンチポスト、Linearのchangelog、Vercelホームページ。
パレット: #0a0a0aバックグラウンド、#00ff88アクセント、オフホワイトテキスト(#f5f5f5)。
タイポグラフィ: コードにJetBrains Mono、見出しにSatoshi。InterとRobotoは禁止。
</brand>
<constraints>
- generic SaaSグラデーション禁止
- 3Dストックイラスト禁止、絵文字多用の機能カード禁止
- 「transform your workflow」や「supercharge」コピー禁止
- フォールドの上に最大3要素
- ヒーローはスタティックに感じるべき — 重いアニメーション禁止、パララックス禁止
</constraints>
<copy_samples>
ドキュメントで実際に書く方法。このケイデンスに合わせる:
"the debugger doesn't infer. it records. every branch, every tool call,
every hallucinated output — preserved exactly as it happened."
"if it's slow, your agent is slow. we don't add overhead."
</copy_samples>
<structure>
ヒーローのみ。この生成ではフォールド以下は不要。
- ヘッドライン: 最大8語
- サブヘッド: 1文、最大20語
- プライマリCTA + セカンダリリンク（「read the docs」）
- ビジュアル要素1つ: ターミナルスタイルのトレース記録、スタティック
</structure>
<references>
インスピレーション: linear.app ヒーロー（2023年代）、railway.app、turbo.build。
避ける: Framerテンプレートのように見えるもの。
</references>
<success_criteria>
Hacker Newsをスクロールするシニアエンジニアが
「これはピッチではなく本物のツールのように見える」と思う。
</success_criteria>
```
13. DatadogはブリーフからモックスレビューまでをClaude Designとの1つの会話に圧縮した
Datadogのプロダクトチームは、フルブリーフ → モックス → レビューのサイクルを1週間から1回の会話に圧縮したと伝えられる。
「より速いデザイン」が教訓ではない。アラインメントがプロダクト作業の本当のボトルネックになったということだ。もし組織の意思決定が遅いなら、Claude Designは速く出荷するのに役立たない。
14. Canvaへのエクスポート
Claude Designにはリアルタイムのマルチプレイヤー編集はまだない。チームが実際に作業している方法: Claude Designでドラフト → Canvaにエクスポート → そこで共同作業して仕上げる。CanvaはホームでClaude Designは出発点だ。
15. HTMLエクスポートは過小評価されている
誰もがPDFとPPTXエクスポートを使っている。隠れた技はHTMLエクスポートだ。スタンドアロンのHTMLファイルを取得し、リポジトリにドロップすれば、10分以内にランディングページを出荷できた。
Figmaからコードへの変換もFramerも不要。このワークフローが「パンフレットサイト」の開発契約を殺すことになる。
16. Claude Codeへのエクスポート
フルループ: Claude Design → Claude Code → 出荷されたアプリケーション。デザイナーがハンドオフノードになる。ボトルネックではなく。
従来の「デザインから開発への翻訳」ステップを完全に取り除くので重要だ。Claude Codeをまだ使っていないデザイナーは、もうすぐ遅れを取ることになる。
17. ハンドオフパッケージは機械可読
デザインをClaude Codeに送ると、構造化パッケージになる: レイアウト、画像、開発メモ、コンポーネントアノテーション。コーディングエージェントが直接処理できる。仕様はもはや開発者が解釈するFigmaファイルではない。機械可読のコントラクトだ。
18. 「フロンティアデザイン」が存在し、99%のユーザーは使っていない
Claude Designは音声、動画、3D、インタラクティブエフェクトをサポートしている。AnthropicはこれをFrontier Designと呼ぶ。
99%のユーザーはまだスライドデッキを作っている。
インタラクティブなマーケティングサイト、プロダクトデモ、ポートフォリオを作る人にとっての優位性は大きく、混雑していない。目立ちたければここへ行こう。
19. 厳密な状態ロジックを持つマルチページフローは苦手
単一スクリーンではClaude Designは良い。状態、分岐ロジック、ページ間の一貫性を持つ本物のユーザーフローでは、つまずく。
プロダクション用のユーザーフローには今もFigma + Framerが必要だ。限界を理解してトークンを無駄遣いするな。
20. ジュニアはシニアに見える。シニアは遅く見える。
実行速度が格段に良くなった。Claude Designを使うジュニアデザイナーはシニアが3日かけてやったことを1時間でできる。
シニアにとっての守れる価値は今やセンス、システム思考、制約設定だ。ピクセル実行ではない。もしあなたの価値が実行速度なら、今すぐスキルを再習得しろ。
21. 2000ドルのフリーランスピッチデッキは終わった
これが死につつある市場セグメントだ。どんな創業者も今や、2ヶ月前にフリーランサーから2000ドルかかっていたものを30分でピッチデッキを生成できる。
フリーランスの「デッキをデザインします」ニッチには多分6ヶ月ある。それがあなたのビジネスなら、ブランド戦略、システム、モーションに軸足を移せ。Claude Designがまだ商品化できないもの。
22. 思考ツールとして使う
最も語られない使い方: Claude Designで10分プロンプトすると、2時間Figmaで過ごすよりプロダクトのアイデアが明確になる。
デザインを説明する行為が具体性を強制する。創業者: 出荷するために使う前に考えるために使え。出てくるスライドデッキはほぼボーナスだ。
23. Opus 4.7は高解像度で画像を見る
スクリーンショットを直接貼り付けられることを意味する。
Opus 4.7はAnthropicの最強ビジョンモデルで、より高解像度の画像理解を持つ。好きなデザインのスクリーンショットをインライン参照として貼り付けろ。特定の要素、タイポグラフィの選択、間隔、カラーシステムを前の世代では到底届かなかった精度で抽出する。説明するのをやめて、貼り付け始めろ。
24. 計画してからプロンプトする
30分の計画で何時間もの反復が省ける。Claude Designを開く前にターゲット、制約、成功基準、参照を書き出す。
2セッションで週間トークンを使い切るユーザーはこのステップをスキップしている人たちだ。
25. プロジェクト間でセッションをクリアする
セッションはコンテキストを引き継ぐ。「corporate SaaS」モードで始めて「edgy consumer app」に切り替えると、最初のセッションの前提が2番目に染み込む。プロジェクトごとに新しいセッションを始めろ。品質の問題と同様にトークン経済の問題でもある。
26. MCP接続
Claude Designは孤立していない。MCPを通じてNotion、Figma、データベース、Issue trackerに接続できる。本物のプロダクトデータをプロトタイプに引き込む。Figmaから実際のデザイントークンを参照する。これがパワーユーザーとプロンプトユーザーを分ける機能だ。
27. ブランドボイスには実際のコピーサンプルが必要
「コピーをパンチの効いたものにして」= 無意味。ブランドボイスの実際の3〜4文をプロンプトに含めると、ケイデンスに合わせてくれる。これはマーケティング成果物で最大のアンロックだ。コピーはプロンプトで最も難しい部分で、例ドリブンプロンプトが即座に修正する。
28. few-shotの例は正確に一致する必要がある
Claude 4.xモデルは例に執拗に注意を払う。グリッドレイアウトのスクリーンショットを含めて、1枚のカードに微妙な影があると、モデルはその影をあらゆる場所に複製する。例を徹底的にキュレートしろ。1つの悪い例がアウトプットを汚染する。
29. デフォルトの美学は「プロフェッショナル」に偏る
Opus 4.7の安全性と美的訓練は、クリーンで読みやすくプロフェッショナルなアウトプットに向かって引っ張る。エンタープライズには良い。コンシューマーブランドには死だ。
ブルータリスト、Y2K、エディトリアル、アンチデザインが欲しければ、強く何度も押し続けなければならない。モデルの本能に従うのではなく、上書きすることを期待しろ。
30. このプロダクトは商品化まで6ヶ月ある
今日リサーチプレビュー。競合はすぐに追いつく。V0、Lovable、Framerはすべてここに向かうロードマップを持っている。Anthropicのエッジはコードベース読み取り + デザインシステム統合だ。最大6〜12ヶ月のお堀だ。「Claude Designをマスターした人」としての評判を築く窓は今であって、Q4ではない。これを読んでいるなら早い。そのように行動せよ。
ai-designclaude-setupclaude-workflow
Claude Design完全攻略ガイド30選
♥ 60↻ 5
原文を表示 / Show original
·
Apr 18
Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude.
Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.
0:00 / 1:22
3.8K
23K
141K
52M
the market didn't take it well. figma's stock dropped 10% the same day. canva's moat got thinner overnight. the freelance "i'll design your pitch deck for $2k" market is cooked, anthropic didn't say it, but datadog's team compressed a week-long design cycle into a single conversation. design isn't the bottleneck anymore. alignment is.
spent the day digging and using it. 30 things below, what it does, what it fumbles, what nobody warns you about, and how to get real work out of it.
1. token burn
pro users are getting locked out after 30 minutes of use. got 60% of my weekly quota gone in two sessions.
if you plan to use claude design more than twice a week, which you will, max tier the minimum to have. budget accordingly before you get excited about the "free with pro".
2. the onboarding quiz
before it drafts anything, claude design runs a short quiz. clarifying questions about your intent, audience, style. most people answer in one word and wonder why the output is generic.
the quality of the quiz answers is the quality floor of the output. treat it like a design brief.
3. prompt-to-result ratio: 2 vs 20
recreating a complex marketing page takes 20+ prompts in competing tools. claude design averages 2. the reason is that opus 4.7 is trained to read intent over literal words. stop over-specifying. say what you mean, let it ask.
4. custom sliders are the killer feature
everyone is talking about prompting. nobody talks about the sliders, which are generated per design (not generic templates).
spacing, density, color warmth, layout tightness, each one is built for your specific artifact.
it's what makes this feel like a design tool and not a prompt box with a preview pane. learn the sliders before you learn the prompts.
ask in the chat to add sliders and they'll appear in the design page.
5. inline comments
most ai design tools regenerate the whole page when you ask for one change. you lose the good parts.
claude design lets you drop a comment on a specific element, and it iterates just that element.
this alone is worth the subscription switch for anyone coming from midjourney or v0.
6. publish design system
once you publish a design system in claude design, it becomes a dropdown option for your entire org. every new project starts from your tokens automatically.
if you skip this, everyone on your team will reinvent colors and typography every project. set this up on day one or never.
7. it reads your codebase
claude design pulls design tokens directly from your repo. if your css variables are named --color-blue-2, --blueish, --primary-old, the output will reflect that chaos. the quality of your design output is now a function of how clean your repo is.
this is the real moat anthropic built: they made your code the source of truth.
8. the default aesthetic is generic saas, ban it explicitly
without constraints, claude design defaults to inter, roboto, arial, and predictable gradients.
it's the yc-batch aesthetic.
to get anything distinctive, you have to ban it in the prompt: "no inter, no generic gradients, no stock blue-to-purple." this isn't in any documentation. it's the first tip every serious user discovers.
9. prompt each design dimension separately
typography, color, motion, backgrounds, prompt them one at a time, not in one paragraph.
the cookbook confirms this: guiding dimensions individually produces consistently better output than a single mega-prompt. combining them gives soup.
10. don't mix build + critique + learn in one prompt
a claude 4.x-era rule that applies fully here: if you ask it to build something, critique it, and explain a concept in the same turn, all three suffer. smaller, more focused turns produce stronger output. separate the verbs.
11. "make it clean" is cope, reference real products
generic adjectives are useless. "make it feel like xxxxx app circa 2023 but with more density" works. "make it clean" does not. claude design has seen the internet. use that. reference products, eras, aesthetic movements, not "professional" or "modern."
12. xml tags in prompts give you free structure
wrap your prompt sections in tags like <constraints>, <brand>, <output>, <examples>. claude models are heavily trained on this format. it's the cheapest quality upgrade available and most users still type free-flow prose.
example:
<task>design a landing page hero section for my product launch.</task>
<context>
product: a debugger that records ai agent decision trees in real time.
audience: senior engineers and ai researchers.
stage: launch week on product hunt and hacker news.
</context>
<brand>
voice: direct, technical, zero marketing fluff.
tone references: supabase launch posts, linear changelog, vercel homepage.
palette: #0a0a0a background, #00ff88 accent, off-white text (#f5f5f5).
typography: jetbrains mono for code, satoshi for headings. no inter. no roboto.
</brand>
<constraints>
- no generic saas gradients
- no 3d stock illustrations, no emoji-heavy feature cards
- no "transform your workflow" or "supercharge" copy
- max 3 elements above the fold
- hero must feel static — no heavy animations, no parallax
</constraints>
<copy_samples>
this is how we actually write in our docs. match this cadence:
"the debugger doesn't infer. it records. every branch, every tool call,
every hallucinated output — preserved exactly as it happened."
"if it's slow, your agent is slow. we don't add overhead."
</copy_samples>
<structure>
hero only. nothing below the fold for this generation.
- headline: max 8 words
- subhead: one sentence, max 20 words
- primary cta + secondary link ("read the docs")
- one visual element: terminal-style trace recording, static
</structure>
<references>
inspiration: linear.app hero (2023 era), railway.app, turbo.build.
avoid: anything that looks like a framer template.
</references>
<success_criteria>
a senior engineer scrolling past on hacker news thinks
"this looks like a real tool, not a pitch."
</success_criteria>
13. datadog compressed a week into a conversation
datadog's product team reportedly compressed a full brief → mocks → review cycle from a week to a single conversation.
the takeaway isn't "faster design." it's that alignment is now the real bottleneck in product work. if your org is slow to decide, claude design won't help you ship faster.
14. export-to-canva
real-time multiplayer editing isn't in claude design yet. the way teams are actually working: draft in claude design → export to canva → collaborate and finalize there. canva is the home, claude design is the starting point.
Canva
@canva
·
Apr 18
Introducing our new collaboration with Anthropic: Canva is now in Claude Design! Generate ideas in Claude. Edit in Canva. No friction. No starting from scratch.
https://
canva.com/newsroom/news/
canva-claude-design/?utm_medium=organic_social&utm_source=organic_social&utm_campaign=x&utm_content=product
…
0:00 / 0:15
227
1.8K
9.8K
3.2M
15. html export is underrated
everyone uses pdf and pptx export. the hidden move is html export, you grab a standalone html file, drop it in a repo, and you've shipped a landing page in under 10 minutes.
no figma-to-code translation, no framer. this is the workflow that'll kill "brochure site" dev contracts.
16. export-to-claude-code
the full loop: claude design → claude code → shipped application. designers become the handoff node, not the bottleneck.
this matters because it removes the traditional "design-to-dev translation" step entirely. if you're a designer who doesn't use claude code yet, you're about to be behind.
17. the handoff package is machine-readable
when you send a design to claude code, it's a structured package: layouts, images, dev notes, component annotations, all eaten by a coding agent directly. the spec is no longer a figma file a dev interprets. it's a machine-readable contract.
18. "frontier design" exists and 99% of users don't use it
claude design supports voice, video, 3d, and interactive effects, what anthropic calls "frontier design."
99% of users are still making slide decks.
the upside for anyone building interactive marketing sites, product demos, or portfolios is massive and uncrowded. go here if you want to stand out.
Kailash
@kail_designs
·
Apr 18
Made this video with Claude Design in 12 prompts
0:00 / 0:30
Quote
Claude
@claudeai
·
Apr 18
1:21
Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude.
Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.
Readers added context they thought people might want to know
The video was not made with Claude Design, which creates prototypes, slides, and one-pagers, not animated videos; the poster admits Claude "wont cut it" for this quality and promotes their team instead. x.com/claudeai/statu… x.com/kail_designs/s…
Context is written by people who use X, and appears when rated helpful by others. Find out more.
271
679
13K
1.4M
19. it's bad at multi-page flows with strict state logic
on a single screen, claude design is good. on a real user flow with state, branching logic, and page-to-page consistency, it falters.
for production user flows you still need figma + framer. know the boundary so you don't waste tokens trying to push past it.
20. juniors look senior. seniors look slow.
execution speed just became much better. a junior designer with claude design can produce in an hour what took a senior three days.
the defensible value for seniors is now taste, systems thinking, and constraint-setting, not pixel execution. if your value is execution speed, re-skill now.
21. the $2k freelance pitch deck is cooked
this is the market segment dying. any founder can now generate a pitch deck in 30 minutes that would've cost $2k from a freelancer two months ago.
the freelance "design your deck" niche has maybe six months. if that's your gig, pivot to brand strategy, systems, or motion, things claude design can't yet commodify.
22. use it as a thinking tool
the least discussed use: 10 minutes prompting in claude design clarifies a product idea better than 2 hours in figma.
the act of describing the design forces specificity. founders: use it for thinking before you use it for shipping. the slide deck that comes out is almost a bonus.
23. opus 4.7 sees images at higher resolution
it means you can paste screenshots directly.
opus 4.7 is anthropic's strongest vision model yet, with higher-resolution image understanding. paste screenshots of designs you like as inline references. it will extract specific elements, typography choices, spacing, color systems, with accuracy that the previous generation couldn't touch. stop describing, start pasting.
24. plan before you prompt
30 minutes of planning saves hours of iterating. write down your audience, constraints, success criteria, and references before you open claude design.
the users burning through their weekly tokens in two sessions are the ones skipping this step.
25. clear your session between projects
sessions carry context. if you started in "corporate saas" mode and then switch to "edgy consumer app," the first session's assumptions bleed into the second. start a new session per project. this is a token-economy move as much as a quality move.
26. mcp connections
claude design isn't isolated. via mcp, you can connect notion, figma, your database, issue trackers. pull real product data into a prototype. reference your actual design tokens from figma. this is the feature that separates power users from prompt users.
27. brand voice needs actual copy samples
"make the copy punchy" = useless. include 3-4 sentences of your actual brand voice in the prompt, and it will match the cadence. this is the single biggest unlock for marketing artifacts. copy is the hardest part to prompt, and example-driven prompting fixes it immediately.
28. few-shot examples must align exactly
claude 4.x models pay obsessive attention to examples. if you include a screenshot with a grid layout and one card has a subtle shadow, the model will replicate that shadow everywhere. curate examples ruthlessly. one bad example poisons the output.
29. the default aesthetic biases toward "professional"
opus 4.7's safety and aesthetic training pulls toward clean, readable, professional output. that's fine for enterprise. it's death for a consumer brand.
if you want brutalist, y2k, editorial, or anti-design, you have to push hard and repeatedly. expect to override the model's instincts, not go with them.
30. the product has six months before it's commoditized
research preview today. competitors will catch up fast, v0, lovable, framer all have roadmaps pointing here. anthropic's edge is the codebase-reading + design system integration. that's a 6-12 month moat at most. the window to build a reputation as "the person who masters claude design" is now, not q4. if you're reading this, you're early. act like it.