| name | product-engine |
| description | Product creation and packaging pipeline. Creates premium digital products from FrankX component library, agentic AI systems, and design assets. Actions: create, package, publish, price, bundle. Products: UI kit, dashboard template, SaaS starter, agentic system, content engine, component library. Formats: Next.js, React, Tailwind, shadcn, Python, Notion, Obsidian. Channels: Gumroad, GitHub, frankx.ai. |
Product Engine - Creation & Packaging Pipeline
End-to-end system for creating, packaging, and publishing premium digital products that mix design excellence with agentic AI capabilities.
Pipeline Overview
Idea → Research → Design → Build → Package → Price → Publish → Track
| | | | | | | |
v v v v v v v v
Market Comp. UI/UX Code Bundle Value Gumroad Analytics
Signal Analysis Skill Review Assets Ladder + Store + Iterate
Product Categories
Tier 1: Starter Products ($19-47)
| Product | Format | Target |
|---|
| UI Component Kits | Next.js + Tailwind + shadcn | Developers building SaaS |
| Prompt Libraries | PDF + Notion | Creators using AI tools |
| Template Packs | Next.js pages | Developers needing landing pages |
Tier 2: System Products ($97-297)
| Product | Format | Target |
|---|
| Dashboard Templates | Full Next.js app | SaaS founders |
| Content Engines | Next.js + AI integrations | Creator businesses |
| Agentic Workflow Kits | Claude Code skills + Python | AI developers |
Tier 3: Premium Products ($497-997)
| Product | Format | Target |
|---|
| Full SaaS Starters | Production Next.js app | Startup teams |
| Creator Operating Systems | Multi-tool ecosystem | Professional creators |
| AI Agent Frameworks | Python + TypeScript + MCP | AI architects |
Tier 4: Enterprise ($4,800+)
| Product | Format | Target |
|---|
| Custom Studio Builds | Bespoke | Organizations |
| Creator Residencies | Ongoing partnership | Scaling creators |
Product Creation Workflow
Step 1: Market Research
Step 2: Component Audit
Review existing FrankX components for reuse:
components/ui/ - PremiumCard, AuroraGradient, ShimmerButton, etc.components/ui/AdvancedAnimations.tsx - MorphingBackground, MagneticHover, etc.components/ui/CursorSpotlight.tsx - Interactive effectscomponents/products/ - ProductHero, OfferStack, CaseStudyGridapp/design-lab/ - v1, v2, v3 template showcases
Step 3: Build Product
Follow the agent pipeline (see agents/ directory):
- Product Architect designs the product structure
- UI Engineer builds components with ui-ux-pro-max skill
- Agentic Engineer adds AI integrations where applicable
- Quality Reviewer runs checklist (see below)
- Package Engineer bundles for distribution
Step 4: Quality Gate
Before any product ships:
Step 5: Pricing
Follow the value ladder:
- $19: Single component or template
- $27-47: Small collection or prompt pack
- $97: Full template with multiple pages
- $197-297: System with AI integrations
- $497-997: Complete production-ready product
- $4,800+: Custom builds and partnerships
Step 6: Publishing Channels
| Channel | Commission | Best For |
|---|
| Gumroad | 10% | Digital products, prompt packs |
| GitHub Sponsors | 0% | Open source with premium tier |
| frankx.ai/products | 0% | Direct sales, full control |
| v0.dev marketplace | TBD | Component templates |
Step 7: Product Page
Update /data/products.json with product entry.
Create dedicated page at /app/products/[slug]/page.tsx.
Components: ProductHero, OfferStack, CaseStudyGrid, FinalCTA.
Agentic AI + Design Products (Differentiator)
The unique FrankX advantage: products that combine premium design with agentic AI capabilities.
What This Means In Practice
Standard template: A dashboard with charts and tables.
FrankX product: A dashboard with charts, tables, AND:
- Claude Code skill that generates new dashboard widgets from natural language
- Python script that connects to analytics APIs automatically
- MCP server config for real-time data updates
- Prompt library for customizing the dashboard
Product Ideas That Mix Both
-
Aurora UI Kit + Agentic Builder
- 30+ premium components (design)
- Claude Code skill that generates new components in the same style (AI)
- Python script for batch-generating variants (automation)
-
Content Command Center
- Dashboard for tracking content pipeline (design)
- AI writing assistant with SEO optimization built in (AI)
- Automated social media distribution (automation)
-
Creator Analytics Dashboard
- Real-time metrics visualization (design)
- AI-powered insights and recommendations (AI)
- Automated reporting and alerts (automation)
Integration Points
- ui-ux-pro-max skill: Design intelligence for all visual products
- ACOS auto-router: Detects product creation intent, routes to this skill
- frankx-ai-products command: Product management and updates
- Nano Banana MCP: Generate product screenshots and marketing images
- Gumroad: Primary sales channel
- Vercel: Hosting for demo sites and frankx.ai store
