Composio はエージェント向けのツール統合プラットフォームで、AI に 1,500 以上のアプリへの安全な認可と並列ツール呼び出しを提供します。このスタイルは純黒のキャンバスに透明度 4〜12% の微弱な白いボーダーでコンテナを形成し、abcDiatype のジオメトリックサンセリフ体がコンテンツを、JetBrains Mono が技術的な信頼性を担います。見出しの行高は 0.87〜1.0 まで詰め、シアンとブルーの微光が「自発光」のようにアクセントを添えます。開発者向けと AI インフラのプロダクトに適しています。
Composioバックエンドとデータ
プロンプトテンプレート
基本テンプレート
Design a Composio-inspired interface. - Pitch-black canvas with near-invisible white-border containment (4-12% opacity); - Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace (JetBrains Mono) for technical credibility; - Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful text blocks; - Bioluminescent accent strategy — cyan and blue glows that feel like they're emitting light from within; - Hard-offset brutalist shadows (4px 4px) on select interactive elements. Colors: #0007cd, #00ffff, #0089ff, #0096ff with #0007cd accent. Typography: abcDiatype.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Composio aesthetics. Use Composio color identity with #0007cd accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Composio style. Use Composio color identity with #0007cd accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Composio design language. Use Composio color identity with #0007cd accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Composio visual identity. Use Composio color identity with #0007cd accents. Compelling, conversion-focused.
使用例
Composio アプリ
WebBuild a web app with Composio design language and #0007cd color system.
Composio ダッシュボード
ダッシュボードCreate a dashboard using Composio style with data visualization and abcDiatype typography.
✅ 適した用途
- バックエンドシステム
- 開発者ツールと API プラットフォーム
- ダーク系 SaaS コンソール
❌ 適さない用途
- 明るくポップな教育プロダクト
- 古典的な出版スタイルの読書サイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。