克隆对比
Orbit Desk · 主题切换 DESIGN.md
一个太空运营控制台，包含明暗主题、密集系统读数，以及在小屏上自然收拢的导航。
更新于：
这个示例展示了什么
- 主题切换
- 数据布局
- 响应式导航
程序化重建
直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。
完整页面资源
保留布局、变量与资源，生成安全静态预览。
响应式布局
亮暗主题
切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。
还原难点
明暗模式下的主题关系和状态颜色都要保持一致，同时让密集控件适应响应式外壳。
使用边界
安全的第一方主题切换会保留，但运营控件和遥测不会连接真实系统。
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。登录后会保留你的网址。