Cloudscape は AWS がオープンソース化したクラウドコンソールのデザインシステムで、「コンソール級の密度」を極めています。リソーステーブル、flashbar 通知、ウィザードフローが中核パターンで、メインブルー（#0972D3）に #F2F3F3 のアプリ下地、Open Sans が 14px の本文とコンパクトな見出しで情報量を支えます。8px の角丸と 20px のコントロール高が密度を高め、スティッキーなヘッダーと分割パネルが長いフローでの迷子を防ぎ、システムのステータスカラーが情報・成功・警告・エラーを貫きます。クラウドコンソールと複雑な B2B システムに適しています。
Cloudscapeデザインシステム
プロンプトテンプレート
基本テンプレート
Design an AWS Cloudscape-inspired interface. - Console-grade density: resource tables, flashbars, and wizard flows; - #0972D3 primary blue over #FFFFFF with #F2F3F3 app background; - Open Sans with 14px body and compact headings; - 8px radii, compact 20px control heights, sticky headers and split panels; - System-status colors for info, success, warning, and error states. Colors: #0972D3, #F2F3F3, #FFFFFF, #16191F with #0972D3 accent. Typography: Open Sans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Cloudscape aesthetics. Use Cloudscape color identity with #0972D3 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Cloudscape style. Use Cloudscape color identity with #0972D3 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Cloudscape design language. Use Cloudscape color identity with #0972D3 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Cloudscape visual identity. Use Cloudscape color identity with #0972D3 accents. Compelling, conversion-focused.
使用例
Cloudscape コンソールダッシュボード
ダッシュボードBuild a cloud console with AWS Cloudscape style: resource tables, status indicators, flashbars, and #0972D3 accents.
Cloudscape セットアップウィザード
WebCreate a multi-step configuration wizard with Cloudscape design language: split panels, validation states, and console-grade density.
✅ 適した用途
- クラウドコンソール
- 企業のツールチェーン
- 高密度なデータフロー
❌ 適さない用途
- ブランドのマーケティングと公式サイト
- 軽量なコンシューマー向けアプリ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。