厳選・オープン・無料

Mixpanel

モダンなエンジニアリングおよびグロースチームのための、先進的なAI搭載製品分析。

01

デザイン DNA

プロダクトチームのための、洗練されたデータ駆動型コマンドセンター。

02

カラー

白の基調に、鮮やかな紫色のアクセントグラデーションを用いた、クリーンで高コントラストのタイポグラフィ。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display60px · 500
• heading36px · 500
• subheading18px · 400
• body16px · 400

見出しにはtightな文字間隔と500のウェイトを使用。 · 本文には、高い可読性を持つhumanist-sans-serifを採用。 · モノスペースはコードスニペットに厳密に限定。

04

余白

8pxのベースライングリッドと、セクション間に適度な余白を確保。

05

サーフェス (角丸 / 影 / 罫線)

カードやインプットには1px solid rgba(0,0,0,0.1)を使用。

rgba(0,0,0,0.05) 0px 0px 0px 1px · rgba(0,0,0,0.08) 0px 4px 16px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

レイアウト

最大幅の中央揃えコンテナにセクションを積み上げ、グリッドベースの機能レイアウトを採用。

07

モーションとインタラクション

インタラクティブ要素上の滑らかなhover遷移。 · モーダルやドロワーの表示に際する、繊細なフェードインアニメーション。

インタラクティビティを示すための、微妙な色の変化や背景の変化。 · 状態の変化や小さなスケールアニメーションによる、即時フィードバック。

08

コンポーネント

• button ソリッドなプライマリボタンは、ピル型（999px radius）で、白地に高コントラストのインクカラー。セカンダリアクションにはゴーストボタンを使用。
• card ライトな背景に繊細な1pxボーダー、12pxのボーダー-radius、16px-24pxのpaddingを設定。
• chip 分類やフィルタリング用の、小さく丸みのある16px radiusのタグ。
• input クリーンなボーダー付きインプットで、8pxのボーダー-radiusと明確なfocus状態を実現。
• hero 大きな幾何学的タイポの中央揃え見出し、補助テキスト、および横並びの機能トグル一覧。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルであり、少し先見の明がある。
• 見出し スピード、データ、インテリジェンスを強調する、直接的で能動的なステートメント。
• CTA 行動を促し、明確なもの（例：「無料で始める」「デモを予約」）。

• 遊び心のある丸みのあるディスプレイフォントは使用しない — スクリーンショットでは見出しに幾何学的で中程度のウェイトのsans-serifが使用されている。
• ネオンや過度に彩度の高い色は使用しない — スクリーンショットでは洗練された紫のアクセントと中間的なダークパレットが組み合わされている。
• カードに太いボーダーは使用しない — スクリーンショットでは繊細な1pxボーダーとソフトなシャドウが使用されている。
• 密集した詰まったレイアウトは使用しない — スクリーンショットでは適度な余白と明確な縦のリズムが保たれている。
• 強調にイタリック体は使用しない — スクリーンショットではウェイトの変化（500 vs 400）が使用されている。
• ボタンに丸みのある四角形は使用しない — スクリーンショットでは严格にピル型（999px radius）のプライマリCTAが使用されている。
• 避ける: 専門用語の多い文
• 避ける: 受動態
• 避ける: 過度に遊び心のある言葉遣い

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko