克隆对比

Range Field Guide · Bento 布局 DESIGN.md

一个使用 Bento 网格组织内容的野外指南，包含实用信息块、环境色提示和可选暗色主题。

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

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

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

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

不同尺寸的卡片在宽屏上要维持稳定层级，在单列布局中也要形成自然顺序。

指南和环境信息仅作展示，不构成安全建议。真实野外产品需要经过核实的数据、离线能力和位置状态。

DESIGN.md

Section: Use color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.
Main content: Use background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
Strong text: Use color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.
Checkbox: Use color `#172019`; font `inherit`; font-family `Arial,sans-serif`.
Surface Canvas: #f2f4ef
Level 1 heading: Use background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.

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

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