PostHog は「プロダクトのコンテキスト層」で、問題を自動診断し、欠陥を修正し、PR まで生成できます。ブランドの気質は意図的に反エンタープライズで、配色は慣例的な青ではなくセージオリーブの暖色です。IBM Plex Sans はウェイト 700／800 に 1.5 以上の行高を組み合わせ、ブランドのオレンジ（#F54E00）は隠されていてホバー時にだけ飛び出して驚かせます。手描きのハリネズミのイラストが全体を貫き、ボーダーも下地もセージの色味（#bfc1b7/#eeefe9）を帯びています。開発者に優しく個性のある分析プロダクトに適しています。
PostHogバックエンドとデータ
プロンプトテンプレート
基本テンプレート
Design a PostHog-inspired interface. - Warm sage/olive color palette instead of conventional blues — earthy and approachable; - IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights; - Hidden brand orange (#F54E00) that only appears on hover interactions — a delightful surprise; - Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate; - Sage-tinted borders (#bfc1b7) and backgrounds (#eeefe9) creating a unified warm-green system. Colors: #4d4f46, #23251d, #F54E00, #F7A501 with #F54E00 accent. Typography: ui-monospace.
バリエーションプロンプト
📱 モバイル
Design a mobile app with PostHog aesthetics. Use PostHog color identity with #F54E00 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with PostHog style. Use PostHog color identity with #F54E00 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with PostHog design language. Use PostHog color identity with #F54E00 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with PostHog visual identity. Use PostHog color identity with #F54E00 accents. Compelling, conversion-focused.
使用例
PostHog アプリ
WebBuild a web app with PostHog design language and #F54E00 color system.
PostHog ダッシュボード
ダッシュボードCreate a dashboard using PostHog style with data visualization and ui-monospace typography.
✅ 適した用途
- バックエンドシステム
- 分析・監視系の開発者ツール
- データ密度の高いダークダッシュボード
❌ 適さない用途
- ラグジュアリー小売ブランドのページ
- 柔らかなパステルのライフスタイル製品
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。