返回 Gallery

克隆对比

Fieldnote Assistant · 长对话 DESIGN.md

一个长内容助手工作区，包含对话历史、证据卡片，以及随内容增长仍保持可用的输入区。

更新于：

这个示例展示了什么

  • 长对话
  • 证据面板
  • 固定输入框

DESIGN.md

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

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

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

基础样式

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

颜色

16
Action Background
#17181b
Action Background Dark
#f4f6f8
Action Foreground
rgb(255, 255, 255)
Action Foreground Dark
#f4f6f8
Control Background
#ffffff
Control Background Dark
#191c22
Surface Canvas
#f7f7f8
Surface Canvas Dark
#111318
Surface Raised
#ffffff
Surface Raised Dark
#191c22
Surface Raised Foreground
#747780
Surface Raised Foreground Dark
#9ca3af
Text Body
#17181b
Text Body Dark
#f4f6f8
Accent 1
#087cf0
Accent 2
#55a7ff

字体

4
Body
fontSize: 14px

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Display
fontSize: 18px

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Body Text
fontSize: 14pxlineHeight: 1.65

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

H2
fontSize: 18pxlineHeight: 1.65

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

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

文字与背景颜色

1
PatternGuidance
PageUse color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`.

各区域的排版

5
PatternGuidance
Level 1 headingUse font-size `18px`; margin `0px`. When dark mode, use background `#191c22`.
Level 2 headingObserved alternatives: - Use font-size `14px`. When dark mode, use background `#191c22`. - Use font-size `18px`; line-height `1.65`; margin `0px 0px 10px`. When dark mode, use background `#111318`.
PageUse font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
ParagraphUse line-height `1.65`; margin `0px 0px 12px`. Observed alternatives: - When dark mode, use background `#111318`. - When dark mode, use background `#242831`.
Strong textObserved alternatives: - Use color `inherit`. When dark mode, use background `#191c22`. - Use color `inherit`. When dark mode, use background `#242831`. - Use display `block`; margin-bottom `5px`. When dark mode, use background `#191c22`. - Use line-height `1.65`. When dark mode, use background `#111318`. - Use line-height `1.65`. When dark mode, use background `#242831`.

间距

3
Step 1
12px
Step 2
20px
Step 3
28px

圆角

5
Step 1
9px
Step 2
10px
Step 3
11px
Step 4
12px
Step 5
14px

阴影

2
rgba(0, 0, 0, 0.2) 0px 8px 24px
rgba(25, 29, 41, 0.125) 0px 12px 35px

布局与响应式

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

PatternGuidance
ArticleObserved alternatives: - Use border `1px solid #e3e4e8`; border-radius `10px`; margin-top `10px`; padding `12px`. - Use display `grid`; gap `12px`; grid-template-columns `36px minmax(0px, 1fr)`; margin-bottom `28px`.
Complementary contentUse background `#fff`; padding `18px 14px`. When dark mode, use background `#191c22`. Observed alternatives: - Use border-left `1px solid #e3e4e8`; border-right `0px`. When viewport width <= 900px, use display `none`. - Use border-right `1px solid #e3e4e8`.
Flex containerUse display `flex`. Observed alternatives: - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; line-height `1.65`. - Use justify-content `space-between`.
Grid containerUse display `grid`; grid-template-columns `220px minmax(0px, 1fr) 292px`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
HeaderUse background `#fff`; border-bottom `1px solid #e3e4e8`; padding `16px 24px`. When dark mode, use background `#191c22`.
Main contentUse display `grid`; grid-template-rows `auto 1fr auto`; height `100vh`; min-width `0px`. When viewport width <= 900px, use height `100vh`.
NavigationUse display `grid`; gap `5px`; margin-top `20px`.
Page rootUse margin `0px`; min-height `100%`.
PageUse margin `0`; min-height `100%`.
SectionUse overflow `auto`; padding `28px max(24px, 8vw)`. When viewport width <= 900px, use padding `22px 18px`.

组件与状态

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

组件

1

Form

rounded
{rounded.step-5}
padding
10px
PatternGuidance
ButtonUse font `inherit`. Observed alternatives: - Use background `#087cf0`; border `0px`; border-radius `10px`; color `white`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 14px`. When dark mode, use background `#55a7ff`. - Use background `#17181b`; border `0px`; border-radius `11px`; color `rgb(255, 255, 255)`; font-weight `750`; margin `18px 0px`; padding `11px`; width `100%`. When dark mode, use background `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; color `#17181b`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 12px`. When dark mode, use background `#242831`; color `#f4f6f8`. - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `999px`; bottom `14px`; box-shadow `rgba(0, 0, 0, 0.2) 0px 8px 24px`; color `#17181b`; display `grid`; height `36px`; place-items `center`; position `fixed`; right `14px`; width `36px`; z-index `20`. When dark mode, use background `#191c22`; color `#f4f6f8`.
FormUse background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(25, 29, 41, 0.125) 0px 12px 35px`; margin `0px max(20px, 8vw) 22px`; padding `10px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use margin `0px 16px 16px`.
Multiline inputUse background `#fff`; border `0px`; color `#17181b`; display `block`; font `inherit`; min-height `62px`; width `100%`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Navigation linkUse border-radius `9px`; color `inherit`; display `grid`; gap `3px`; padding `10px`. Observed alternatives: - Use only the common rules above. - Use background `#f1f2f4`. When dark mode, use background `#242831`.

包含的内容

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

未能捕获的内容

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
  • Some combinations of layout, theme and interaction states could not be established from this capture.
  • Some conditional styles are not described because their affected elements could not be established.
  • 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`; grid-template-columns `220px minmax(0px, 1fr) 292px`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
  • Article: Observed alternatives: - Use border `1px solid #e3e4e8`; border-radius `10px`; margin-top `10px`; padding `12px`. - Use display `grid`; gap `12px`; grid-template-columns `36px minmax(0px, 1fr)`; margin-bottom `28px`.
  • Level 1 heading: Use font-size `18px`; margin `0px`. When dark mode, use background `#191c22`.
  • Form: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(25, 29, 41, 0.125) 0px 12px 35px`; margin `0px max(20px, 8vw) 22px`; padding `10px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use margin `0px 16px 16px`.
  • Action Background: #17181b
  • Spacing: 12px · 20px · 28px

用同样的流程开始开发

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

继续浏览 Gallery

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

提取你自己的网页

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