SAP 把网页做成一扇应用程序窗口：60px 的 #f5f6f7 全局导航条上再叠一条面包屑与产品标签栏，读者还未看到标题就先知道自己身处庞大产品目录的哪一层。主体近七成是白色 #ffffff，分区靠 #f5f6f7、#eaecee、#ebf8ff、#f7f4ff 四条全宽平色带完成，一律直角、不做阴影。唯一会「行动」的颜色是 SAP 蓝 #0057d2，按钮、行内链接和当前标签共用它；72 Brand Variable 以 350 到 700 的字重跨度，让同为 15px 的列表项与导航项读起来像两种文本。
SAP专业与企业
提示词模板
基础模板
Design an SAP-inspired interface. - Two-storey chrome: a 60px #f5f6f7 global bar above a breadcrumb and product tab rail; - A white #ffffff canvas separated by full-width flat bands in #f5f6f7, #eaecee, #ebf8ff and #f7f4ff, all square-cornered and unshadowed; - SAP blue #0057d2 as the only acting colour on buttons, inline links and the active tab, with deep blue #0040b0 for interior hero bands; - A five-tier text ladder from true black through #3c3c3c and slate #223548, #354a5f and #475e75, plus neutral #545454 for chrome; - 72 Brand Variable spanning weights 350 to 700, so a 15px list item at 350 and a 15px nav link at 400 read as different classes of text; - Corners capped at 8px for controls and 12px for media, never a pill. Colors: #ffffff, #f5f6f7, #0057d2, #0040b0 with #0057d2 accent. Typography: 72 Brand Variable.
变体提示词
📱 移动端
Design a mobile app with SAP aesthetics. Keep the chrome light, stack white content above flat bands and let SAP blue #0057d2 mark every action. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with SAP style. Place a 60px chrome bar over a product tab rail, then separate white sections with full-width flat bands. Professional, responsive layout.
📊 仪表板
Design a dashboard with SAP design language. Use the slate text ladder, 8px controls and blue only for active states, with hairlines doing the dividing. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with SAP visual identity. Open with a navy gradient or a deep-blue hero band, then return to white and full-width bands. Compelling, conversion-focused.
使用示例
SAP 产品门户
落地页Build a product portal with SAP design language: two-storey chrome, a deep blue hero band and white content sections.
SAP 运营后台
仪表板Create a dashboard using SAP style with slate text tiers, 8px controls and blue reserved for active states.
✅ 适合场景
- ERP 与供应链管理后台
- B2B 企业服务产品页
- 面向 IT 采购者的方案门户
❌ 不适合场景
- 强调情绪与氛围的时尚品牌站
- 轻量消费级社交应用
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。