Pagetide

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 500, 28px/1.25, -0.02em
• InterBody: Inter 400 16px/1.5

Patterns

• persistent left sidebar with grouped nav
• workspace switcher in top-left
• credit balance counter top-right
• centred empty state with primary and secondary actions
• limit line with upgrade link
• large faint isometric illustration
• plan upsell card pinned to sidebar bottom
• floating support pill

States it is designed for

• empty (no batches)
• batches present (table of batches with status, URL count, progress, created)
• dialog validation: invalid URLs listed inline
• out of credits (Create disabled with explanation)
• concurrency reached (new batch queued with notice)
• loading skeleton for credits and list
• API error with retry

Who it is for

• developers building data pipelines
• AI engineers collecting training or retrieval data
• growth engineers

Layout

1. top bar: workspace switcher ('Home' with chevrons) and search icon left; credit balance with small icon right
2. left sidebar (~200px): Overview, then 'Products' label (Data APIs with submenu, Monitors, Batches active, a fourth API), 'Workspace' label (API keys, Usage, Team); bottom: free-plan card with Upgrade button, Help, Documentation, account row
3. main: empty state centred at ~40% height: 28px heading, two-line description, button pair, concurrency line with link
4. under it a large pale isometric stacked-layers illustration fading off the bottom
5. floating 'Support' pill bottom-right
6. mobile: sidebar becomes a drawer; illustration hidden below 480px

Palette

Clean, quiet, developer-grade; grey canvas with a single confident blue.

• app background#f7f7f7
• active nav fill#e8e9eb
• primary text#18181b
• secondary text#52525b
• section label#63636b
• primary button#1d6fd8
• link text#1a67cc
• secondary button border#8d8d95
• illustration#ffffff
• support pill#3b82f6

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 500, 28px/1.25, -0.02em

Body

Inter 400 16px/1.5

Sidebar 14px 500; section labels 12px uppercase 500 with 0.06em tracking inside a thin outlined tag; credit counter tabular numerals.

Spacing and imagery

Compact sidebar (32px rows, 8px radius active pill), relaxed main. Buttons 32px tall, 8px radius; primary has a subtle inner highlight. Upsell card 12px radius with 1px border and a faint shadow.

One oversized isometric outline of stacked layers in white on the grey canvas, soft glow, purely decorative. Line icons (lucide style) in the sidebar and buttons.

Components

• TopBar (WorkspaceSwitcher, SearchButton, CreditCounter)
• Sidebar with SectionLabel tags
• UpsellCard
• EmptyState (heading, text, actions, limit line)
• IsometricIllustration
• SupportPill
• CreateBatchDialog

Interactions

• Create batch opens a dialog: paste URLs (one per line) or enter a start URL to crawl, pick output format (Markdown or HTML)
• Read docs opens in a new tab with an external-link icon
• Increase limit opens the plans page with the concurrency row highlighted
• workspace switcher opens a command-style menu
• sidebar items show hover fill and keyboard focus ring
• Support pill opens a help panel

Data

• Workspace{id, name, plan (free|pro|scale), credits int, batch_concurrency int}
• Batch{id, workspace_id, mode (list|crawl), format (markdown|html), url_count, status (queued|running|done|failed), created_by, created_at}
• BatchItem{id, batch_id, url, status, bytes, error}

Guardrails

Experience

• Explain the feature in one sentence and name both modes (list and crawl).
• Show the relevant limit right beside the primary action, with the upgrade path inline.
• Keep the illustration below the fold of attention; it must not compete with the buttons.
• Surface credit balance globally so users know the cost before running a batch.
• After creating the first batch, replace the empty state with the table immediately and highlight the new row.

Accessibility

• Sidebar is a nav landmark with aria-current on Batches; section tags are headings for screen readers.
• Illustration is aria-hidden and has no focusable parts.
• Buttons have icon + text; icons are aria-hidden.
• Credit counter has an accessible name ('967 credits remaining').
• Dialog traps focus, restores it to Create batch on close, and closes on Escape.

Security

• Validate and normalise URLs server-side; reject private IP ranges and non-http(s) schemes to prevent SSRF.
• Cap URLs per batch by plan and rate-limit batch creation.
• RLS: batches and items scoped to workspace members; only admins change plan.
• Never expose API keys on this page; link to the keys page instead.

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Pagetide**, a developer console for a web-scraping API, focused on the Batches page in its empty and first-use states. The page must teach what a batch is, show the plan's concurrency and credits, and let the user create a list or crawl batch without leaving the page.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Tabs, Textarea, DropdownMenu, Table), lucide-react, TanStack Query and Table, react-hook-form + zod, date-fns. Supabase Auth, Postgres, and an Edge Function that validates and enqueues batches.

### Pages & layout
1. **Console shell**: top bar, grouped sidebar, upsell card.
2. **/batches**: empty state (this screen) or batches table.
3. **Create batch dialog**: tabs 'URL list' and 'Crawl a site', format select, estimated credit cost.
4. **/batches/:id**: progress and item list.
5. Responsive: sidebar collapses to a drawer <1024px.

### Design system
- Colors: `--bg: #f7f7f7` (app background), `--nav-active: #e8e9eb` (active nav fill), `--fg: #18181b` (primary text), `--muted: #52525b` (secondary text), `--label: #63636b` (section label), `--primary: #1d6fd8` (primary button), `--link: #1a67cc` (link text), `--outline: #8d8d95` (secondary button border), `--art: #ffffff` (illustration), `--pill: #3b82f6` (support pill).
- Fonts: Inter 500, 28px/1.25, -0.02em for headings; Inter 400 16px/1.5 for body. Sidebar 14px 500; section labels 12px uppercase 500 with 0.06em tracking inside a thin outlined tag; credit counter tabular numerals.
- Spacing: Compact sidebar (32px rows, 8px radius active pill), relaxed main. Buttons 32px tall, 8px radius; primary has a subtle inner highlight. Upsell card 12px radius with 1px border and a faint shadow.
- Radius: 8px buttons and nav pills, 12px cards and dialog.
- Shadows: upsell card and dialog only (0 8px 24px rgba(0,0,0,0.08)).
- Motion: 150ms hover fills; dialog 200ms scale-fade; illustration static.

### Components & interactions
TopBar, WorkspaceSwitcher, CreditCounter, Sidebar, SectionLabel, UpsellCard, EmptyState, IsometricIllustration (inline SVG drawn fresh), CreateBatchDialog, BatchesTable, SupportPill.

Interactions: Create batch opens a dialog: paste URLs (one per line) or enter a start URL to crawl, pick output format (Markdown or HTML); Read docs opens in a new tab with an external-link icon; Increase limit opens the plans page with the concurrency row highlighted; workspace switcher opens a command-style menu; sidebar items show hover fill and keyboard focus ring; Support pill opens a help panel.

States to build: empty (no batches); batches present (table of batches with status, URL count, progress, created); dialog validation: invalid URLs listed inline; out of credits (Create disabled with explanation); concurrency reached (new batch queued with notice); loading skeleton for credits and list; API error with retry.

### Data & state
Credits and concurrency come from the workspace row. Estimated cost = URL count × credits per page for the chosen format. Batch status updates poll every 5s while any batch is running. Seed a workspace with 967 credits and concurrency 1.

Model: `Workspace{id, name, plan (free|pro|scale), credits int, batch_concurrency int}`; `Batch{id, workspace_id, mode (list|crawl), format (markdown|html), url_count, status (queued|running|done|failed), created_by, created_at}`; `BatchItem{id, batch_id, url, status, bytes, error}`.

### Accessibility
Sidebar is a nav landmark with aria-current on Batches; section tags are headings for screen readers. Illustration is aria-hidden and has no focusable parts. Buttons have icon + text; icons are aria-hidden. Credit counter has an accessible name ('967 credits remaining'). Dialog traps focus, restores it to Create batch on close, and closes on Escape.
Verified contrast: body text: #18181b on #f7f7f7 = 16.54:1; muted description: #52525b on #f7f7f7 = 7.22:1; section label: #63636b on #f7f7f7 = 5.56:1; primary button label: #ffffff on #1d6fd8 = 4.86:1; link text: #1a67cc on #f7f7f7 = 5.08:1; secondary button border: #8d8d95 on #f7f7f7 = 3.07:1; active nav text: #18181b on #e8e9eb = 14.58:1.

### Security
Validate and normalise URLs server-side; reject private IP ranges and non-http(s) schemes to prevent SSRF. Cap URLs per batch by plan and rate-limit batch creation. RLS: batches and items scoped to workspace members; only admins change plan. Never expose API keys on this page; link to the keys page instead. RLS per table: `workspaces` select for members, update for admins; `batches` select/insert for members of `workspace_id`, no client updates to status; `batch_items` select for members, writes only by the service role worker.

### Performance & SEO
Lazy-load the dialog and table. The illustration is a single lightweight inline SVG. Console routes are noindex.

### Guardrails
- Explain the feature in one sentence and name both modes (list and crawl).
- Show the relevant limit right beside the primary action, with the upgrade path inline.
- Keep the illustration below the fold of attention; it must not compete with the buttons.
- Surface credit balance globally so users know the cost before running a batch.
- After creating the first batch, replace the empty state with the table immediately and highlight the new row.
- Write all copy fresh; use invented people, companies and numbers only. No real brands, logos, wordmarks or third-party product names anywhere in the UI or seed data.
- Do not trace or copy any existing product's layout assets, icons or illustrations; draw generic ones.
- Acceptance criteria:
  - [ ] Empty state shows heading, description, both actions and the concurrency line
  - [ ] Invalid or private-network URLs are rejected with inline errors
  - [ ] Creating a batch replaces the empty state with the table
  - [ ] Out-of-credit state disables Create with a reason
  - [ ] Sidebar, dialog and actions are fully keyboard operable

Open the builderAll templatesThis palette on its own