Agentic は「エージェントファースト」の UI スタイルです。会話を主軸に据え、コントロールを最小限まで削ぎ落として、AI のアクションと結果をページの主役にします。静かなテンポと明確なフォーカスを持ち、状態と結果は抑制されたセマンティックカラー(緑は成功、アンバーは待機、赤は失敗)で表現。オレンジのアクセントが実行可能な次のステップを示します。AI アシスタント、自動化ワークフロー、会話型プロダクトの UI に適しています。
Agenticテーマと特色
プロンプトテンプレート
基本テンプレート
Design a Agentic-inspired interface. Colors: #F6F6F1, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #FF5701.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Agentic aesthetics. Use Agentic color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Agentic style. Use Agentic color identity with #16A34A accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Agentic design language. Use Agentic color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Agentic visual identity. Use Agentic color identity with #16A34A accents. Compelling, conversion-focused.
使用例
Agentic アプリ
WebBuild a web app with Agentic design language and #16A34A color system.
Agentic ダッシュボード
ダッシュボードCreate a dashboard using Agentic style with data visualization and #FF5701 typography.
✅ 適した用途
- テーマ型のシーン
- AI 会話プロダクトの情報提示ページ
- インテリジェントアシスタントのワークフローパネル
❌ 適さない用途
- 従来型のフォーム中心の管理システム
- 強いブランド装飾が必要なマーケティングページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。