ClickHouse は高性能なオープンソースの列指向分析データベースです。UI は純黒のキャンバス（#000000）にネオンイエローグリーン（#faff69）を配して最大のコントラストを生み、Inter ウェイト 900、最大 96px の超重量ディスプレイ書体が性能数値を主役に変えます。チャコール色のカードには 80% 透明度の #414141 のボーダー、二次ボタンはフォレストグリーン（#166534）が担います。データベース、データプラットフォーム、技術ドキュメント系の UI に適しています。
ClickHouseバックエンドとデータ
プロンプトテンプレート
基本テンプレート
Design a ClickHouse-inspired interface. - Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast; - Extra-heavy display typography: Inter at weight 900 (Black) up to 96px; - Dark charcoal card system with #414141 borders at 80% opacity; - Forest green (#166534) secondary CTA buttons; - Performance stats as oversized display numbers. Colors: #faff69, #166534, #14572f, #f4f692 with #faff69 accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with ClickHouse aesthetics. Use ClickHouse color identity with #faff69 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with ClickHouse style. Use ClickHouse color identity with #faff69 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with ClickHouse design language. Use ClickHouse color identity with #faff69 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with ClickHouse visual identity. Use ClickHouse color identity with #faff69 accents. Compelling, conversion-focused.
使用例
ClickHouse アプリ
WebBuild a web app with ClickHouse design language and #faff69 color system.
ClickHouse ダッシュボード
ダッシュボードCreate a dashboard using ClickHouse style with data visualization and Inter typography.
✅ 適した用途
- バックエンドシステム
- オープンソースデータベースと開発者ドキュメント
- 性能ベンチマーク系の技術ページ
❌ 適さない用途
- 一般消費者向けの小売 EC
- 柔らかく温かなライフスタイル系プロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。