How to vibe codeRelayThat
Consistent Designs, Everywhere.
relaythat.com ↗Design Automation SaaS
The verdict: can you vibe code RelayThat?
Build a solid side project for personal marketing workflows, though paying $15/mo makes more sense if you need polished production templates.
Replicating RelayThat as a personal tool is entirely feasible with modern full-stack web frameworks and AI coding agents. The primary engineering hurdle is not the CRUD wrapper or brand asset portal, but building the layout calculation engine that handles text reflow and image scaling across disparate aspect ratios. You can shortcut this by using CSS container queries, Flexbox/Grid constraints, and a curated set of layout templates rather than writing a full commercial rendering engine from scratch. At $15/mo, paying for the real product makes financial sense if you need immediate production-ready templates, but building a personal clone is a rewarding weekend-to-weeks project.
Estimated effort: 2-3 weeks part-time
What you can't replicate
- The exact proprietary library of 2,000+ commercial designer-crafted layout variations
- Integrated legal licensing terms for millions of curated stock assets
Founded
2015
Raised
—
Team
11-50 employees
Cheapest paid tier
$15/mo
What RelayThat does
Programmatic creative and graphic design automation SaaS that instantly formats brand elements into responsive layouts across thousands of aspect ratios.
Core features
- Brand asset portal (colors, logos, fonts, metadata)
- Constraint-based layout engine (responsive SmartLayouts)
- One-click cross-platform canvas resizing and text reflow
- Automated headline and marketing copy generator
- Built-in stock asset library search and integration
- Batch ZIP export of all generated aspect ratios
The business
Pricing
- PRO$15/mo
- PRO + PLUS$25/mo
- ENTERPRISECustom
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 4 — after that, every month is money kept.
The hard parts of vibe coding RelayThat
- Writing a reliable constraint-solving layout engine that calculates typography bounding boxes and image clipping dynamically across hundreds of extreme aspect ratios
- Automating brand metadata extraction and logo vector parsing from arbitrary user-submitted URLs
- Maintaining crisp vector and bitmap rendering performance across multi-canvas previews
How to vibecode RelayThat
Prerequisites
Node.jsfree
Runtime environment for building and executing the Next.js full-stack web application.
GitHubfree
Source code control and deployment pipeline integration.
Anthropic API Keypay-as-you-go
Powers the automated headline and marketing copy generator.
AI coding tools
Recommended stack
| Frontend | Next.js with Tailwind CSS and HTML5 Canvas / DOM layout wrappers |
|---|---|
| Backend | Next.js Server Actions and API routes |
| Database | Turso (SQLite at the edge for workspaces, brand assets, and templates) |
| Auth | better-auth |
| Payments | None (personal use clone) |
| Other | Vercel AI SDK, Anthropic API for headline generation |
Hosting & infrastructure
| Cloudflare | Hosting the full-stack Next.js web application and storing brand logos in R2 object storage | $0-5/mo |
Build guide
01Project Scaffolding & Database Schema
Initialize the Next.js project with Tailwind CSS, configure Turso SQLite via Drizzle ORM, and set up better-auth for single-user management.
Scaffold a new Next.js 16 application using App Router and Tailwind CSS v4. Set up Turso for database connectivity with Drizzle ORM. Create the database schema tables: 'workspaces' (id, name, logo_url, primary_color, secondary_color, font_family), 'assets' (id, workspace_id, url, type, tags), and 'templates' (id, name, aspect_ratio, layout_config_json). Integrate better-auth for secure email/password authentication configured to point to the Turso database. Ensure clean TypeScript types throughout and verify all migrations apply successfully.02Brand Portal Management UI
Build the workspace dashboard and brand asset portal where users upload logos, configure brand color palettes, select typography, and manage metadata.
Build a responsive workspace dashboard and brand portal page in Next.js. The interface must allow users to create and switch between multiple brand workspaces, upload logos and background images (storing them in Cloudflare R2), pick primary and secondary brand hex colors via color pickers, and select font pairs from a curated dropdown. Implement server actions to update workspace records in Turso and display immediate reactive UI updates across the application shell.03Constraint-Based SmartLayout Engine
Develop the responsive layout rendering engine using CSS Grid and dynamic container sizing to map brand assets into standard aspect ratios.
Implement the core SmartLayout rendering engine as a React component. Create at least 5 distinct layout templates (e.g., Square Post 1:1, Instagram Story 9:16, Landscape Banner 16:9, Pinterest Pin 2:3). Each template must dynamically ingest the active workspace's logo, primary color, background image, and custom headline text, positioning elements via CSS Flexbox and Grid percentages without manual tweaking. Include aspect-ratio wrapper containers that scale smoothly down to thumbnail sizes.04One-Click Resize & Remix Interface
Create the multi-format view that renders all layout aspect ratios simultaneously and enables instant remixing of styles.
Build a multi-format canvas view that displays all selected SmartLayout templates side-by-side in real time. Add a 'Remix' button that pseudo-randomly cycles through alternative layout positioning variants and color contrast pairings while keeping brand constraints intact. Implement a 'Resize All' toggle that instantly updates container dimensions and triggers CSS text reflow across all active design previews.05Headline Generator & Stock Asset Integration
Integrate the Vercel AI SDK and Anthropic API to generate contextual marketing headlines and integrate external stock photography search.
Integrate the Vercel AI SDK with Anthropic API to build a headline and copy generator helper. Create a sidebar panel where users enter keywords or product categories, triggering a server action that streams back 5 punchy marketing headlines using wildcard patterns. Also build a stock asset picker modal that queries a free image API (or Unsplash public endpoint) and allows users to instantly apply selected photos as background layers to their active layouts.06Batch ZIP Export & Polish
Implement client-side HTML2Canvas or DOM-to-Image export pipelines to package all generated aspect ratios into a single downloadable ZIP archive.
Implement a batch export feature using html2canvas or modern DOM rendering libraries to capture all active SmartLayout preview cards as high-resolution PNG images. Bundle the generated image files into a single downloadable ZIP archive using 'jszip' client-side, triggered via a 'Download All Sizes' action button. Add error handling, loading spinners, and polish the UI styling with clean Tailwind CSS components.
Cost vs paying for RelayThat
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- Domain name (optional)$12 one-time
- AI coding tool subscription$20 one-time
Total~$32 one-time
Ongoing costs (monthly)
- Cloudflare Workers & R2 hosting$0-5/mo
- Anthropic API headline generation usage~$2/mo
Total~$5-7/mo
Paying for RelayThat
$15/mo (Pro)
Your time to build
25-35 hours
AI tool credits
$20 (Claude Pro / Cursor)
Break-even
Not applicable (built for personal workflow and learning)
Vibe code RelayThat: FAQ
- Can you vibe code RelayThat yourself?
- Solid side project — 72/100 vibecodeable. Build a solid side project for personal marketing workflows, though paying $15/mo makes more sense if you need polished production templates.
- How long does it take to vibe code RelayThat?
- 2-3 weeks part-time — roughly 25-35 hours of hands-on time with an AI coding agent.
- How do you build your own RelayThat?
- Scoped to personal use: Next.js with Tailwind CSS and HTML5 Canvas / DOM layout wrappers on the front, Next.js Server Actions and API routes behind it, Turso (SQLite at the edge for workspaces, brand assets, and templates) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own RelayThat without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code RelayThat instead of paying?
- About ~$32 one-time to start and ~$5-7/mo to run, versus $15/mo (Pro) for RelayThat. Break-even: Not applicable (built for personal workflow and learning).
- What stack should you use to vibe code RelayThat?
- Next.js with Tailwind CSS and HTML5 Canvas / DOM layout wrappers; Next.js Server Actions and API routes; Turso (SQLite at the edge for workspaces, brand assets, and templates); plus Vercel AI SDK, Anthropic API for headline generation.