| name | saas-creator |
| description | An end-to-end pipeline to move from a natural language 'vibe' to a deployed SaaS product. Orchestrates design DNA extraction via Google Stitch, code generation via Google AI Studio, and deployment via Firebase + GitHub Actions. |
| version | 1.0.0 |
| trigger | /saas-create |
| agents | ["@pm","@engineer","@qa","@devops"] |
| halt_gates | ["User approval of REQUIREMENTS.md before design extraction","User approval before any cloud resource provisioning"] |
| tools | ["stitch_api","firebase_cli","github_cli","python_scripts"] |
GSD SaaS Creator
Portable Agent Skill for the Design-to-Deployed autonomous pipeline.
Overview
Orchestrates a specialized team of AI agents to transform a single natural language product intent into a live, production-ready SaaS application in as little as 23 minutes.
Pipeline: Vibe Prompt โ Requirements โ Stitch Design DNA โ Architecture โ Code โ Tests โ Deploy
Integrations: Google Stitch (design) ยท Google AI Studio (logic) ยท Firebase (backend/hosting) ยท GitHub Actions (CI/CD)
Orchestration Logic
Phase 1: Intent & Requirements
- Goal: Translate user intent into a signed-off technical specification.
- Agent:
@pm
- Steps:
- Interview user: capture product name, target user, core problem, key features.
- Generate
REQUIREMENTS.md using templates/REQUIREMENTS.md.j2.
- Present to user for review.
- HALT GATE: User must explicitly approve
REQUIREMENTS.md before proceeding.
Phase 2: Visual DNA (Google Stitch)
- Goal: Extract the design system tokens and component map from Stitch.
- Agent:
@engineer
- Steps:
- Run
scripts/extract_dna.py <stitch_project_id> โ produces design_tokens.json.
- Run
scripts/render_templates.py DESIGN.md โ maps tokens into DESIGN.md.
- Validate color palette, typography, and component completeness.
Phase 3: System Architecture
- Goal: Define the full technical stack and data contracts.
- Agent:
@engineer
- Steps:
- Define Firestore data schema (collections, documents, fields).
- Define Firebase Authentication flow (email/password, OAuth providers).
- Define API surface: Firebase Functions endpoints and payload schemas.
- Confirm tech stack: React/Next.js ยท Tailwind ยท Firebase ยท GitHub Actions.
Phase 4: Code Generation & Testing
- Goal: Scaffold and validate a production-quality application.
- Agents:
@engineer, @qa
- Steps:
@engineer: Run scripts/scaffold.py to generate project skeleton from DESIGN.md.
@engineer: Implement Firebase Functions and Firestore integration.
@qa: Run unit tests (npm test) and visual regression checks.
@qa: Verify auth flows, CRUD operations, and API error handling.
- Fix any blocking issues before proceeding.
Phase 5: Deployment to Production
- Goal: Deliver a live URL.
- Agent:
@devops
- Steps:
- Render
templates/deploy.yml.j2 into .github/workflows/deploy.yml.
- Push code to GitHub repository.
- HALT GATE: User must approve before cloud resource provisioning.
3. Run
scripts/deploy.py to provision Firebase project and Hostinger webhook.
4. Trigger GitHub Actions โ confirm green deploy.
5. Return live URL to user.
Tooling
| Tool | Purpose |
|---|
scripts/extract_dna.py | Pull design tokens from Stitch API |
scripts/render_templates.py | Render Jinja2 templates with extracted data |
scripts/generate_design_md.py | Generate canonical design.md from brief.md + designlang artifacts |
scripts/agent_workflow.py | Route agent stages, validate artifacts, and write pipeline-events.jsonl |
scripts/dry_run_design_pipeline.py | Run the Design.md automation locally with live Gemini or offline fixtures |
scripts/scaffold.py | Generate project skeleton from DESIGN.md |
scripts/deploy.py | Provision Firebase + trigger deployment |
templates/agent-contracts.json | Executable PM/Engineer/QA/DevOps stage contracts |
templates/DESIGN.md.j2 | Design DNA document template |
templates/REQUIREMENTS.md.j2 | Requirements document template |
templates/deploy.yml.j2 | GitHub Actions CI/CD workflow template |
reference/firebase_security_rules.txt | Baseline Firestore security rules |
reference/stitch_schema.json | Stitch token schema for validation |
Environment
All credentials must be set as environment variables (see .env.example). No secrets are stored in code.
STITCH_API_KEY โ Google Stitch API key
FIREBASE_TOKEN โ Firebase CLI auth token
GITHUB_TOKEN โ GitHub personal access token
HOSTINGER_WEBHOOK_URL โ Hostinger deploy webhook (optional)