返回 Gallery

克隆对比

Workshop Manual · 技术版式 DESIGN.md

一个蓝图风格的技术手册，包含编号步骤、CSS 图示和响应式参考面板。

更新于：

这个示例展示了什么

  • 技术版式
  • CSS 图纸
  • 响应式步骤

DESIGN.md

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

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

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

基础样式

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

颜色

2
Surface Canvas
#0647a7
Text Body
#edf5ff

字体

5
Body
fontSize: 14pxlineHeight: 1.5

沿用页面本身的设计语言

'Courier New',monospace

Display
fontWeight: 700lineHeight: 0.9letterSpacing: -.06em

沿用页面本身的设计语言

Arial,sans-serif

H2
fontSize: 22pxfontWeight: 700

沿用页面本身的设计语言

Arial,sans-serif

Body Text
fontSize: 14pxlineHeight: 1.5

沿用页面本身的设计语言

Arial,sans-serif

Body Text 2
fontSize: 18pxlineHeight: 1.5

沿用页面本身的设计语言

Arial,sans-serif

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

文字与背景颜色

1
PatternGuidance
PageUse color `#edf5ff`.

各区域的排版

4
PatternGuidance
Level 1 headingUse font-family `Arial,sans-serif`; font-size `clamp(44px,7vw,100px)`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; letter-spacing `-.06em`; line-height `0.9`; margin `15px 0`. When viewport width <= 700px, use font-size `56px`.
Level 2 headingUse font-family `Arial,sans-serif`; font-size `22px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; line-height `normal`.
PageUse font-family `'Courier New',monospace`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.5`.
ParagraphUse font-family `Arial,sans-serif`. Observed alternatives: - Use only the common rules above. - Use font-size `18px`; max-width `44ch`.

间距

3
Step 1
12px
Step 2
14px
Step 3
24px

布局与响应式

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

PatternGuidance
ArticleUse min-height `210px`; padding `24px`. When viewport width <= 700px, use border-bottom `2px solid`. Observed alternatives: - Use border-right `2px solid`; font-family `Arial,sans-serif`. - When last sibling, use border `0`; border-right `2px solid`; color `#edf5ff`; font-family `Arial,sans-serif`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.5`; min-height `210px`; padding `24px`.
Flex containerUse display `flex`; font-family `Arial,sans-serif`; gap `35px`; padding `20px 0`; text-transform `uppercase`. When viewport width <= 700px, use flex-wrap `wrap`; gap `10px 25px`.
HeaderUse border `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
Main contentUse font-family `Arial,sans-serif`; min-height `100vh`; padding `22px 3vw`.
PageUse margin `0`.
SectionUse border `2px solid`; border-top `0`; display `grid`; font-family `Arial,sans-serif`. Observed alternatives: - Use grid-template-columns `1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr`. - Use grid-template-columns `repeat(4,1fr)`. When viewport width <= 700px, use grid-template-columns `1fr 1fr`.

组件与状态

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

组件

1

Rounded Surface

rounded
50%
PatternGuidance
Rounded surfaceUse border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.

包含的内容

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

未能捕获的内容

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background 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 border `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
  • Flex container: Use display `flex`; font-family `Arial,sans-serif`; gap `35px`; padding `20px 0`; text-transform `uppercase`. When viewport width <= 700px, use flex-wrap `wrap`; gap `10px 25px`.
  • Level 1 heading: Use font-family `Arial,sans-serif`; font-size `clamp(44px,7vw,100px)`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; letter-spacing `-.06em`; line-height `0.9`; margin `15px 0`. When viewport width <= 700px, use font-size `56px`.
  • Rounded surface: Use border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.
  • Surface Canvas: #0647a7
  • Spacing: 12px · 14px · 24px

用同样的流程开始开发

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

继续浏览 Gallery

Orbit Desk一个太空运营控制台，包含明暗主题、密集系统读数，以及在小屏上自然收拢的导航。Atlas Dispatch一个高密度调度看板，包含状态卡片、运营表格、克制的颜色角色和紧凑的响应式导航。

提取你自己的网页

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