DEV Community

Cover image for Your coding agent has never seen a good paywall
jaimin
jaimin

Posted on

Your coding agent has never seen a good paywall

#ai #mcp #design #ios

Ask Claude Code or Codex to build a paywall screen and you get something that looks like a Bootstrap pricing table. Three cards. A "Most Popular" badge. Maybe a toggle for annual billing.

No app making real money looks like that.

An LLM has read almost every line of open source code ever written and has never looked at an app. It knows the React Native API surface cold. It does not know what Duolingo does on day 3 to get you to pay, or why Runna asks for your goal race before it asks for your email.

Design knowledge lives in pixels, and pixels are not in the training data in any form the model can reason about.

What I built

I run Appllama, a library of screens from the highest earning iOS apps. Every screen is captured in journey order, so you can walk an app from welcome, through onboarding, to the paywall, and into the product itself.

It was built for people to browse. The thing that most needed to look at it was the agent doing the building. So it is now an MCP server.

Appllama MCP, showing an agent researching real app screens

Prompts that work

These run in Claude Code, Codex, Cursor, or anything else that speaks MCP.

Research a business question instead of a look:

Why does Duolingo make so much more money than other language apps?
Walk me through their paywall and onboarding.
Enter fullscreen mode Exit fullscreen mode

Build against a real reference:

Build me a home screen like Bevel, but for a fasting app.
Enter fullscreen mode Exit fullscreen mode

Compare your work to a competitor:

How is my onboarding different from Flo's?
How does my progress chart compare to MyNetDiary's?
Enter fullscreen mode Exit fullscreen mode

Trace a whole flow:

Show me Runna's full flow from install to first run.
Enter fullscreen mode Exit fullscreen mode

That last one changed how I work. Getting an agent to reason about a sequence of screens, what an app asks for first and what it defers until the user is invested, is a different thing from showing it one screenshot.

Install

The MCP server:

https://appllama.io/mcp
Enter fullscreen mode Exit fullscreen mode

Skills that wrap the research, compare, design and build loop:

npx skills@latest add appllama/appllama-skills
Enter fullscreen mode Exit fullscreen mode

Source for the skills is on GitHub.

What it does not do

Worth knowing before you wire this into your toolchain.

  • iOS only for now. Android is not in the library yet.
  • Calls cost credits. There is a monthly allowance, and walking a full app with images spends it faster than text queries do.
  • Media URLs expire after about an hour. Fine while an agent works a task, annoying if you cache the responses and come back the next day.
  • Screenshots carry a small watermark in the corner. Agents read straight past it.
  • It is a reference, not a generator. It will not design your app. It gives the model something real to work from instead of averaging over everything it has ever seen.

Why MCP instead of a REST API

I went back and forth on this one. A design library is exploratory by nature. You do not know which app you need until you have looked at three others. With REST, the developer writes that loop. With MCP, the agent writes it mid task, without stopping to ask.

That matters when the agent is halfway through building a screen and decides it should go and see how three other apps solved the same problem.

If you build something with it, I would like to see it.

Jaimin, building Appllama

Top comments (0)