克隆对比
Orbit Desk · 主题切换 DESIGN.md
一个太空运营控制台，包含明暗主题、密集系统读数，以及在小屏上自然收拢的导航。
更新于：
这个示例展示了什么
- 主题切换
- 数据布局
- 响应式导航
DESIGN.md
从当前预览对应的同一个页面中提取出的设计规则。
YAML 保存准确的设计值 · Markdown 说明这些值如何使用
颜色6
字体7
布局与响应式8
组件5
基础样式
查看这份文件记录的颜色、排版层级、间距、圆角和阴影。
颜色
6Surface Canvas
#adf1dfSurface Raised
rgba(255,255,255,.72)Surface Raised Foreground
#66728aAccent 1
#10203dAccent 2
#2356d8Accent 3
#66dcb5字体
2Body
fontSize: 14pxlineHeight: 1.45
沿用页面本身的设计语言
Arial,sans-serif
Display
lineHeight: .9letterSpacing: -.06em
沿用页面本身的设计语言
Arial,sans-serif
样字使用浏览器可用的字体，准确数值保留在文件中。
各区域的排版
5| Pattern | Guidance |
|---|---|
| Level 1 heading | Use color `#10203d`; font-family `Arial,sans-serif`; font-size `clamp(34px,5vw,72px)`; letter-spacing `-.06em`; line-height `.9`; margin `12px 0`. |
| Level 2 heading | Use color `#10203d`; font-family `Arial,sans-serif`. |
| Page | Use font-family `Arial,sans-serif`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.45`. |
| Paragraph | Use color `#10203d`; font-family `Arial,sans-serif`. When viewport width <= 700px, use display `none`. |
| Strong text | Use color `#10203d`; display `block`; font-family `Arial,sans-serif`; font-size `36px`; margin-top `15px`. |
间距
4Step 1
8pxStep 2
12pxStep 3
20pxStep 4
24px布局与响应式
只有 DESIGN.md 中存在对应证据时，这里才会显示布局和视口规则。
| Pattern | Guidance |
|---|---|
| Article | Use background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `20px`; color `#10203d`; font-family `Arial,sans-serif`. Observed alternatives: - Use min-height `300px`; padding `24px`. When viewport width <= 700px, use min-height `250px`. - Use padding `20px`. |
| Complementary content | Use align-content `start`; background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `20px`; color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `8px`; padding `18px`. When viewport width <= 700px, use display `flex`; overflow `auto`. |
| Flex container | Use color `#10203d`; display `flex`; font-family `Arial,sans-serif`. Observed alternatives: - Use align-items `end`; border-bottom `1px solid #cbd7ef`; gap `12px`; height `180px`. - Use align-items `end`; justify-content `space-between`. When viewport width <= 700px, use align-items `start`. - Use border-top `1px solid #cbd7ef`; justify-content `space-between`; padding `13px 0`. |
| Grid container | Use color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `18px`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use grid-template-columns `1fr 1fr`. - Use grid-template-columns `220px 1fr`. - Use grid-template-columns `repeat(3,1fr)`. |
| Header | Use align-items `center`; color `#10203d`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; margin-bottom `20px`. |
| Main content | Use background `radial-gradient(circle at 70% 0,#adf1df 0,transparent 30%),radial-gradient(circle at 10% 40%,#cbbdff 0,transparent 35%),#eef3ff`; color `#10203d`; font-family `Arial,sans-serif`; min-height `100vh`; padding `20px`. |
| Page | Use margin `0`. |
| Section | Use color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `18px`. |
组件与状态
组件事实汇总同一次页面捕获中可追溯的属性和状态。
组件
3Field Label
- backgroundColor
- {colors.surface-raised}
- rounded
- 99px
Main Content
- textColor
- {colors.accent-1}
- padding
- 20px
Complementary Content
- backgroundColor
- {colors.surface-raised}
- rounded
- 20px
- padding
- 18px
| Pattern | Guidance |
|---|---|
| Checkbox | Use color `#10203d`; font `inherit`; font-family `Arial,sans-serif`. |
| Field label | Use align-items `center`; background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `99px`; color `#10203d`; display `flex`; font-family `Arial,sans-serif`; gap `8px`; padding `10px 14px`. |
包含的内容
查看这份文件已经记录了哪些网站风格。
未能捕获的内容
- The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
- 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 color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `18px`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use grid-template-columns `1fr 1fr`. - Use grid-template-columns `220px 1fr`. - Use grid-template-columns `repeat(3,1fr)`.
- Article: Use background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `20px`; color `#10203d`; font-family `Arial,sans-serif`. Observed alternatives: - Use min-height `300px`; padding `24px`. When viewport width <= 700px, use min-height `250px`. - Use padding `20px`.
- Paragraph: Use color `#10203d`; font-family `Arial,sans-serif`. When viewport width <= 700px, use display `none`.
- Checkbox: Use color `#10203d`; font `inherit`; font-family `Arial,sans-serif`.
- Surface Canvas: #adf1df
- Spacing: 8px · 12px · 20px · 24px
用同样的流程开始开发
把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。
继续浏览 Gallery
提取你自己的网页
输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。