克隆对比

Tide Ledger · 财务看板 DESIGN.md

一个财务概览页面，由紧凑的账户摘要、CSS 图表和数字对齐清晰的流水表组成。

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。

保留布局、变量与资源，生成安全静态预览。

切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。

财务页面依赖精确对齐和克制强调。图表与表格数字要保持清晰，又不能让页面变成卡片墙。

数值和图表都是静态示例，不代表真实财务数据。真实产品还需要本地化、货币规则和图表无障碍替代。

DESIGN.md

Complementary content: Use background `#fff`; border-right `1px solid #e3e4e8`; display `flex`; flex-direction `column`; gap `22px`; padding `18px 14px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`.
Main content: Use display `grid`; gap `16px`; margin `0px auto`; padding `18px 24px 40px`; width `min(100%, 1280px)`. When viewport width <= 900px, use padding `14px 16px 32px`.
Level 1 heading: Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`.
Link: Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. When dark mode, use background `#191c22`.
Action Background: #f1f2f4
Spacing: 8px · 12px · 16px · 20px

把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。

输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。