Silohouse

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.

• JetBrains MonoHeadings: Source Sans 3 700, 18px section titles; bucket name in JetBrains Mono 20px 600
• Source Sans 3Body: Source Sans 3 400 16px descriptions at 1.5; 15px region names (600); 13px region sublabels

Patterns

• resource header with owner / name breadcrumb and copy button
• Files / Settings tabs
• stacked settings sections inside one card, each with left icon and right-aligned action
• region toggle cards in two-column grid
• NEW badge on section title
• inline code chip for current value
• visibility select (Public / Private)
• per-section save button

States it is designed for

• No regions enabled
• Some regions enabled (pricing estimate line)
• Saving / saved / save failed
• Public vs private visibility
• No trusted publishers (empty text + Add)
• Plan does not include CDN (section locked with upgrade link)
• Viewer role (all controls disabled with reason)
• Delete bucket typed-confirmation

Who it is for

• ML engineers hosting model weights and datasets
• Organisation admins managing storage
• DevOps engineers wiring CI uploads

Layout

1. Global top nav with search and product links
2. Resource header: bucket icon, "Buckets:" label, owner / bucket name in mono, copy button; tabs Files (with storage-engine tag) and Settings (active)
3. Settings card (max ~770px): CDN pre-warming section (title + NEW, description, pricing note with link, 2x2 grid of region toggle cards, Save CDN settings button right)
4. Access control section (description with code chip, visibility select right)
5. Trusted publishers section (description, add publisher form, list)
6. Danger zone (delete bucket) at the end
7. Mobile: region grid single column; actions move below descriptions

Palette

technical, orderly, trustworthy, open. Infrastructure settings that stay approachable.

• page and card background#ffffff
• resource header band#f8f8fa
• primary text#111827
• descriptions, region sublabels#4b5563
• switch track off#8b919c
• switch track on, focus#2563eb
• inline code chip fill#f3f4f6
• NEW badge fill#f3e8ff
• NEW badge text#6b21a8
• section dividers (decorative)#e5e7eb
• delete action#b91c1c

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, 18px section titles; bucket name in JetBrains Mono 20px 600

Body

Source Sans 3 400 16px descriptions at 1.5; 15px region names (600); 13px region sublabels

Similar to the observed humanist sans plus a mono for identifiers. Badge 12px 700 uppercase with 0.06em tracking.

Spacing and imagery

Comfortable: 8px base; card padding 32px; sections separated by 1px dividers and 32px padding; region cards 56px tall with 12px padding; radius 12px card, 8px region cards and buttons; card shadow 0 1px 3px rgba(0,0,0,.06).

Generic cloud-provider glyphs replaced with neutral cloud/region icons (no vendor logos); outline section icons (paper plane, eye, lock).

Components

• Resource header with copy name
• Tabs
• Settings section (icon, title, badge, description, action)
• Region toggle card (switch, icon, region, location)
• Save button with dirty state
• Visibility select
• Code chip
• Trusted publisher form (provider, repository, workflow, environment)
• Publisher list with remove
• Delete bucket confirmation dialog

Interactions

• Toggling regions marks section dirty and enables Save
• Switching to Public shows a confirmation explaining anyone can download
• Copy bucket name shows "Copied" tooltip
• Add publisher validates repo format and shows the generated trust rule
• Unsaved changes prompt when leaving the tab

Data

• Bucket{id, owner_id, owner_type (user|org), name, visibility (public|private), bytes}
• CdnRegion{key, provider_label, area, location}
• BucketCdn{bucket_id, region_key, enabled}
• TrustedPublisher{id, bucket_id, provider (ci), repository, workflow, environment?, created_at}
• AuditEvent{id, bucket_id, actor_id, action, at}

Guardrails

Experience

• Each section saves independently and shows its own status
• State billing implications next to CDN toggles
• Explain public vs private in plain words with the current value visible
• Keep destructive delete at the bottom, separated
• Warn about unsaved changes before navigation

Accessibility

• Region cards are labels for their switches (whole card clickable) with role="switch"
• Section titles are h2; icons decorative
• Select has a visible label (visually hidden OK) and announces the change
• Off-state switch track meets 3:1 against the card
• Dialogs trap focus and name consequences

Security

• Only owners/org admins can change visibility, CDN or publishers (RLS + server check)
• Trusted publishers use short-lived OIDC-style tokens scoped to one bucket; validate repository/workflow strings
• Going public requires confirmation and is audit-logged
• Delete requires typed bucket name and re-authentication

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 **Silohouse**, the Settings tab of a storage bucket on a model and dataset hosting hub. Owners pick cloud regions to pre-warm on a CDN, set the bucket to public or private, and register trusted CI publishers that can upload without long-lived tokens.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui (Tabs, Switch, Select, Dialog, Form, Tooltip) on Radix, lucide-react, TanStack Query, react-hook-form + zod. Supabase for auth, buckets, settings and audit events.

### Pages & layout
1. **Global nav**: invented logo and wordmark, search, product links, avatar.
2. **Resource header** (light band): bucket icon, "Buckets:" label, owner avatar and name / bucket name in mono, copy button; tabs Files (with a small engine tag) and Settings (active).
3. **Settings card** (max 780px) with stacked sections separated by dividers:
   - **CDN pre-warming** (NEW badge): description, a pricing note with a "View pricing" link, a 2×2 grid of region cards (switch, neutral cloud icon, "Cloud A, US East" / "Carolina", "Cloud A, EU West" / "Netherlands", "Cloud B, US East" / "Virginia", "Cloud B, EU West" / "Ireland"), and "Save CDN settings" on the right.
   - **Access control**: "This bucket is currently `public`…" with a code chip; a Public/Private select on the right.
   - **Trusted publishers**: explanation, an add form (repository, workflow file, optional environment) and a list.
   - **Danger zone**: delete bucket.
4. Mobile: a single-column region grid; actions move under descriptions.

### Design system
- Colors: `--bg: #ffffff` (page and card background), `--header: #f8f8fa` (resource header band), `--fg: #111827` (primary text), `--muted: #4b5563` (descriptions, region sublabels), `--toggle-off: #8b919c` (switch track off), `--toggle-on: #2563eb` (switch track on, focus), `--code: #f3f4f6` (inline code chip fill), `--badge-bg: #f3e8ff` (NEW badge fill), `--badge-fg: #6b21a8` (NEW badge text), `--border: #e5e7eb` (section dividers (decorative)), `--danger: #b91c1c` (delete action).
- Fonts: Source Sans 3 (similar to the observed humanist sans): section titles 18px/700; body 16px/1.5; region names 15px/600; sublabels 13px. JetBrains Mono for bucket names and code chips. Badge 12px/700 uppercase, 0.06em tracking.
- Spacing: 8px scale; 32px card padding and section padding; 12px region card padding; 16px grid gap.
- Radius: 12px card; 8px region cards, buttons and select; 4px code chips.
- Shadows: card `0 1px 3px rgba(0,0,0,.06)`.
- Motion: 150ms switch; save button spinner.

### Components & interactions
ResourceHeader (copy with tooltip), ResourceTabs, SettingsSection (icon, title, badge, description, action slot, status line), RegionToggleCard (whole card toggles), SaveButton (disabled until dirty; saving, saved, failed), VisibilitySelect (switching to Public opens a confirmation), CodeChip, PublisherForm and PublisherList (remove with confirm), DeleteBucketDialog (type the bucket name), UnsavedChangesGuard.

### Data & state
Tables: `buckets(id, owner_id, owner_type, name, visibility, bytes)`, `bucket_cdn(bucket_id, region_key, enabled)`, `trusted_publishers(id, bucket_id, repository, workflow, environment, created_at)`, `audit_events`. Region metadata is static config. Mock one public bucket with no regions enabled. Handle states: none enabled, some enabled (monthly estimate line), saving/saved/failed, public/private, no publishers, plan-locked CDN, viewer read-only, delete confirmation.

### Accessibility
Region cards are labels wrapping `role="switch"` controls; the off-track colour meets 3:1. Section titles are h2 headings. The select has an accessible label. Dialogs trap focus and state consequences. Focus ring: 2px blue with offset.
Verified contrast: body text: #111827 on #ffffff = 17.74:1; muted description: #4b5563 on #ffffff = 7.56:1; text on header band: #111827 on #f8f8fa = 16.72:1; switch track off: #8b919c on #ffffff = 3.17:1; switch track on / focus: #2563eb on #ffffff = 5.17:1; NEW badge: #6b21a8 on #f3e8ff = 7.39:1; code chip text: #111827 on #f3f4f6 = 16.12:1; danger text: #b91c1c on #ffffff = 6.47:1.

### Security
RLS: only the owner, or admins of the owning org, update buckets, CDN rows and publishers; others read public metadata only. Publishers get short-lived, bucket-scoped tokens exchanged from CI identity claims; validate repository and workflow strings with zod. Visibility changes and deletes need confirmation and are audit-logged. Delete also requires re-authentication.

### Performance & SEO
Each section mutates independently with optimistic UI and rollback. Region metadata ships with the page. Settings are noindex; the public bucket page has normal metadata.

### Guardrails
- Neutral cloud labels and icons; no vendor names or logos.
- Billing notes always sit beside paid toggles.
- Acceptance criteria: (1) region toggles save per section; (2) going public requires confirmation; (3) publishers validate and list; (4) viewers see disabled controls with a reason; (5) all states and contrast pairs pass.

Open the builderAll templatesThis palette on its own