The most useful design review I ran at Botim in these past months, I did not run. An agent did.

We were shipping a money transfer flow. The confirmation screen showed the amount one way and the entry screen showed it another, just different formatting, the kind of thing you stop seeing after the fortieth look. Research had already told us users lose confidence when the number looks different at confirmation. The agent caught it in one pass, tied it to that research, and flagged the “Send now” button against our own rule for irreversible actions. It suggested “Send AED 250. This cannot be undone.”

That is the production version: five agents, the real superdesigner. This piece is the stripped-down one you run yourself in Claude Code.

Here is the part nobody tells you. I lead design for a product with 150 million users, and the first week I tried Claude Code I opened the terminal, looked at it, and closed it. The capability was right there. The setup was the wall.

Nobody hands a designer the other side of that wall. So here it is, the whole thing: the setup I run, every MCP, the Skills that hold my taste, and the four workflows on top. This is design knowledge work, research synthesis, competitor analysis, design systems, specs, and prototypes you think with. Not for shipping to production, and you do not need to code. You point it at the thinking, not the deploy button.

I also build apps that four people use. The day job and the side project taught me the same thing.. the tool stopped being the bottleneck a while ago, the setup is it. Once Claude Code knows your taste and your stack, it stops improvising and starts building the thing you would have built yourself.

What is in here

The foundation, six pieces, in order:

• The CLI, configured so the terminal stops being the scary part.

• A CLAUDE.md that holds your taste, so it builds like you, not a generic template.

• A DESIGN.md it reads as law, so “good” means your standard.

• Permissions, so it moves fast without doing something you did not ask for.

• The MCPs that wire it to Figma, live docs, and a real browser to check its own work.

• The Skills that turn the moves you repeat into something it runs on its own.

Then the four workflows on top, none of which need a line of production code:

• Keep your design system honest. Audit it against your own rules, catch the drift, sync tokens.

• A prototype you think with. A written flow becomes something clickable that the agent opens, checks, and corrects itself.

• Research synthesis. Raw notes in, the themes and contradictions out, every claim cited.

• Pressure-test a spec. The states and edge cases a PRD misses, found before a single screen exists.

Honest caveat: this is a setup you maintain. It will confidently build the wrong thing if your CLAUDE.md is vague, so the rules carry the weight. It does not replace your judgment. It clears the distance between your judgment and the screen.

The whole thing is below for paid members: the setup, every MCP, the Skills, and the four workflows with the exact prompt I run. It is the same pattern behind superdesigner.ai, the reviewer design teams at OKX and Grab use, stripped to what you need for your own work.

Read more

This is the mobile version of my prompt library.

The web app playbook covered Next.js. This one covers Expo. Same approach, different output. A real app that runs on iOS and Android.

In case you missed the web app playbook:

Before you start: software you need

Create accounts and install these first. They’re all free to sign up.

• Node.js LTS. The engine that runs your app locally. Without it, nothing works. Download at nodejs.org (choose the Installer for your system, Mac or Windows).

• Expo Go. The app that shows your work on your actual phone while you build. Download it on your iPhone or Android from the App Store or Google Play. Free.

• Firebase. Your database and login system. Create a free account at firebase.google.com. No card required on the free plan.

• Claude. Paid subscription required for Claude Code. Make sure you’re on a paid plan at claude.ai before you start.

A note if you’re on a work laptop: you may need admin rights to install software.

Read more

I run jfbi.ai, an AI Builder Sprint days with designers, founders, builders in a room. We hand everyone a stack and a set of prompts. By end of day, most people have shipped something real.

This is that prompt library I’m sharing with you.

Before you start: software you need

• Node.js LTS. The engine that runs your app locally. Without it, nothing works. Download at nodejs.org (choose the Installer for your system, Mac or Windows).

A note if you’re on a work laptop: you may need admin rights to install software.

The stack

• Cursor. Where you write and see your code. Think of it as a smart text editor, like Figma but for building.

• Claude Code. Your AI building partner. Lives inside Cursor’s terminal. Paid subscription required.

• Next.js. The framework that powers your app.

• Tailwind and Shadcn UI. Handles how everything looks.

• Supabase. Your database, if you need to store data.

• Vercel. Puts your app on the internet in minutes.

• GitHub. Saves your work and tracks every change you make.

Read more

We’re diving into the essential techniques that instantly improve how you build and test with Figma Make.

For paid subscribers only part of my Design and Build Playbook. This playbook is constantly being updated.

Alright, let’s dive in.

1. Preview Your Make App Like a Real App

Figma’s preview window is fine for quick checks, but not when you want to test an experience properly. Here’s the workflow that makes your prototype feel like an actual shipped app.

Step 1 — Publish your Make app

Publish your project to generate a live URL that reflects all your logic, state, and data integrations.

Step 2 — Open in Safari and add to Home Screen

1. Open your published URL in Safari

2. Tap Share → Add to Home Screen

3. Launch it from your home screen like a real app

4. Runs full screen without browser UI

Step 3 — Hide the status bar in your design

On Make, prompt:

Hide the status bar on the actual mobile device

If added to your home screen, the app opens in a clean, full-screen environment by default.

Now you’re ready for testing.

2. Use the Device Camera to Scan QR Code

Figma Make prototypes can access real device hardware, including the camera.

How to use it:

Read more