VoltAgent はオープンソースの TypeScript AI エージェントフレームワークで、「可観測性優先」を設計原則としています。UI はカーボンブラックのキャンバス（#050507）に暖かなグレーのボーダー（#3d3a39）を合わせて冷たさを避け、エメラルドのシグナルカラー（#00d992）が唯一のエネルギー源です。書体は三分工で、system-ui が権威ある見出しを、Inter が精密な UI を、SFMono がコードの信頼性を担います。見出しの行高は 1.0〜1.11 まで詰められ、暖かな中間色がダークテーマを臨床的に見せません。開発者フレームワークと AI インフラに適しています。
VoltAgentAI・大規模モデル
プロンプトテンプレート
基本テンプレート
Design a VoltAgent-inspired interface. - Carbon-black canvas (#050507) with warm-gray border containment (#3d3a39) — not cold or sterile; - Single-accent identity: Emerald Signal Green (#00d992) as the sole chromatic energy source; - Dual-typography system: system-ui for authoritative headings, Inter for precise UI/body text, SFMono for code credibility; - Ultra-tight heading line-heights (1.0–1.11) creating dense, compressed power blocks; - Warm neutral palette (#3d3a39, #8b949e, #b8b3b0) that prevents the dark theme from feeling clinical. Colors: #00d992, #2fd6a1, #10b981, #818cf8 with #00d992 accent.
バリエーションプロンプト
📱 モバイル
Design a mobile app with VoltAgent aesthetics. Use VoltAgent color identity with #00d992 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with VoltAgent style. Use VoltAgent color identity with #00d992 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with VoltAgent design language. Use VoltAgent color identity with #00d992 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with VoltAgent visual identity. Use VoltAgent color identity with #00d992 accents. Compelling, conversion-focused.
使用例
VoltAgent アプリ
WebBuild a web app with VoltAgent design language and #00d992 color system.
VoltAgent ダッシュボード
ダッシュボードCreate a dashboard using VoltAgent style with data visualization and system-ui typography.
✅ 適した用途
- AI
- AI エージェントと自動化フレームワーク
- ダークな技術プロダクトの公式サイト
❌ 適さない用途
- 柔らかなパステルのベビー・マタニティ製品
- レトロな紙質感のサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。