Scoutbay

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.

• Source Sans 3Headings: Source Sans 3 700, 28px H1; 22px card titles (700)
• Source Sans 3Body: Source Sans 3 400, 16px body; 20px card subtitles (600, muted) at 1.4; 15px nav

Patterns

• global top nav with wide search field
• persona filter chips (Explorer, App builder, Engineer, Researcher)
• masonry grid of large soft-grey cards
• isometric monochrome illustrations per card
• corner arrow icon for outbound cards
• NEW badge in nav
• "Skip to feed" pill button
• bold title + muted two-line subtitle per card

States it is designed for

• Default (no persona)
• Persona selected (cards filtered, chip pressed)
• Search suggestions loading / no matches
• Illustration failed (card shows icon fallback)
• Returning user who skipped (redirect to feed)
• Offline banner

Who it is for

• ML engineers and researchers
• App builders exploring open models
• Curious newcomers to open AI tooling

Layout

1. Top nav: logo + wordmark; search field "Search models, datasets, users…"; links (Models, Datasets, Apps, Buckets NEW, Docs, Pricing); menu; avatar
2. Main (max ~620-900px centered): H1 welcome left, "Skip to feed →" pill right
3. Persona chips row
4. Three-column masonry of cards with varying heights: illustration top, title, muted subtitle, arrow top-right
5. Tablet: 2 columns; Mobile: 1 column, chips scroll horizontally, search collapses to icon

Palette

open, playful, geeky, welcoming. A tidy museum of tools with toy-like illustrations.

• page background#ffffff
• destination card#f5f6f8
• card hover#eceef2
• titles and body#0b0f19
• card subtitles#656c79
• persona chip fill#eef0f3
• search and pill outline#8a909b
• NEW badge fill#e0e7ff
• NEW badge text#3730a3
• focus ring#2563eb

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

Source Sans 3 700, 28px H1; 22px card titles (700)

Body

Source Sans 3 400, 16px body; 20px card subtitles (600, muted) at 1.4; 15px nav

Similar to the observed humanist sans. NEW badge 12px 700 uppercase with 0.06em tracking.

Spacing and imagery

Generous: 8px base; 16px grid gap; card padding 24px; radius 12px cards, 8px chips, full pill for Skip; no shadows; hover changes fill only.

Isometric black-and-white illustrations (ferris wheel, terminal, newspaper, storage box, chat bubble with face) drawn fresh; no photos; a friendly emoji-style logo mark.

Components

• Top nav with search and NEW badge
• Welcome header with Skip pill
• Persona chip group (single-select, toggle off)
• Destination card (illustration, title, subtitle, arrow)
• Masonry grid
• Avatar menu

Interactions

• Persona chip filters and reorders cards with a 200ms layout animation
• Cards are whole-area links; arrow nudges up-right on hover
• Search field focus expands width and opens suggestions (models, datasets, users)
• Keyboard "/" focuses search
• Skip to feed remembers preference and lands on feed next time

Data

• Destination{id, title, subtitle, href, illustration_key, personas[] (explorer|builder|engineer|researcher), order}
• UserPrefs{user_id, persona, skip_welcome bool}
• SearchSuggestion{type (model|dataset|user|app), id, label}

Guardrails

Experience

• Limit personas to four and allow deselecting to see everything
• Every card states what it is and why to go there in under eight words
• Keep Skip to feed visible above the fold
• Search suggestions group by type with clear labels
• Masonry order should read left-to-right by priority on all breakpoints

Accessibility

• Persona chips are a toggle group with aria-pressed
• Cards are single links with accessible names from title + subtitle; arrow icon aria-hidden
• Grid order in DOM matches visual reading order (use CSS columns carefully or JS masonry that preserves order)
• Illustrations decorative (alt="")
• Search has a visible label or aria-label and combobox semantics

Security

• Search endpoint rate-limited and parameterised; escape highlighted matches
• Prefs row writable only by its owner (RLS)
• External destinations open with rel="noopener noreferrer"

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 **Scoutbay**, the welcome page of an open AI model community hub. A signed-in user lands on a friendly page with persona chips and a masonry grid of large illustrated cards that point to the main destinations: models, the community apps directory, a command-line tool, daily papers, open-source libraries and a chat assistant.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui (ToggleGroup, Command for search suggestions, DropdownMenu) on Radix, lucide-react, Motion for layout animations, TanStack Query. Supabase for auth and user preferences.

### Pages & layout
1. **Top nav**: invented smiley logo mark and wordmark; a 240px search field with placeholder "Search models, datasets, people…"; links Models, Datasets, Apps, Buckets (with NEW badge), Docs, Pricing; menu; avatar.
2. **Header**: H1 "Welcome aboard" on the left, a "Skip to feed →" outlined pill on the right.
3. **Persona chips**: Explorer, App builder, Engineer, Researcher.
4. **Grid**: three-column masonry of soft-grey cards of varied height, each with an isometric illustration, bold title, muted two-line subtitle and an arrow in the top-right corner. Example cards: "Apps", "Terminal tool", "Models", "Daily papers", "Libraries", "Chat".
5. Tablet two columns; mobile one column, chips scroll horizontally, and search collapses to an icon that opens a full-width sheet.

### Design system
- Colors: `--bg: #ffffff` (page background), `--card: #f5f6f8` (destination card), `--card-hover: #eceef2` (card hover), `--fg: #0b0f19` (titles and body), `--muted: #656c79` (card subtitles), `--chip: #eef0f3` (persona chip fill), `--input-border: #8a909b` (search and pill outline), `--badge-bg: #e0e7ff` (NEW badge fill), `--badge-fg: #3730a3` (NEW badge text), `--focus: #2563eb` (focus ring).
- Fonts: Source Sans 3 (similar to the observed humanist sans): H1 28px/700; card titles 22px/700; subtitles 20px/600 muted at line-height 1.4; body 16px/1.5; nav 15px; badge 12px/700 uppercase, 0.06em tracking.
- Spacing: 8px scale; 16px grid gap; 24px card padding; 32px header spacing.
- Radius: 12px cards; 8px chips; full pill for Skip and search.
- Shadows: none; hover changes card fill.
- Motion: 200ms layout animation on filter; 150ms arrow nudge; none under reduced motion.

### Components & interactions
TopNav, SearchCombobox (press "/" to focus; grouped suggestions for models, datasets, people and apps; loading and empty states), NewBadge, WelcomeHeader, SkipPill (stores `skip_welcome` and routes to feed), PersonaChips (single select, click again to clear), DestinationCard (whole-card link, illustration with icon fallback), MasonryGrid (keeps DOM order equal to reading order).

### Data & state
`destinations` is a typed static config (title, subtitle, href, illustration key, personas, order). Table `user_prefs(user_id, persona, skip_welcome)`. Search suggestions come from a mock endpoint returning invented model and dataset names. Handle states: default, persona filtered, suggestions loading/empty, illustration failed, returning user redirect, offline.

### Accessibility
Chips use aria-pressed. Each card is one link whose name combines title and subtitle; illustrations and arrows are hidden from assistive tech. Keep DOM order equal to visual order in every breakpoint. The search is a labelled combobox. Focus ring: 2px blue with offset, visible on grey cards.
Verified contrast: body text: #0b0f19 on #ffffff = 19.15:1; card title on card: #0b0f19 on #f5f6f8 = 17.71:1; muted subtitle on card: #656c79 on #f5f6f8 = 4.89:1; chip label on chip: #0b0f19 on #eef0f3 = 16.77:1; NEW badge: #3730a3 on #e0e7ff = 8.06:1; search border: #8a909b on #ffffff = 3.21:1; focus ring: #2563eb on #ffffff = 5.17:1; muted subtitle on hover fill: #656c79 on #eceef2 = 4.55:1.

### Security
Rate-limit and parameterise the search endpoint; escape highlighted match text. RLS on `user_prefs`: the owner selects and updates only their row. Outbound links use `rel="noopener noreferrer"`.

### Performance & SEO
Serve illustrations as optimised SVG or AVIF with fixed aspect ratios to avoid layout shift. Server-render the grid. The page is behind auth and noindex; the public variant can reuse the same components with metadata.

### Guardrails
- Draw original illustrations; invented logo and names; no real model names.
- Subtitles stay under eight words.
- Acceptance criteria: (1) persona chips filter and clear; (2) "/" focuses search and suggestions group by type; (3) Skip persists; (4) grid reading order is correct at all breakpoints; (5) all states and contrast pairs pass.

Open the builderAll templatesThis palette on its own