GitHub は世界で最も広く採用されている開発者プラットフォームで、数百万の開発者と最大のオープンソースコミュニティがその上でソフトウェアを共につくっています。UI は純白（#ffffff）または深いネイビーブラック（#0d1117）を下地に、ヘアライン級のグレーのボーダー（#d0d7de）が各パネルを縁取ります。Primer ブルー（#0969da）がリンクと主要操作を、GitHub グリーン（#1a7f37）が成功状態を担い、system-ui に SFMono を組み合わせ、リストの行は密で余白は抑制されています。開発者プラットフォームとコードツールに適しています。
GitHub開発者ツール
プロンプトテンプレート
基本テンプレート
Design a GitHub-inspired interface. - True white canvas (#ffffff) or deep navy-black (#0d1117) — no warmth, no tint; - Hairline gray borders (#d0d7de) define every pane and panel; - Primer blue (#0969da) for links/primary; GitHub green (#1a7f37) for success/merge; - system-ui for prose; SFMono for code — no custom typeface; - Dense list rows with minimal padding; whitespace is rare. Colors: #ffffff, #f6f8fa, #eaeef2, #1f2328 with #0969da accent. Typography: - Background:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with GitHub aesthetics. Use GitHub color identity with #0969da accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with GitHub style. Use GitHub color identity with #0969da accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with GitHub design language. Use GitHub color identity with #0969da accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with GitHub visual identity. Use GitHub color identity with #0969da accents. Compelling, conversion-focused.
使用例
GitHub アプリ
WebBuild a web app with GitHub design language and #0969da color system.
GitHub ダッシュボード
ダッシュボードCreate a dashboard using GitHub style with data visualization and - Background: typography.
✅ 適した用途
- 開発者ツール
- コードホスティングと協業プラットフォーム
- 開発者ツールの機能密度の高い UI
❌ 適さない用途
- 一般向けの EC 小売
- 芸術性重視のブランドイメージページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。