克隆对比
North Index · 编辑网格 DESIGN.md
一个研究刊物页面，重点是严谨网格、舒适阅读宽度和流式字体，而不是 Dashboard 控件。
更新于：
这个示例展示了什么
- 编辑网格
- 流式字体
- 移动版式
程序化重建
直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。
完整页面资源
保留布局、变量与资源，生成安全静态预览。
响应式布局
亮暗主题
切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。
还原难点
当多栏布局随断点收拢时，页面仍需保留编辑节奏和非对称重点。
使用边界
文章内容和引用仅作展示。请替换为经过审核的内容，并加入项目需要的发布流程。
DESIGN.md
从同一次捕获中提取的设计事实
下载 DESIGN.md- Header: Use align-items `end`; border-bottom `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `1fr 2fr auto`; padding-bottom `18px`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
- Navigation: Use display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`.
- Level 1 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(54px,8vw,128px)`; letter-spacing `-.075em`; line-height `.82`; margin `18px 0`. When viewport width <= 700px, use font-size `58px`.
- Border Default: #e33b2e
- Level 2 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`.
- Page: Use font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`.
用同样的流程开始开发
把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。
继续浏览 Gallery
提取你自己的网页
输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。