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 编程工具使用。