克隆对比

Block Assembly · 非对称网格 DESIGN.md

一个由非对称色块、锐利几何、原色和非常规阅读路径构成的工作室作品集。

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。

保留布局、变量与资源，生成安全静态预览。

切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。

页面特征依赖准确的比例和叠放关系。移动端重排要保留个性，又不能照搬桌面坐标。

项目名称和图片都是示例素材。替换内容后要仔细测试焦点顺序，因为视觉顺序可能和文档顺序不同。

DESIGN.md

Grid container: Use display `grid`. Observed alternatives: - Use grid-template-columns `1fr 2fr`. - Use grid-template-rows `1fr 1.2fr`. When viewport width <= 700px, use height `260px`.
Header: Use border-bottom `10px solid`; display `grid`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use border-width `6px`; grid-template-columns `1fr auto`.
Level 1 heading: Use background `#f4f1e8`; font-size `clamp(60px,10vw,150px)`; letter-spacing `-.08em`; line-height `.72`; margin `0`; max-width `7ch`. When viewport width <= 700px, use font-size `68px`.
Surface Canvas: #f4f1e8
Spacing: 14px · 22px · 28px
Level 2 heading: Use font-size `34px`; line-height `1`; margin `48px 0 10px`. When viewport width <= 700px, use margin-top `25px`. Observed alternatives: - Use background `#f4f1e8`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`; font-size `34px`; line-height `1`; margin `48px 0 10px`.

把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。

输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。