深绿渐变带把 NerdWallet 的编辑内容与比价工具缝在同一页：文章页由 #008254 开场，往下立刻落到白与 #f7f7f7 的表格世界。薄荷阶梯（#effcf8、#e3faf2、#b7ecda）承担大面积分隔，替掉阴影；按钮只给 2px 圆角，Gotham 正文压到 300 字重、标题 700，靠字重差而非字号拉开层级。
NerdWallet金融科技与加密
提示词模板
基础模板
Design a NerdWallet-inspired interface. - A deep spruce (#008254) gradient hero band opens every editorial page, then the layout drops immediately to white; - A three-step mint ladder (#effcf8, #e3faf2, #b7ecda) carries large panels and media frames instead of shadows; - Near-square geometry: filled buttons at 2px radius, cards at 8px, inputs at 0; - Gotham body at weight 300 against 700 headings -- hierarchy from weight contrast, not size; - Comparison rows ruled by a single #ebebec hairline with no vertical dividers; - Lime (#e8fdac, #9ae600) only for emphasis that must survive on green. Colors: #008254, #f7f7f7, #effcf8, #e8fdac, #000000 with #008254 accent. Typography: Gotham and GothamDisplay, 300/700.
变体提示词
📱 移动端
Design a mobile finance app with NerdWallet aesthetics. White canvas, #008254 actions, mint panels and stacked comparison cards. Trustworthy, touch-friendly.
💻 Web端
Design a web app with NerdWallet style. Green hero band, hairline rate tables, mint callouts and 2px button radii. Editorial and utilitarian.
📊 仪表板
Design a dashboard with NerdWallet design language. #008254 metrics, mint section panels, weight-300 body and ruled comparison rows. Dense but calm.
📄 落地页
Design a landing page with NerdWallet visual identity. #008254 gradient band, lime emphasis, expert-tip panel and square CTA blocks. Conversion-focused, credible.
使用示例
NerdWallet 储蓄比价页
Web 端Build a savings comparison page with NerdWallet design language and #008254 actions.
NerdWallet 费率仪表板
仪表板Create a rate dashboard using NerdWallet style with mint panels and hairline comparison rows.
✅ 适合场景
- 个人理财比价工具
- 信用卡与贷款利率页面
- 需要可信感的金融编辑内容
❌ 不适合场景
- 轻松娱乐类应用
- 高圆角软萌风格品牌
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。