AgentSkillsCN

n8n-saas-builder

围绕经过验证的n8n工作流构建完整的SaaS前端包装。在希望创建网站、构建UI、制作SaaS产品，或用友好的界面包装n8n工作流时使用此技能。生成连接n8n webhook的Next.js/React前端，使用Tailwind CSS。

SKILL.md
--- frontmatter
name: n8n-saas-builder
description: Builds a complete SaaS frontend wrapper around validated n8n workflows. Use this skill when you want to CREATE A WEBSITE, BUILD A UI, MAKE A SAAS PRODUCT, or WRAP AN N8N WORKFLOW in a user-friendly interface. Generates Next.js/React frontends with Tailwind CSS that connect to n8n webhooks.

n8n SaaS Builder

Transform any validated n8n workflow into a production-ready SaaS product. This skill analyzes your workflow's webhook inputs and automatically generates a beautiful frontend that non-technical users can interact with.

Capabilities

  • •Analyze n8n workflow JSON to identify required inputs
  • •Generate Next.js/React frontend with Tailwind CSS
  • •Create responsive, modern UI with loading states
  • •Connect frontend to n8n webhook endpoints
  • •Add user authentication (optional - using Clerk)
  • •Deploy to Vercel with one command
  • •Generate mobile-friendly designs

How to Use

  1. •Validate first - Run your workflow through n8n-workflow-validator
  2. •Provide the clean JSON - Upload the validated workflow
  3. •Specify preferences - Tell me your design preferences (optional)
  4. •Get your app - I generate the complete frontend code
  5. •Deploy - I can deploy to Vercel for you

Input Format

  • •Validated n8n JSON: The clean workflow from the validator
  • •Design preferences (optional): Color scheme, style, branding
  • •Webhook URL: Your production n8n webhook URL (or I'll use a placeholder)

Output Format

  • •Complete Next.js project with all files
  • •Tailwind CSS styling - Modern, responsive design
  • •API integration - Connected to your n8n webhook
  • •Deployment instructions - Ready for Vercel
  • •README - How to customize and run locally

What Gets Generated

code
my-saas-app/
├── src/
│   ├── app/
│   │   ├── page.tsx          ← Main landing page with form
│   │   ├── layout.tsx        ← App layout and metadata
│   │   └── globals.css       ← Tailwind imports
│   └── components/
│       ├── InputForm.tsx     ← Dynamic form based on webhook inputs
│       ├── ResultCard.tsx    ← Display webhook response
│       └── LoadingSpinner.tsx
├── public/
├── package.json
├── tailwind.config.js
├── next.config.js
└── README.md

Example Usage

"Build a SaaS frontend for my validated n8n workflow"

"Create a website that connects to my n8n webhook - I want it dark mode with purple accents"

"Turn this workflow into a product my clients can use without seeing n8n"

"/build-saas clean_workflow.json"

Design Options

Style Presets:

  • •modern - Clean, minimal, lots of whitespace (default)
  • •glassmorphism - Frosted glass effects, dark mode
  • •corporate - Professional, trustworthy, blue tones
  • •playful - Rounded corners, gradients, friendly

Color Schemes:

  • •Default: Dark mode with purple accents
  • •Custom: Tell me your brand colors

Best Practices

  1. •Validate first - Always run n8n-workflow-validator before building UI
  2. •Test locally - Run npm run dev to test before deploying
  3. •Set your webhook URL - Replace the placeholder with your real URL
  4. •Add authentication - For paid products, add Clerk or similar
  5. •Customize branding - Update colors/logo to match your brand

Limitations

  • •Requires a validated workflow with a webhook trigger
  • •Complex multi-step workflows may need manual UI adjustments
  • •Authentication (Clerk) setup requires additional configuration
  • •File uploads require extra handling (base64 encoding)

Tech Stack

  • •Framework: Next.js 14 (App Router)
  • •Styling: Tailwind CSS
  • •Icons: Lucide React
  • •Deployment: Vercel-ready
  • •Optional Auth: Clerk