Polaris 是 Shopify 商家后台的界面语言：浅灰 #F1F1F1 画布托起白色卡片，近黑 #303030 承担主操作，绿色 #008060 标记成功与品牌时刻。Inter 字体、8px 圆角与克制的边框让订单、库存与营销表单在每天反复操作中保持清晰、稳定、可预测。
Polaris设计系统
提示词模板
基础模板
Design a Shopify Polaris-inspired admin interface. - Light #F1F1F1 canvas with white surface cards; - Near-black #303030 primary buttons and #008060 brand green; - Inter font, 8px radii, #E3E3E3 hairline borders; - Merchant admin patterns: order tables, inventory forms, filters; - Calm, task-focused e-commerce workflows. Colors: #008060, #F1F1F1, #FFFFFF, #303030 with #008060 accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Polaris aesthetics. Use Polaris color identity with #008060 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Polaris style. Use Polaris color identity with #008060 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Polaris design language. Use Polaris color identity with #008060 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Polaris visual identity. Use Polaris color identity with #008060 accents. Compelling, conversion-focused.
使用示例
Polaris 订单管理后台
仪表板Build an order management admin with Polaris style: #F1F1F1 canvas, white cards, #303030 primary buttons, green #008060 status accents, and dense data tables.
Polaris 商品上架表单
Web 端Design a product listing form with Shopify Polaris aesthetics: labeled inputs, 8px radii, clear sections, and #008060 save actions.
✅ 适合场景
- 电商商家后台
- 订单与库存管理
- 复杂表单工作流
❌ 不适合场景
- 面向消费者的品牌官网
- 重动效的营销页面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。