# How to Vibe Code Your Own RelayThat (and Stop Paying for It) > Consistent Designs, Everywhere. - Site: https://relaythat.com - Category: Design Automation SaaS - Platforms: Web app - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict 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. ### 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 ## What it 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 — Per user monthly subscription - PRO + PLUS: $25/mo — Includes 2 users - ENTERPRISE: Custom — For large organizations Founded 2015. Team size: 11-50 employees. ## The hard parts - 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 vibe code RelayThat ### Prerequisites - Node.js (free): Runtime environment for building and executing the Next.js full-stack web application. - GitHub (free): Source code control and deployment pipeline integration. - Anthropic API Key (pay-as-you-go): Powers the automated headline and marketing copy generator. ### Recommended AI tools - Claude Code: Autonomous terminal agent ideal for scaffolding full-stack features, setting up database schemas, and writing complex layout rendering logic. - Cursor: AI code editor for fine-tuning CSS grid templates, canvas components, and interactive UI states. ### 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 - Cloudflare (Hosting the full-stack Next.js web application and storing brand logos in R2 object storage): $0-5/mo ### Build guide 1. **Project 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. ``` 2. **Brand 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. ``` 3. **Constraint-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. ``` 4. **One-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. ``` 5. **Headline 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. ``` 6. **Batch 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 **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 the SaaS instead: $15/mo (Pro) - Build time: 25-35 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: Not applicable (built for personal workflow and learning) ## Sources - [RelayThat Website & Pricing Pages](https://www.relaythat.com/) - [Tracxn - RelayThat Company Profile](https://tracxn.com/d/companies/relaythat) - [Capterra - RelayThat Reviews & Overview](https://www.capterra.com/p/165507/RelayThat/)