dryui-build

DryUI Full Page: Density First

Build a finished DryUI app page from the design image. Treat the reference as an operational product screen, not a landing page.

Experiment Harness Rule

Run bun run build before finishing. Do not run bun run dev, bun run check, or a long-running screenshot/browser server during the agent step; the experiment harness performs browser capture and visual scoring after you finish.

Edit only src/routes/+page.svelte, src/layout.css, and src/app.css if needed.

Non-Negotiables

• The page must feel like a usable app screen on the first viewport.
• No landing hero, marketing copy, decorative gradients, or oversized editorial cards.
• Desktop must use the canvas. A 1440px viewport should not show a tiny app mockup with blank space around it.
• Mobile must be intentionally summarized. Do not stack every desktop cell or row if it creates a wasteful scroll dump.
• Match whether the reference has gutters. If panes touch, set shell or nested gap: 0; if separated, use DryUI space tokens.

Three Passes

1. Structure: identify shell areas, primary task, mobile order, tablet grouping, and desktop panes.
2. Components: implement a real page using DryUI components and compact static content.
3. Repair: build, check 390/820/1440, then fix density, contrast, overflow, and whitespace.

DryUI Component Set

Use this safe component set:

• Button for commands and icon buttons.
• Input for search/filter fields.
• Badge for statuses and compact metadata.
• Table for tabular CRM or activity rows.
• Tabs for modes or grouped sections.
• Separator for dense panel separation.

Avoid uncertain APIs. Use static layout blocks for charts, boards, timelines, and document previews.

Shell Contract

Use one shell:

<main data-layout="<type>-shell">
	<div data-layout-area="page">
		<header data-layout-area="topbar">...</header>
		<nav data-layout-area="navigation">...</nav>
		<section data-layout-area="primary">...</section>
		<aside data-layout-area="secondary">...</aside>
	</div>
</main>