星巴克是全球咖啡零售品牌,其界面用四层绿色体系(Starbucks、Accent、House、Uplift)各司其职,而不是笼统的「品牌绿」;金色只属于会员等级时刻,绝不作为通用强调;画布是暖中性色(#f2f0eb/#edebe9)而非冷白,呼应咖啡店材质;SoDoSans 以 -0.16px 的紧凑字距作为统一声音,Rewards 区切换衬线、招聘页甚至用马克笔字样写名字。适合零售、会员体系与生活方式品牌。
电商与零售现代极简
提示词模板
基础模板
Design a Starbucks-inspired interface. - Four-tier green brand system (Starbucks / Accent / House / Uplift) each mapped to a distinct surface role — not a single "brand green"; - Gold reserved for Rewards-status moments only; never a general-purpose accent; - Warm-neutral canvas (#f2f0eb / #edebe9) instead of cold white — references café materials; - Custom proprietary typeface (SoDoSans) with tight -0.16px letter-spacing as the universal voice; - Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names. Colors: #006241, #00754A, #1E3932, #2b5148 with #006241 accent. Typography: for Rewards utility zones and hero bands..
变体提示词
📱 移动端
Design a mobile app with Starbucks aesthetics. Use Starbucks color identity with #006241 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Starbucks style. Use Starbucks color identity with #006241 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Starbucks design language. Use Starbucks color identity with #006241 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Starbucks visual identity. Use Starbucks color identity with #006241 accents. Compelling, conversion-focused.
使用示例
Starbucks 应用
Web 端Build a web app with Starbucks design language and #006241 color system.
Starbucks 仪表板
仪表板Create a dashboard using Starbucks style with data visualization and for Rewards utility zones and hero bands. typography.
✅ 适合场景
- 电商场景
- 零售品牌官网
- 会员与门店体验页
❌ 不适合场景
- 冷峻科技界面
- 实验性反设计
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述,可复制或下载后交给 AI 编程工具使用。