<aside>

I replaced a paid SaaS tool with a self-built component - using AI as my engineering team

I replaced a $30/month SaaS subscription with a custom-built testimonial wall using Figma Make AI, Supabase, and Claude.

• No engineering support.
• No manual coding.

The entire build took 4 hours.

👉 See it live: Darpan Dadhaniya | Senior Product Leader

</aside>

<aside>

The problem

Testimonial SaaS is a solid product.

But three things bothered me:

• Cost without complexity: I paid $30+/month for what amounts to a grid of cards with a scroll animation.
• Limited design control: Testimonial SaaS offers themes and colour pickers, but the layout, typography, and animation behaviour are constrained.
• Data dependency: My testimonial content and avatar images lived on Testimonial SaaS's Firebase storage. If I cancelled, my data disappeared.

I wanted full control over design, data, and hosting.

<aside>

Architecture decisions

Before opening Figma Make, I spent time with Claude planning the system architecture.

The goal was to identify the simplest stack to provide a dynamic, data-driven component I could embed in Notion.

flowchart LR
    subgraph Claude["Claude - Architect"]
        C1["Architecture planning"]
        C2["SQL scripts"]
        C3["Prompt engineering"]
        C4["Code review"]
    end

    subgraph Supabase["Supabase - Backend"]
        S1["Storage bucket <br> (avatar images)"]
        S2["KV store <br> (testimonial JSON)"]
        S3["Edge function <br> (Deno API)"]
    end

    subgraph FigmaMake["Figma Make AI - Frontend"]
        F1["React + Tailwind"]
        F2["Masonry grid"]
        F3["Scroll animation"]
    end

    subgraph Notion["Notion - Host"]
        N1["Dark mode portfolio"]
    end

    C1 -->|"Plans stack"| Supabase
    C3 -->|"Drafts prompts"| FigmaMake
    C4 -->|"Reviews output"| FigmaMake
    C2 -->|"Writes setup"| Supabase

    S1 -->|"Permanent avatar URLs"| S3
    S2 -->|"JSON array"| S3
    S3 -->|"REST API"| F1
    F1 --> F2
    F2 --> F3
    F3 -->|"Published embed"| N1

Tech stack

• Figma Make AI - The UI builder: generates React + Tailwind CSS from natural language prompts. I chose it because
  • It has a native Supabase integration
  • Produces real deployable code (not just mockups)
  • Lets me iterate on the design through conversation rather than manual CSS tweaking.
• Supabase - The backend: I needed three things: a database for testimonial data, file storage for avatar images, and an API layer.
  • Supabase provides all three with a generous free tier
  • Native Figma Make integration sealed the decision - the frontend can read data directly from Supabase without a separate API server.
• Claude - The architect: I used Claude to
  • Plan the component decomposition
  • Write the Supabase SQL setup scripts
  • Generate the data migration from Testimonial SaaS's CSV export
  • Review the code for security issues
  • Draft the prompts for Figma Make.
• Notion - The host: My portfolio lives in Notion forced to dark mode (background #191919). The component had to blend invisibly into this environment. This constrained every colour and spacing decision.

Key tradeoffs

• KV store over custom table: Figma Make only supports a pre-configured KV table, not custom Postgres tables.
  • Stored all 15 testimonials as a single JSON blob in one KV row
  • 15 records changing every few months — simple delivery is the right call
  • Also created a structured Postgres table as a CMS layer for management
  • Workflow: insert row → run export query → paste JSON into KV store
• Component-by-component prompts over a mega-prompt: Figma Make loses context with large, complex prompts.
  • Broke the build into four focused prompts: card, column, grid, polish
  • Each builds on the previous output
• Dark cards on dark background: Testimonial SaaS defaults to white cards, which create harsh contrast on dark pages.
  • Used dark (#1E1E1E) card backgrounds
  • Orange accent border + spotlight shadow for visual interest without glare

GitHub Repo

https://github.com/darpandadhaniya/wall-of-love

</aside>

<aside>

Build log: Prompts and Iterations

This section shows the actual AI prompts I used, what they produced, and how I refined the output. Each prompt demonstrates a specific aspect of working with AI effectively: providing context, decomposing complexity, and iterating based on visual feedback.

Step 1: Context brief

Before any design work, I gave Figma Make a project brief. This front-loads the constraints so every subsequent prompt inherits the same design system.

I'm building a testimonial "Wall of Love" component inspired by Testimonial SaaS's masonry animated format. It will be embedded in a Notion portfolio page forced to dark mode (background #191919).

The wall is a responsive masonry grid of testimonial cards that scroll vertically in a continuous, very slow animation. Columns scroll in alternating directions - up, down, up, down. Animation pauses on hover.

Card design: circular avatar, name, optional job title, 5 orange stars, body text, "Show more" link for long reviews. Cards have a coloured left border accent and solid orange offset shadow.

Constraints: dark mode only, #191919 background, 100% width, 650px fixed height, responsive 4→3→2→1 columns, very slow scroll (~60s per cycle), no headers or branding.

Why this works: The brief establishes the target (Testimonial SaaS's format), the constraint (Notion dark mode), the card anatomy, and the responsive behaviour - all in one message. Every follow-up prompt can focus on one detail without re-establishing the full context.

Step 2: The card

Build a single testimonial card matching the attached screenshot and the design specs in the context above. Make two versions side by side: one with a short testimonial (2 lines) and one with a long testimonial (7+ lines that truncates with "Show more").

What I refined: The initial output used a soft glow shadow. My Testimonial SaaS reference uses a solid hard-edge offset shadow. I followed up with: "Replace any soft glow or blur shadow with a solid #FFA500 orange block offset 4px right and 4px down. No blur, no transparency - a clean hard-edge offset shadow."

The lesson: AI tools default to conventional design patterns (soft shadows). Reference images and specific language ("hard-edge", "no blur") override those defaults.

Step 3: The scrolling column

Stack 8 of these cards in a single vertical column with a 12px gap. Mix short, medium, and long testimonials. Duplicate the full stack underneath for a seamless scroll loop. Animate the column scrolling upward - very slow, 60 seconds per full cycle, linear timing. Pause on hover. Wrap in a 650px container with overflow hidden and #191919 background.

Key technical detail: The infinite scroll works by duplicating the card stack. The CSS animation moves the entire column upward by exactly 50% (the height of one complete set), then instantly resets to 0. Because both halves are identical, the reset is invisible. The speed is calculated dynamically: duration = (container height / 2) / 30px per second. This keeps the scroll speed consistent regardless of content length.

Step 4: The responsive grid

Place multiple scrolling columns side by side. Use CSS grid with auto-fill and a minimum card width so the column count adapts to screen width. Columns 1 and 3 scroll up, columns 2 and 4 scroll down. The horizontal spacing between columns should be fluid - distribute remaining space evenly.

What I refined: The first draft used fixed card widths that didn't match Testimonial SaaS's fluid behaviour. Comparing screenshots side by side, I noticed Testimonial SaaS keeps card width constant and varies the horizontal gap. The fix: justify-content: space-evenly with fixed column widths, letting the gaps absorb the extra space.

Step 5: Whole bunch more iterations + Testing + Connecting databases and GitHub

Step 6: Notion embed polish

Add 60px gradient fade masks at top and bottom (#191919 to transparent). Background must be exactly #191919 with zero outer margin, padding, or border. The component edges must be invisible inside the Notion embed iframe.

Why #191919 matters: Notion's dark mode background is exactly #191919. Even one shade off (#1A1A1A or #181818) creates a visible line where the embed iframe meets the page. I confirmed this hex value through documentation and testing before committing to it.

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>