Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

paywall-upgrade-cro · nexu-io — Claude Code skill: design paywalls and upgrade

A skill for designing and optimizing upgrade screens, paywalls, and upsell modals. Speeds up SaaS conversion design and pricing-page experiments.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add nexu-io/open-design --skill paywall-upgrade-cro -a claude-code
Open on GitHub

What paywall-upgrade-cro does

paywall-upgrade-cro provides structured approaches to designing screens that drive users toward paid plans. It works as a design system—systematic templates rather than one-off mockups—with patterns for upsell modals, upgrade flows, and pricing layouts you can adapt to your product.

The skill includes guidelines for copy, visual hierarchy, and call-to-action placement proven effective in SaaS conversion. Install with a single command, and the agent will suggest it whenever you mention paywall, upgrade screen, or upsell modal in your prompt.

For additional assets and examples, refer to the upstream marketingskills repository. The skill integrates marketing-creative best practices into your design workflow, cutting the time between idea and testable variant.

What it helps with

  • design a paywall that doesn't frustrate users
  • write effective copy and hierarchy for an upgrade screen
  • build an upsell modal that drives purchases
  • create pricing-page variants for A/B testing
  • increase conversion on tier-selection screens

Example prompts for the agent

  • Design a paywall for a SaaS with three subscription tiers
  • Create an upsell modal to improve ARPU
  • Generate upgrade-screen variations and CRO recommendations

How to install paywall-upgrade-cro

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill paywall-upgrade-cro -a claude-code

2Manually: put the files in place

~/.claude/skills/paywall-upgrade-cro/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/paywall-upgrade-cro/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Other versions of paywall-upgrade-cro

Similar

gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs magic-ui magicuidesign The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. Claude Code CX Codex Cursor +1 1,200installs draw-io-diagram-generator official github Creates and edits draw.io diagrams in .drawio, .drawio.svg, and .drawio.png files. Use it when an agent needs to produce a diagram from a project request. GitHub Copilot 2,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about paywall-upgrade-cro

How do I install paywall-upgrade-cro in Claude Code?

Run npx skills add nexu-io/open-design --skill paywall-upgrade-cro -a claude-code. The skill will be installed to ~/.claude/skills/paywall-upgrade-cro/SKILL.md and available to your agent.

What does paywall-upgrade-cro do?

It provides templates and patterns for designing upgrade screens, paywalls, and upsell modals. Covers layout, messaging, and visual hierarchy to maximize SaaS conversion.

Where does paywall-upgrade-cro source its material?

The skill draws from marketing-creative methodology in the marketingskills repository. Additional examples and assets are available in the upstream GitHub repo.

Source text

SKILL.md · Apache-2.0
---
name: paywall-upgrade-cro
description: |
  Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.
triggers:
  - "paywall"
  - "upgrade screen"
  - "cro paywall"
  - "upsell modal"
  - "pricing screen"
od:
  mode: design-system
  category: marketing-creative
  upstream: "https://github.com/coreyhaines31/marketingskills"
---

# paywall-upgrade-cro

> Curated from Corey Haines.

## What it does

Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.

## Source

- Upstream: https://github.com/coreyhaines31/marketingskills
- Category: `marketing-creative`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/coreyhaines31/marketingskills
```

Then ask the agent to invoke this skill by name (`paywall-upgrade-cro`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor