深綠漸層帶把 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 程式設計工具使用。