Anthropic Claude のWebデザイン

Claude is Anthropic's AI, built for problem solvers. Tackle complex challenges, analyze data, write code, and think through your hardest work.

このデザインを再現するAIプロンプト

Cursor / Claude Code / v0 にこのまま貼り付けると、近いトーンのLPが生成できます。

AIアシスタントSaaSのコーポレートLPを作って。フォントは見出しにStyrene B（Söhne系のジオメトリックsans）、本文にTiempos（contemporary serif）。カラーはブラウンの #cc785c をアクセントに、背景はオフホワイト #faf6f0。レイアウトは縦長1カラム、セクション間に120px以上の余白。広告色を排して、文学誌のようなエディトリアル質感に。ヒーローはh1テキストだけで写真なし、その下にtl;drの大きめのlead文。

デザインの特徴

タイポグラフィを軸に据えた知的トーン。Styrene Bsans の見出しに Tiempos serif の本文を組み合わせ、文学的な印象を演出。ブラウン #cc785c × クリーム背景の温かいパレットが「優しいAI」のブランド人格を伝える。余白を大胆に取った縦長スクロール、フォントサイズ階層が明快で広告色を完全に排した教科書的な企業ブランドサイト。

Design Tokens（DOM解析データ）

このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。

カラーロール

Background#faf9f5

Text#141413

Color #1#141413

Color #2#5e5d59

Color #3#faf9f5

Color #4#30302e

Color #5#4d4c48

タイポグラフィ

要素	Font	Size	Weight	Line	Tracking
h1	`Anthropic Serif`	64px	500	70.4px	normal
h2	`Anthropic Serif`	17px	400	27.2px	normal
h3	`Anthropic Serif`	19px	500	22.8px	normal
本文	`Anthropic Sans`	12px	400	19.2px	0.12px
リンク	`Anthropic Sans`	20px	400	32px	normal
ボタン	`Anthropic Sans`	20px	400	32px	normal