Cloudscape 是 AWS 開源的雲端主控台設計系統，把「主控台級密度」做到極致：資源表格、flashbar 通知與精靈流程是核心模式，主藍（#0972D3）配 #F2F3F3 應用底色，Open Sans 以 14px 內文與緊湊標題承載資訊量；8px 圓角與 20px 控制項高度提高密度，黏性表頭與分欄面板讓長流程不迷路，系統狀態色貫穿資訊、成功、警告與錯誤。適合雲端運算主控台與複雜 B 端系統。
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 設定精靈
Web 端Create a multi-step configuration wizard with Cloudscape design language: split panels, validation states, and console-grade density.
✅ 適用情境
- 雲端主控台
- 企業工具鏈
- 高密度資料流程
❌ 不適用情境
- 品牌行銷與官網頁面
- 輕量消費級應用
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。