克隆对比
Atlas Dispatch · 运营看板 DESIGN.md
一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。
更新于：
这个示例展示了什么
- 运营看板
- 密集数据视图
- 响应式表格
DESIGN.md
从当前预览对应的同一个页面中提取出的设计规则。
YAML 保存准确的设计值 · Markdown 说明这些值如何使用
颜色17
字体8
布局与响应式11
组件15
基础样式
查看这份文件记录的颜色、排版层级、间距、圆角和阴影。
颜色
17Success
#16885cSuccess Dark
#55c995Action Background
#f1f2f4Action Background Dark
#242831Action Foreground
#17181bAction Foreground Dark
#f4f6f8Surface Canvas
#f7f7f8Surface Canvas Dark
#111318Surface Raised
#ffffffSurface Raised Dark
#191c22Surface Raised Foreground
#747780Surface Raised Foreground Dark
#9ca3afText Body
#17181bText Body Dark
#f4f6f8Accent 1
#087cf0Accent 2
#55a7ffAccent 3
#b76b11字体
3Body
fontSize: 14px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Display
fontSize: 19px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
H2
fontSize: 15px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
样字使用浏览器可用的字体，准确数值保留在文件中。
文字与背景颜色
1| Pattern | Guidance |
|---|---|
| Page | Use color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`. |
各区域的排版
5| Pattern | Guidance |
|---|---|
| Level 1 heading | Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`. |
| Level 2 heading | Use font-size `15px`; margin `0px`. When dark mode, use background `#191c22`. |
| Page | Use font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`. |
| Strong text | When dark mode, use background `#191c22`. Observed alternatives: - Use only the common rules above. - Use text-align `left`; white-space `nowrap`. When viewport width <= 520px, use font-size `12px`. |
| Table heading | Use border-top `1px solid #e3e4e8`; color `#747780`; font-size `11px`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When dark mode, use background `#191c22`; color `#9ca3af`. Observed alternatives: - Use only the common rules above. - When dark mode and viewport width <= 520px and sibling position 3, use border-top `1px solid #e3e4e8`; color `#9ca3af`; font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `11px`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When viewport width <= 520px and sibling position 3, use display `none`. |
间距
4Step 1
4pxStep 2
8pxStep 3
12pxStep 4
16px圆角
6Step 1
8pxStep 2
9pxStep 3
10pxStep 4
11pxStep 5
12pxStep 6
14px阴影
3rgba(0, 0, 0, 0.03) 0px 1px 2pxrgba(0, 0, 0, 0.07) 0px 1px 3pxrgba(0, 0, 0, 0.2) 0px 8px 24px布局与响应式
只有 DESIGN.md 中存在对应证据时，这里才会显示布局和视口规则。
| Pattern | Guidance |
|---|---|
| Article | Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`. When dark mode, use background `#191c22`. Observed alternatives: - Use min-width `0px`; padding `18px`. When viewport width <= 520px, use padding `14px`. - Use padding `16px`. When viewport width <= 520px, use padding `13px`. |
| Column container | Use color `#747780`; display `flex`; flex-direction `column`; font-size `9px`; inset `17px auto 32px 9px`; justify-content `space-between`; position `absolute`. When dark mode, use color `#9ca3af`. |
| 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`. |
| Flex container | Use display `flex`. Observed alternatives: - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; gap `10px`. - Use align-items `center`; gap `12px`; justify-content `space-between`. When viewport width <= 520px, use align-items `flex-start`; flex-direction `column`. - Use align-items `center`; gap `12px`; justify-content `space-between`; margin-bottom `16px`. - Use align-items `center`; gap `8px`; justify-content `space-between`. - Use align-items `center`; gap `8px`; margin-left `auto`. - Use bottom `8px`; color `#747780`; font-size `9px`; justify-content `space-between`; left `35px`; position `absolute`; right `10px`. When dark mode, use color `#9ca3af`. - Use color `#747780`; font-size `9px`; gap `12px`; position `absolute`; right `14px`; top `10px`. When dark mode, use color `#9ca3af`. - Use justify-content `space-between`. |
| 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`. |
| Header | Use align-items `center`; background `rgba(255, 255, 255, 0.94)`; border-bottom `1px solid #e3e4e8`; display `flex`; gap `12px`; min-height `66px`; padding `12px 24px`; position `sticky`; top `0px`; z-index `2`. When dark mode, use background `rgba(25, 28, 34, 0.94)`. When viewport width <= 900px, use padding `11px 16px`. |
| 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`. |
| Navigation | Use display `grid`; gap `5px`. |
| Page root | Use margin `0px`; min-height `100%`. |
| Page | Use margin `0`; min-height `100%`. |
组件与状态
组件事实汇总同一次页面捕获中可追溯的属性和状态。
组件
5Link
- rounded
- {rounded.step-2}
Tab List
- rounded
- {rounded.step-4}
- padding
- 4px
Header
- backgroundColor
- rgba(255, 255, 255, 0.94)
Header Dark Mode
- backgroundColor
- rgba(25, 28, 34, 0.94)
Image
- backgroundColor
- rgb(251, 252, 254)
- rounded
- {rounded.step-3}
- height
- 230px
| Pattern | Guidance |
|---|---|
| Button | Use font `inherit`. Observed alternatives: - Use background `#087cf0`; border `0px`; border-radius `10px`; color `white`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 14px`. When dark mode, use background `#55a7ff`. When viewport width <= 520px, use padding `0px 10px`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; color `#17181b`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 12px`. When dark mode, use background `#242831`; color `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; width `34px`. When dark mode, use background `#242831`. - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `999px`; bottom `14px`; box-shadow `rgba(0, 0, 0, 0.2) 0px 8px 24px`; color `#17181b`; display `grid`; height `36px`; place-items `center`; position `fixed`; right `14px`; width `36px`; z-index `20`. When dark mode, use background `#191c22`; color `#f4f6f8`. |
| Image | Use background `rgb(251, 252, 254)`; border-radius `10px`; height `230px`; overflow `hidden`; padding `8px 8px 26px 34px`; position `relative`. |
| Link | Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. When dark mode, use background `#191c22`. |
| Navigation link | Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. Observed alternatives: - Use background `#f1f2f4`; font-weight `700`. When dark mode, use background `#242831`. - When dark mode, use background `#191c22`. |
| Rounded surface | Observed alternatives: - Use background `#087cf0`; border-radius `inherit`; height `100%`. When dark mode, use background `#55a7ff`. - Use background `#f1f2f4`; border-radius `999px`; height `7px`; overflow `hidden`. When dark mode, use background `#242831`. |
| Tab list | Use background `#f1f2f4`; border-radius `11px`; display `flex`; gap `4px`; padding `4px`. When dark mode, use background `#242831`. |
| Table cell | Use border-top `1px solid #e3e4e8`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When viewport width <= 520px, use font-size `12px`. Observed alternatives: - Use only the common rules above. - When dark mode and viewport width <= 520px and sibling position 3, use border-top `1px solid #e3e4e8`; color `#f4f6f8`; font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When dark mode, use background `#191c22`. When viewport width <= 520px and sibling position 3, use display `none`; font-size `12px`. - When dark mode, use background `#191c22`. |
| Table row | When viewport width <= 520px, use font-size `12px`. |
| Table | Use border-collapse `collapse`; width `100%`. When viewport width <= 520px, use font-size `12px`. |
| Vector graphic | Use display `block`; height `100%`; max-width `100%`; overflow `visible`; width `100%`. |
包含的内容
查看这份文件已经记录了哪些网站风格。
未能捕获的内容
- The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
- Some combinations of layout, theme and interaction states could not be established from this capture.
- Some conditional styles are not described because their affected elements could not be established.
- Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.
还原难点
页面需要在保留清晰层级的同时呈现大量实时信息，并避免宽表格破坏移动端布局。
使用边界
数据仅用于展示，静态克隆不会连接调度后端。用于产品前，请检查表格溢出和真实数据状态。
DESIGN.md
从同一次捕获中提取的设计事实
下载 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 交给编程工具继续修改。下方指南介绍了具体步骤。
继续浏览 Gallery
提取你自己的网页
输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。