OpenCode UI design for paywalls people trust

Ask an agent for a paywall and you often get one that converts badly or annoys people: a weekly price that hides the real one, a trial that doesn't say when the charge comes, a close button that appears after a delay. People notice, and they leave or ask for refunds.

Example task used in this guide: rebuild a mobile app's paywall so people understand exactly what they're buying.

A paywall people trust

A good paywall answers three questions before the button: what do I get, what does it cost and when, and how do I get out. Agents rarely answer all three unless you ask, so write the answers down as rules.

Put the rules in AGENTS.md

OpenCode reads AGENTS.md for project rules, and /init can start one for you. Add a paywall section like this:

# Paywall

- Show what the person gets before the price: 3 concrete benefits, no vague claims.
- Every plan shows its full price and period ("$59.99 per year"). A monthly equivalent is extra, never instead.
- Trials say exactly when the first charge happens and how much it is.
- One plan is preselected and marked as recommended; the main button says what happens ("Start 7-day free trial").
- Restore Purchases, Terms and Privacy are always visible. The close button is visible from the start.
- Show loading, failed purchase and "already subscribed" states.
- Reuse our existing Button and Text components. No new colors.

Each rule is something you can check on the screen. "Make pricing clear" isn't; "full price and period on every plan" is.

Plan before Build

OpenCode has two main agents: Plan, which analyzes without changing files, and Build, which makes the changes. Press Tab to switch. Start in Plan: have it read the paywall and list what breaks your rules, then switch to Build once you agree on the list.

Study real paywalls

With UXKIN connected, OpenCode can call find_ui_references with plain words like "subscription paywall annual trial" and get paywalls from real apps, then open a whole upgrade flow with get_journey.

Ask it to compare three on a few points: what comes before the price, how the trial and price are worded, and where close and Restore sit. Then have it say which decisions it's adopting. You're borrowing decisions, not screens.

Check it like a buyer

• Find the full price of each plan without doing any math.
• Read the trial wording: it says when the first charge happens and how much.
• Close it right away. The close button is there from the first frame.
• Tap Restore Purchases, fail a purchase, and open it as someone already subscribed. Each has a clear state.
• Small and large phones, light and dark mode, and the largest text size.

Set up UXKIN in OpenCode

UXKIN connects as a remote MCP server, and you sign in with your UXKIN account, so there's no token to copy. You need a UXKIN plan (Monthly or Lifetime).

1. Add UXKIN to your OpenCode config: ~/.config/opencode/opencode.json for all your projects, or opencode.json in one project.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "uxkin": {
      "type": "remote",
      "url": "https://uxkin.com/mcp"
    }
  }
}

2. In your terminal, run opencode mcp auth uxkin. When the UXKIN page opens, log in and click Allow. (OpenCode also asks on its own the first time it needs UXKIN.)
3. Run opencode mcp list to check that uxkin is connected.

To share one setup with a team instead, use a token. This reads it from a UXKIN_TOKEN environment variable, so the file is safe to commit:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "uxkin": {
      "type": "remote",
      "url": "https://uxkin.com/mcp",
      "oauth": false,
      "headers": {
        "Authorization": "Bearer {env:UXKIN_TOKEN}"
      }
    }
  }
}

Set UXKIN_TOKEN to the token from your setup prompt. Never paste the token itself into a file you commit.

Add the UXKIN skills

UXKIN also publishes free skills that work with no account, like no-ui-slop and uxkin-research. OpenCode loads skills from .agents/skills, which is where this installs them:

npx skills add uxkin/agent

A prompt you can use

Adapt it to your own paywall. It starts in Plan, asks for real references and lists what to check:

Rebuild the paywall in app/paywall.tsx. Today it shows only a monthly price per week, hides the close button for 5 seconds and has no Restore Purchases.

Start in the Plan agent: read the screen and AGENTS.md, and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "subscription paywall annual trial" and with "paywall restore purchases". Compare three: what they show before the price, how they word the trial and the price, where the close and Restore buttons are. Tell me which decisions you're adopting.

Then switch to Build and:
- Show 3 concrete benefits first.
- Show each plan's full price and period; preselect the yearly plan as recommended.
- Word the trial with the date and amount of the first charge.
- Make close, Restore Purchases, Terms and Privacy visible from the start.
- Add loading, failed purchase and already-subscribed states.

Run it on a small and a large phone and in dark mode. List each change in one line.

Questions