Cutbench

Who it is for

• Solo founders launching a video SaaS
• Agencies offering white-label editing
• Social media creators
• Teams testing demand for video tools

Layout

1. Dark top bar with divider: teal circular camera logo + wordmark left, grey 'Sign In' and teal outlined 'Get Started' right
2. Split hero on navy: 72px three-line white headline, grey subcopy, teal 'Try the demo' + outlined 'Sign up free'; right a desktop monitor and laptop mockup showing the editor and projects table
3. Feature grid
4. User-mode section: text left, editor UI mock right
5. Admin-mode section: dashboard UI mock left (KPI cards, export queue stats, team activity, recent exports table), heading + three arrow-bullet benefits right
6. Testimonials
7. CTA and footer
8. App: dashboard, editor (upload, preview, timeline with filmstrip, format settings), projects & reports, admin exports/storage/users/settings

Palette

Sleek, technical, dark, creator-focused, professional. A night-mode studio vibe with teal as the single action colour.

• background (navy)#111422
• card / secondary#212536
• text#ffffff
• muted text#8b90a3
• primary teal#49c5b3
• button teal (dark)#2c8277
• border#33384d

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

Display

Space Grotesk 700, 72px hero; 36px section heads

Body

Space Grotesk 400 16-18px, grey secondary

One quirky geometric grotesk gives a tech/creator feel across marketing and app. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Wide 1232px layout, alternating split sections with big UI mocks, 8px radius, thin borders, generous vertical spacing (~120px).

Device mockups (iMac-style monitor, laptop) and flat app UI mocks; small avatar photos in activity feeds and testimonials.

Components

• Dark navbar
• Split hero with device mockups
• Feature cards
• Alternating UI mock sections
• Arrow-bullet benefit list
• Video upload dropzone
• Video preview player
• Multi-segment timeline with draggable in/out markers and filmstrip
• Format settings (aspect ratio, crop mode fit/fill, resolution, quality vs speed)
• Export progress
• Projects table with status badges
• Admin KPI cards
• Export queue stats and team activity feed
• Analytics pie chart and CSV/PDF export

Interactions

• Drag markers to set segments
• Scrub preview with filmstrip
• Add/remove segments
• Choose social preset (9:16, 1:1, 16:9)
• Client-side encode with progress and cancel
• Resolution options filtered by source quality
• Visitor demo mode with auto-cleanup
• Admin sort/filter tables and export reports

Data

• Profile{user_id, display_name, avatar_url, storage_used}
• UserRole{user_id, role: visitor|user|admin}
• Project{id, owner_id, name, source_path, duration, thumbnail_path, status, created_at}
• Segment{project_id, start_ms, end_ms, position}
• Export{id, project_id, format, aspect, crop_mode, resolution, quality, status: pending|processing|complete|failed, output_path, completed_at}
• Settings{brand_name, logo_path, accent, storage_limit_mb, visitor_ttl_hours}

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 a template'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 templates)
- 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.

### Goal
Build **Cutbench**, a browser-based video trimming and reformatting SaaS for creators, small businesses and agencies. Users upload a clip, cut one or more segments on a visual timeline, pick a social format (vertical, square, widescreen) with fit or fill cropping, and export at a chosen resolution -- all encoded in the browser. Admins manage users, storage limits and branding, and see what people export. Visitors can try it without an account.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. ffmpeg.wasm for trimming, concatenation, scaling and cropping in a Web Worker; react-resizable-panels for the editor layout; Embla for the marketing UI mock carousel; Recharts for admin analytics; TanStack Query + TanStack Table; react-hook-form + zod; jsPDF for report export. Supabase: Auth, Postgres, Storage for source files, thumbnails and outputs, scheduled Edge Function for visitor cleanup.

### Pages & layout
1. **Landing**: dark navy; nav with teal circular logo, "Sign In" and teal outlined CTA; split hero with a three-line bold headline, subcopy, teal "Try demo" and outlined "Sign up" buttons, and device mockups on the right. Feature grid; alternating split sections for the user editor and the admin dashboard with arrow-bullet benefits; testimonials (illustrative); CTA; footer.
2. **Dashboard**: recent projects with thumbnails, storage meter, New project.
3. **Editor**: resizable panels -- left settings (project name, aspect ratio, crop mode, resolution, quality vs speed), centre preview player, bottom timeline with filmstrip thumbnails and draggable in/out handles for multiple segments; Save and Export.
4. **Projects & reports**: table with status badges, sorting, bulk delete.
5. **Admin**: KPI cards (projects, videos, users, storage), export queue stats, team activity, recent exports table, format distribution pie, CSV/PDF export; Users (roles); Settings (brand name, logo, accent, storage limit, visitor retention).

### Design system
Dark only. Tokens: `--background: #111422`, `--card: #212536`, `--foreground: #ffffff`, `--muted-foreground: #8b90a3`, `--primary: #49c5b3`, `--primary-foreground: #101728`, `--border: #33384d`; statuses pending `#9ca3af`, processing `#60a5fa`, complete `#34d399`, failed `#f87171`. Font: Space Grotesk 400/500/700; scale 12/14/16/20/36/72. Radius 8px; 6px buttons. Shadows minimal; mockups get a soft glow. Motion 200ms; progress bars animate smoothly. Add `--input-border: #676e8a` for inputs, sliders and timeline handles (the `#33384d` border is decorative). Outlined buttons use `--primary` for text and outline.

### Components & interactions
Timeline handles: hover, active drag, snapping to frames, keyboard nudge (←/→ by frame, Shift for 1s). Export: queued, encoding (percent + cancel), complete (download), failed (retry with faster preset). Resolution options disabled above source resolution. Dropzone rejects unsupported types and oversize files. Empty dashboard invites a first upload or the demo clip.

### Data & state
Profile(storage_used), UserRole(visitor|user|admin), Project, Segment(start_ms, end_ms, position), Export(settings, status, output_path), Settings. Encoding state lives in the worker and a Zustand-style store; persisted records via TanStack Query. Seed a short royalty-free demo clip and fictional projects.

### Accessibility
Timeline handles are sliders with `aria-valuetext` in timecode. Preview player has keyboard controls and captions support for uploaded VTT. Teal button text uses dark foreground for contrast. Admin charts include tables. Respect reduced motion on marketing animations. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #ffffff on #111422 = 18.31:1; body text #ffffff on #212536 = 15.19:1; muted text #8b90a3 on #111422 = 5.77:1; muted text #8b90a3 on #212536 = 4.79:1.

### Security
RLS: users access only their own projects, segments, exports and storage paths (`owner_id = auth.uid()` and path prefix); admins read aggregates via security-definer functions. Roles in a dedicated table. Enforce per-role storage quotas server-side (storage policy + DB check), validate MIME and size (e.g. ≤500 MB users, ≤50 MB visitors). Visitor data auto-deleted by a scheduled function. Serve files via signed URLs. ffmpeg.wasm needs cross-origin isolation headers (COOP/COEP) -- configure them deliberately.

### Performance & SEO
Load ffmpeg.wasm lazily on the editor route and cache it. Generate filmstrip thumbnails with canvas in a worker. Warn on mobile for large files. Landing meta/OG; app `noindex`.

### Guardrails
- Original copy and royalty-free demo media only; no platform logos.
- Label testimonials as examples.
- Typed components, no `any`, visible errors.
- Done when: a user trims two segments and exports a 9:16 fill-cropped MP4 in the browser; resolutions above source are blocked; quotas are enforced server-side; admins see export stats; visitor projects are cleaned up on schedule.

Open the builderAll templatesThis palette on its own