克隆对比

Atlas Dispatch · 运营看板 DESIGN.md

一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

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

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

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

页面需要在保留清晰层级的同时呈现大量实时信息，并避免宽表格破坏移动端布局。

数据仅用于展示，静态克隆不会连接调度后端。用于产品前，请检查表格溢出和真实数据状态。

DESIGN.md

Grid container: Use display `grid`. Observed alternatives: - Use gap `15px`. - Use gap `7px`. - Use grid-template-columns `232px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
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`.
Level 1 heading: Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`.
Table row: When viewport width <= 520px, use font-size `12px`.
Success: #16885c
Spacing: 4px · 8px · 12px · 16px

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

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