返回 Gallery

克隆对比

North Index · 编辑网格 DESIGN.md

一个研究刊物页面，重点是严谨网格、舒适阅读宽度和流式字体，而不是 Dashboard 控件。

更新于：

这个示例展示了什么

  • 编辑网格
  • 流式字体
  • 移动版式

DESIGN.md

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

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

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

基础样式

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

颜色

3
Border Default
#e33b2e
Surface Canvas
#f3f1eb
Text Body
#111111

字体

4
Body
fontSize: 15pxlineHeight: 1.4

沿用页面本身的设计语言

Arial,sans-serif

Display
lineHeight: .82letterSpacing: -.075em

沿用页面本身的设计语言

Arial,sans-serif

Body Text
fontSize: 11pxlineHeight: 1.4letterSpacing: .1em

沿用页面本身的设计语言

Arial,sans-serif

Body Text 2
fontSize: 20pxlineHeight: 1.4

沿用页面本身的设计语言

Arial,sans-serif

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

文字与背景颜色

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

各区域的排版

4
PatternGuidance
Level 1 headingUse 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`.
Level 2 headingUse background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`.
PageUse font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`.
ParagraphUse background `#f3f1eb`; font-family `Arial,sans-serif`. Observed alternatives: - Use only the common rules above. - Use font-size `11px`; letter-spacing `.1em`; text-transform `uppercase`. - Use font-size `20px`; max-width `52ch`.

布局与响应式

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

PatternGuidance
ArticleUse padding-top `16px`. Observed alternatives: - Use border-top `6px solid`; font-family `Arial,sans-serif`. - When sibling position 2, use border-color `#e33b2e`; border-top `6px solid`; color `#111`; font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`; padding-top `16px`.
Flex containerUse border-top `1px solid`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; padding `14px 0`.
Grid containerUse align-content `end`; display `grid`; font-family `Arial,sans-serif`.
HeaderUse 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`.
Main contentUse font-family `Arial,sans-serif`; min-height `100vh`; padding `24px 4vw`.
NavigationUse display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`.
PageUse margin `0`.
SectionUse display `grid`; font-family `Arial,sans-serif`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use border-bottom `1px solid #bbb8b0`; gap `5vw`; grid-template-columns `1.55fr .75fr`; padding `70px 0`. When viewport width <= 700px, use padding `40px 0`. - Use gap `24px`; grid-template-columns `2fr 1fr 1fr`; padding `30px 0`.

组件与状态

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

这份 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
  • 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

Block Assembly一个由非对称色块、锐利几何、原色和非常规阅读路径构成的工作室作品集。Orbit Desk一个太空运营控制台，包含明暗主题、密集系统读数，以及在小屏上自然收拢的导航。

提取你自己的网页

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