Vibe Coding by Designs by Farzam

A stakeholder stopped the meeting to ask how I'd shown up with a working, clickable product — not a slide deck, not static frames held together with prototype noodles, but something they could actually use.

I told them the truth: I'd vibe coded it the night before. Blank stares around the table.

By the time we wrapped, the direction was approved. Here's the whole story.

The Problem

Everyone wanted more. The reps needed less in their way

Salesforce couldn't keep up with the vision

Every good idea we had kept hitting the same wall. Real-time, intelligent workflows? Salesforce fights you. A product that actually feels like Delivery Hero, not a form builder? You're boxed into someone else's design language. A rep running their whole day from their phone, no laptop? Salesforce's "mobile" app is just the desktop, squeezed smaller.

So we decided to leave. Native React meant the interface, the logic, and the AI layer could finally be ours — including a vision I cared about: a Progressive Web App a rep could install straight to their home screen. No laptop bag, no login dance, their whole day in their pocket.

More power. Same speed.

The people using this are reps and telesales agents — on the phone all day, targets ticking. Every feature you bolt on is one more thing between them and the answer they need while a prospect waits on the line. That line became the one I measured everything against.

The clock was already running

Vendor Summit 2026 was coming — every DH market and the external stakeholders we needed to win over, all in one room, at once. That gave me two to three weeks to prototype the whole product, align with my PM and stakeholders, validate with real users, and lock the direction — not just design it. Building that from scratch in Figma was never going to fit.

I didn't guess. I audited.

Before drawing a single new screen, I went through the old CRM screen by screen, cataloguing every gap and the fix it was begging for. The verdict never changed: raw data, manual work, no guidance on what to do next. Click any board to read the teardown.

Old Salesforce CRM — gap analysis — Cockpit — raw metrics with no next action, no trends, and nothing clickable.

What I Did

Blank canvas to validated direction in about two weeks

So I changed how I worked, not just what I built. Let AI handle the busywork — pixels, states, wiring — and spent my time on the stuff only a designer can do: taste, judgment, reading a room.

Figma Make was where the ideas got real. In 3–4 days I had working prototypes — enough to put something clickable in front of regional stakeholders instead of slides.

To make them feel like Delivery Hero and not a demo, I pulled in Cape — our design system — as an npm package right inside Figma Make. From the very first screen, it looked shipped.

Figma Make — Bring in design system context — Cape design system loaded into Figma Make.

Figma Make — Installing Cape npm packages — npm install — Cape Core, Icons & Tokens.

Then I put the polished prototypes in front of 14 real users, with Marvin sitting in every session — recording and transcribing so I could watch faces instead of scribbling notes.

Afterward I dropped every interview into one place and handed it to Claude to synthesize into a tight, structured report — the evidence behind every call that came next.

Start to finish, about two weeks: prototype → validate → synthesize → lock features, direction, and UX with regional stakeholders.

Usability interview — Muhammad Hafizuawan Ishak presenting the SalesHero dashboard during a live session — **Muhammad · Sales Rep**Live workflow walkthrough. Marvin in the call — so I could actually watch and listen.

Usability interview — David Cabal showing the Google Sheets tracker the team used before the CRM — **David · Sales Manager**The Google Sheets tracker his team lived in. The pain point, documented in the moment.

Usability testing session — navigating the CRM prototype with Marvin recording in the background — **Research session**Prototype in hand, Marvin running in the background — every hesitation recorded.

Marvin — AI project updates panel showing synthesised findings across all interviews — Marvin's cross-session synthesis — findings rated, quotes cited.

Marvin — Analyse board showing affinity-mapped note cards from all user interviews — Every quote queryable — filter by theme or question.

The Result

Approved in the first review — from a working prototype, not a deck

I didn't walk in with slides. I handed people something they could click, poke, and react to.

The whole conversation changed. Nobody debated my formatting — they debated the product. Features, direction, and UX were signed off with regional stakeholders in the first round.

The prototypes that earned that yes:

SalesHero CRM — screen 1 — The Dashboard — recommendations, metrics, and today's outreach progress at a glance.

SalesHero CRM — screen 2 — Pipeline breakdown and team leaderboard — stage activity, follow-up queue, and how you rank.

SalesHero CRM — screen 3 — Communication hub — inbox and today's schedule side by side, the full day in one view.

SalesHero CRM — screen 4 — Pipeline list view — every vendor, their grade, stage, and next action, scannable at speed.

SalesHero CRM — screen 5 — Overdue flags, hot lead tags, action queued — the status reads in seconds, no hunting.

SalesHero CRM — screen 6 — AI Co-Pilot live in the call — listening, ready to surface facts as the conversation moves.

SalesHero CRM — screen 7 — Call completed. Discussion points and recommended next actions generated instantly.

SalesHero CRM — screen 8 — One tap to schedule the follow-up — date, time, and context pre-filled from the call.

SalesHero CRM — screen 9 — Share the onboarding link via email or WhatsApp — one action, vendor in the flow.

What It Means

The drag is gone. The thinking is still mine.

AI didn't shrink the job — it deleted the drag. The transcribing, the pixel-pushing, the endless handoffs. What's left is the part that was always the point: the judgment.

I still choose which insight to build on. I still feel when a layout's rhythm is off before I can explain why. I just get there faster now.

Next up: rebuilding the signed-off screens in Figma with real Cape components — a dev-ready handoff engineering can build straight from.

That's what vibe coding means for a designer. Not less work. The right work.