The Problem
Developers who build apps with AI-assisted tools like Lovable, Bolt, and Replit can ship functional products in days. But when it’s time to launch, they hit a wall. Creating professional marketing assets (Product Hunt graphics, social media posts, landing page hero images) requires design skills most developers don’t have. They spend hours fighting Canva templates or settle for screenshots that don’t do their product justice. The gap between "working app" and "professional launch" kills momentum.
What I Did
User Research
I mapped the "vibe coder" audience: solo developers and indie builders who use AI tools to build fast but lack design skills for launch. I studied how people prepare for Product Hunt launches, what assets perform best on social media, and where the bottleneck actually sits.
UX Design
I designed a multi-step flow: upload a screenshot, pick a template, customize colors and text, preview in real time, and export in multiple formats. The key challenge was making it feel instant. Users needed to go from screenshot to finished asset in under 60 seconds without feeling overwhelmed by options.
Technical Architecture
I built a "Fixed Virtual Canvas" system that solves one of the hardest problems in marketing asset generation: maintaining visual quality across extreme aspect ratios (from 1:1 Instagram posts to 16:9 Product Hunt headers to 9:16 stories). The canvas scales the content proportionally while keeping typography readable and composition balanced at every size.
Design System
I built the full component library from scratch using shadcn/ui as a foundation, customized with Shotframe’s brand tokens. Every component (buttons, inputs, cards, modals, toast notifications) was built once and reused throughout the app.
Brand Identity
I created the complete brand: "The Frame Lock" logo concept, Electric Tangerine (#FF6B35) color palette, typography system, and "Frame your launch" messaging. Also designed the landing page, social media presence, and marketing assets.
Engineering
The entire product is built in React with Next.js and TypeScript. I integrated Stripe for payments, built the export pipeline, and deployed on Vercel. No other developer was involved.
The Results
- Full SaaS product designed and engineered solo
- Brand identity, landing page, and marketing assets all created from scratch
- Reusable component library built on shadcn/ui
- Multi-format export system solving the aspect ratio scaling problem
- Stripe payment integration with checkout flow
- AI-native development workflow using Claude Code, Cursor, and v0