克隆对比

Fieldnote Assistant · 长对话 DESIGN.md

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

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

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

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

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

克隆需要在内容很长的页面中保留合适的阅读宽度、证据层级和固定输入区行为。

助手不会真实生成回复，引用材料也是示例内容。请自行接入模型、流式状态和来源验证。

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

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