Back to Gallery

Clone comparison

Fieldnote Assistant · Long-form chat DESIGN.md

A long-form assistant workspace with conversation history, evidence cards, and a composer that stays available as the transcript grows.

Updated:

What this example demonstrates

  • Long-form chat
  • Evidence panels
  • Sticky composer

Code-driven rebuild

Reads the page structure and CSS directly, then builds a clean Tailwind CSS v4 project.

Complete page assets

Keeps layouts, variables, and assets in a safe static preview.

Responsive layouts

Light and dark themes

Change the device width or theme and both previews show the same state. Webpages scroll together, while each HTML pane scrolls on its own.

Recreation challenge

The clone has to preserve readable measure, evidence hierarchy, and sticky composer behavior across a tall, content-heavy page.

Limits of this example

The assistant does not generate responses and cited material is sample content. Connect your own model, streaming states, and source validation.

DESIGN.md

Design facts from the same capture

Download 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

Use this workflow for your own page

Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.

More from Gallery

Atlas DispatchA dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.Orbit DeskA space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.

Extract your own webpage

Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.