04 — UI Asset Marketplace

Grain
frame

A solo designer doing serious volume selling Figma component kits and Framer templates on Gumroad. They needed a real storefront — one where the product does the talking and nothing else competes for attention.

UI Asset Marketplace Next.js · Stripe · Cloudflare Workers · KV
The problem

Gumroad works.
Until it doesn't.

Grainframe's Gumroad store was converting — the products were good. But Gumroad looked like Gumroad. Every product page looked the same. There was no way to show interactive component previews, no coherent brand, no proper licensing structure, and no way to run a Figma plugin landing page as a separate conversion goal. The revenue justified a real home. We built it.

What was built

Nothing competes
with the product.

01
Custom Storefront

Product pages with live interactive component previews embedded directly — not screenshots, not GIFs, the actual components running in-page. Warm off-white, near-black text, 8pt grid. Nothing competes with the product.

02
License Tier System

Personal, Team, and Commercial tiers — scoped access per tier, clearly distinguished. License terms written clearly, no legal bloat. Buyers understand what they're buying before they buy it.

03
License Key Delivery

Cloudflare Workers API handles key generation and delivery. Stripe webhook triggers key creation on successful payment. Keys logged to KV storage. Delivery is instant, automated, and tracked.

04
Figma Plugin Landing Page

Separate from the main store — separate domain, separate conversion goal, separate visual treatment. Plugin-specific marketing without the overhead of the full storefront framing.

Interactive previews

The product runs
in the page.

Every product page embeds a live interactive preview of the component kit — not a screenshot, not a video. Buyers can interact with the actual components before purchasing. The preview iframe is sandboxed, loads from a CDN, and doesn't slow down the product page.

Product page — embedded interactive preview
preview.grainframe.co/buttons-v2
Buttons
Form inputs
Cards
Navigation
Tables
Badges
Interactive preview
Primary
Secondary
Ghost
License tier system

Three tiers.
Zero confusion.

License tiers designed to be understood in under 30 seconds. Clear scope per tier, clearly displayed — no legal documents required to know what you bought. Key generation scoped to tier on Stripe webhook.

License tier comparison
License Personal projects Client work Unlimited seats Resale
Personal
Team
Commercial
01
Purchase
Stripe processes payment, sends webhook to Cloudflare Worker.
02
Key generated
Worker generates scoped key for license tier, stores in KV.
03
Instant delivery
Key emailed and displayed on confirmation page. GF-TEAM-A4F2-9K
04
Logged
Key, tier, timestamp, and buyer ID stored in KV for audit trail.
Stack
Next.js Stripe Cloudflare Workers Cloudflare KV Tailwind v4 Resend
Depth markers

Selling a digital
product that deserves better?

Book a Quick Call