返回 Gallery

克隆对比

Block Assembly · 非对称网格 DESIGN.md

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

更新于：

这个示例展示了什么

  • 非对称网格
  • 原色系统
  • 移动端重排

DESIGN.md

从当前预览对应的同一个页面中提取出的设计规则。

YAML 保存准确的设计值 · Markdown 说明这些值如何使用

查看 Google Labs 格式规范
颜色2
字体8
布局与响应式7
组件0

基础样式

查看这份文件记录的颜色、排版层级、间距、圆角和阴影。

颜色

2
Surface Canvas
#f4f1e8
Surface Raised
#111111

字体

3
Body

沿用页面本身的设计语言

Arial,sans-serif

H2
fontSize: 34pxlineHeight: 1

沿用页面本身的设计语言

Arial,sans-serif

Body Text
fontSize: 20px

沿用页面本身的设计语言

Arial,sans-serif

样字使用浏览器可用的字体，准确数值保留在文件中。

文字与背景颜色

1
PatternGuidance
PageUse background `#f4f1e8`; color `#111`.

各区域的排版

5
PatternGuidance
Emphasized textUse font-size `12px`. Observed alternatives: - Use background `#f4f1e8`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`; font-size `12px`.
Level 1 headingUse 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`.
Level 2 headingUse 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`.
PageUse font-family `Arial,sans-serif`.
ParagraphObserved alternatives: - Use background `#f4f1e8`. - Use background `#f4f1e8`; font-size `20px`; max-width `34ch`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`.

间距

3
Step 1
14px
Step 2
22px
Step 3
28px

布局与响应式

只有 DESIGN.md 中存在对应证据时，这里才会显示布局和视口规则。

PatternGuidance
ArticleUse min-height `230px`; padding `28px`. When viewport width <= 700px, use border-bottom `6px solid`; min-height `180px`. Observed alternatives: - Use border-right `10px solid`. When viewport width <= 700px, use border `0`. - When last sibling, use border `0`; border-right `10px solid`; color `#111`; font-family `Arial,sans-serif`; min-height `230px`; padding `28px`. - When sibling position 2, use background `#111`; border-right `10px solid`; color `#fff`; font-family `Arial,sans-serif`; min-height `230px`; padding `28px`. When viewport width <= 700px, use border `0`.
Column containerUse border-right `10px solid`; display `flex`; flex-direction `column`; justify-content `space-between`; padding `5vw`. When viewport width <= 700px, use border `0`; border-bottom `6px solid`; min-height `430px`.
Grid containerUse display `grid`. Observed alternatives: - Use grid-template-columns `1fr 2fr`. - Use grid-template-rows `1fr 1.2fr`. When viewport width <= 700px, use height `260px`.
HeaderUse 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`.
Main contentUse min-height `100vh`.
PageUse margin `0`.
SectionUse display `grid`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use grid-template-columns `1fr 1fr 1fr`. - Use grid-template-columns `2fr 1fr`; min-height `500px`.

组件与状态

组件事实汇总同一次页面捕获中可追溯的属性和状态。

这份 DESIGN.md 尚未包含组件事实。

包含的内容

查看这份文件已经记录了哪些网站风格。

未能捕获的内容

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height value.
  • Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.

还原难点

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

使用边界

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

DESIGN.md

从同一次捕获中提取的设计事实

下载 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 交给编程工具继续修改。下方指南介绍了具体步骤。

继续浏览 Gallery

North Index一个研究刊物页面，重点是严谨网格、舒适阅读宽度和流式字体，而不是 Dashboard 控件。Relay Mailroom一个三栏邮件工作区，在文件夹导航、邮件浏览和专注阅读之间保持平衡。

提取你自己的网页

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