Align paywall builder with design-system async generation flow

README.md

@@ -8,7 +8,17 @@ Configure RevenueCat projects, products, entitlements, and offerings directly fr
 
 - Claude Code version 1.0.33 or later (run `claude --version` to check)
 
-### Method 1: Using `--plugin-dir` Flag (Quick Start)
+### Method 1: One-Line Install Script (Recommended)
+
+```bash
+curl -fsSL https://raw.githubusercontent.com/RevenueCat/rc-claude-code-plugin/main/install.sh | bash
+```
+
+This script clones the plugin to `~/.claude/plugins/rc-claude-code-plugin` and automatically adds it to your `~/.claude/settings.json`. Restart Claude Code when it completes.
+
+> **Update an existing installation:** Run the same command again — it will `git pull` the latest changes and ensure your settings are correct.
+
+### Method 2: Using `--plugin-dir` Flag (Per-Session)
 
 1. Clone this repository:
 
@@ -28,7 +38,7 @@ Configure RevenueCat projects, products, entitlements, and offerings directly fr
    claude --plugin-dir /path/to/rc-claude-code-plugin --plugin-dir /path/to/other-plugin
    ```
 
-### Method 2: Permanent Installation via Settings (Recommended)
+### Method 3: Permanent Installation via Settings (Manual)
 
 1. Clone this repository:
 
@@ -71,7 +81,7 @@ Configure RevenueCat projects, products, entitlements, and offerings directly fr
    }
    ```
 
-3. Restart Claude Code or reload the plugin:
+3. Restart Claude Code:
 
    ```bash
    claude
@@ -91,9 +101,9 @@ You can also use natural language to trigger agents:
 - "Set up RevenueCat for my app"
 - "Debug my RevenueCat configuration"
 
-### Future: Installing from Claude Plugin Marketplace
+### Claude Plugin Marketplace
 
-This plugin will soon be available via the official Claude Code plugin marketplace for easier installation. Stay tuned!
+This plugin will soon be available via the official Claude Code plugin marketplace for one-click installation. Stay tuned!
 
 ## Authentication
 

agents/design-direction-schema.json

@@ -0,0 +1,102 @@
+{
+  "app_context": {
+    "app_name": "string",
+    "app_store_url": "string",
+    "developer_name": "string",
+    "category": "string",
+    "one_line_description": "string"
+  },
+  "brand_identity": {
+    "brand_mission": "string",
+    "brand_personality_archetype": "string",
+    "core_values": [
+      "string"
+    ]
+  },
+  "target_audience": {
+    "primary_user_persona": "string",
+    "user_needs_and_goals": [
+      "string"
+    ],
+    "user_pain_points": [
+      "string"
+    ]
+  },
+  "problem_solution_fit": {
+    "problem_statement": "string",
+    "solution_statement": "string",
+    "unique_selling_propositions": [
+      "string"
+    ]
+  },
+  "tone_of_voice": {
+    "primary_tone": "string",
+    "secondary_tone": "string",
+    "keywords_and_phrases": [
+      "string"
+    ],
+    "communication_style_summary": "string"
+  },
+  "visual_language": {
+    "color_palette": {
+      "primary_brand_color": "#HEX",
+      "secondary_brand_color": "#HEX",
+      "accent_cta_color": "#HEX",
+      "illustration_palette": [
+        "#HEX"
+      ],
+      "background_colors": [
+        "#HEX"
+      ],
+      "palette_mood": "string"
+    },
+    "typography": {
+      "headline_font_family": "string",
+      "body_font_family": "string",
+      "typographic_style": "string"
+    },
+    "illustration_and_imagery_style": {
+      "primary_style": "string",
+      "iconography_style": "string",
+      "mascot_description": "string"
+    },
+    "default_image_style": {
+      "recraft_style": "digital_illustration | vector_illustration | realistic_image | icon",
+      "recraft_substyle": "string (optional; omit when not applicable)"
+    }
+  },
+  "visual_asset_strategy": {
+    "extraction_confidence": "high | medium | low | none",
+    "primary_asset_type": "illustration | photography | abstract | ui_focused | mixed",
+    "extraction_source": "string",
+    "recommended_approach": {
+      "for_paywall_images": "string",
+      "style_rationale": "string",
+      "alternative_approach": "string"
+    },
+    "category_inference": {
+      "category_typical_imagery": "string",
+      "audience_expectations": "string",
+      "recommended_recraft_style": "digital_illustration | vector_illustration | realistic_image | icon",
+      "recommended_recraft_substyle": "string (optional; omit when not applicable)"
+    }
+  },
+  "ui_patterns": {
+    "button_style": "string",
+    "card_style": "string",
+    "overall_layout_philosophy": "string"
+  },
+  "content_strategy": {
+    "key_content_themes": [
+      "string"
+    ],
+    "premium_feature_highlights": [
+      "string"
+    ]
+  },
+  "transparency_suitability": {
+    "suitable_for_transparent_bg": true,
+    "confidence": "high | medium | low | none",
+    "reasoning": "string"
+  }
+}

agents/design-system-extractor.md

@@ -0,0 +1,69 @@
+# Design System Extractor Agent (Design Direction Schema)
+
+## Role
+You are a Design System Extractor operating inside this codebase. Your task is to analyze the project's UI/styling patterns, product copy, and brand cues, then output a single "Design Direction" JSON object that matches the marketing team's schema.
+
+## Goals
+1. Use the codebase as the primary source of truth for visual language (colors, typography, iconography, layout patterns).
+2. Infer brand identity, tone, and audience from README/docs, in-app copy, marketing content, and naming conventions.
+3. Normalize all findings to the canonical schema in `agents/design-direction-schema.json`.
+
+## Inputs
+- Repo source code (styles, themes, components)
+- README/Docs (product positioning, audience, mission)
+- In-app copy strings
+- Any existing screenshots or assets in the repo
+- If an App Store URL is not available, set the field to "Not provided"
+
+## Constraints
+- Prefer codebase evidence over inference; note inferences in field values
+- Use semantic descriptions, not just raw values
+- No secrets or user data
+- No markdown, prose, or explanations outside the JSON payload
+- Output a single valid JSON object starting with `{` and ending with `}`
+- Match key names and nesting exactly to `agents/design-direction-schema.json`
+- Populate all required fields; optional substyle fields may be omitted when not applicable
+- For MCP compatibility, avoid `null` values for style substyle fields
+
+### Canonical Schema Source
+
+Use `agents/design-direction-schema.json` as the single source of truth.
+
+## Visual Asset Strategy Guidelines
+
+### extraction_confidence
+
+- **high**: Clear, distinctive illustrations/characters/photography with consistent style
+- **medium**: Some decorative elements but style not strongly defined
+- **low**: Mostly clean UI with minimal decorative elements
+- **none**: Pure UI patterns with no illustrations or distinctive imagery
+
+### primary_asset_type
+
+- **illustration**: Custom illustrations, characters, hand-drawn elements
+- **photography**: Real photos, lifestyle imagery
+- **abstract**: Gradients, shapes, patterns, geometric designs
+- **ui_focused**: Clean UI with just icons and interface elements
+- **mixed**: Combination of multiple types
+
+When confidence is low/none, fill out `category_inference` using app category norms, target audience expectations, and brand personality.
+
+### Choosing default_image_style
+
+- If confidence is high/medium: Use style extracted from actual assets
+- If confidence is low/none: Use `category_inference.recommended_recraft_style`
+
+### Recraft Styles
+
+- `digital_illustration` (hand_drawn, 2d_art_poster, infantile_sketch, grain, handmade_3d) -> characters, soft graphics
+- `vector_illustration` (line_art, linocut, engraving) -> flat/geometric designs
+- `realistic_image` (natural_light, studio_portrait, hdr) -> lifestyle/product photos
+- `icon` (no substyle) -> simple icons only
+
+## Extraction Process
+
+1. **Identify framework**: Detect UI framework (CSS, Tailwind, RN, SwiftUI, etc.) and locate theme/config files
+2. **Extract visuals**: Colors (hex, CSS vars), typography (families, weights), icons, layout patterns
+3. **Gather brand cues**: Scan README/docs and UI copy for positioning, tone, premium features
+4. **Populate schema**: Use exact codebase values; infer only when necessary and note in field text
+5. **Validate**: Ensure valid JSON with required fields populated; omit optional substyle fields when not applicable