克隆对比
Workshop Manual · 技术版式 DESIGN.md
一个蓝图风格的技术手册，包含编号步骤、CSS 图示和响应式参考面板。
更新于：
这个示例展示了什么
- 技术版式
- CSS 图纸
- 响应式步骤
程序化重建
直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。
完整页面资源
保留布局、变量与资源，生成安全静态预览。
响应式布局
亮暗主题
切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。
还原难点
当页面变窄时，高密度说明内容仍要保持步骤顺序、图示标签和交叉引用清晰。
使用边界
操作步骤为虚构内容，不能作为真实操作说明。真实技术内容和打印效果需要单独验证。
DESIGN.md
从同一次捕获中提取的设计事实
下载 DESIGN.md- Header: Use border `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
- Flex container: Use display `flex`; font-family `Arial,sans-serif`; gap `35px`; padding `20px 0`; text-transform `uppercase`. When viewport width <= 700px, use flex-wrap `wrap`; gap `10px 25px`.
- Level 1 heading: Use font-family `Arial,sans-serif`; font-size `clamp(44px,7vw,100px)`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; letter-spacing `-.06em`; line-height `0.9`; margin `15px 0`. When viewport width <= 700px, use font-size `56px`.
- Rounded surface: Use border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.
- Surface Canvas: #0647a7
- Spacing: 12px · 14px · 24px
用同样的流程开始开发
把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。
继续浏览 Gallery
提取你自己的网页
输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。