saccoai-design-variations
This skill takes an already-built website and produces N alternative design directions — each on its own git branch with a Vercel preview URL. The client gets a comparison table with clickable links to review each direction side-by-side before committing to one.
The skill works on any Next.js project, whether built by the saccoai pipeline or not. It invokes saccoai-frontend-design once per variation, using cross-variation constraints to guarantee each direction is genuinely different — not just a palette swap of the same idea.
Inputs
| Input | Required | Default | Description |
|---|---|---|---|
| Project path | Yes | cwd | Path to an existing built Next.js project |
--variations N |
No | 3 | Number of alternative designs to generate |
--depth shallow|deep |
No | shallow | How much of the visual layer to change |
| Aesthetic hints | No | auto-diversify | Optional per-variation direction (e.g., "make one brutalist, one editorial") |
Execution Model
Single-agent hybrid. Sequential by default. Uses superpowers for parallelism:
- dispatching-parallel-agents for Phase 2 (generating N design briefs in parallel) and Phase 4 (deploying N branches in parallel)
- Phase 3 is sequential per variation — git branch operations cannot be parallelised
More from saccoai/agent-skills
website-analysis
Crawl any website in a single pass to produce both a complete structural map and full content extraction. Discovers all pages, routes, navigation, multilingual variants, and issues while simultaneously extracting all text, images, metadata, and assets. Use before any migration, redesign, or audit.
16nextjs-fullstack
Opinionated Next.js fullstack patterns — App Router, Tailwind CSS v4, shadcn/ui, Better Auth, Drizzle ORM, Server Actions, and Vercel deployment. Use when scaffolding a new project or enforcing consistent architecture across client projects.
13seo-migration
SEO preservation during website migrations — redirect mapping, canonical URLs, sitemap generation, structured data, meta tags, and Search Console verification. Use when rebuilding a site to ensure zero SEO loss from URL changes, content moves, or domain switches.
9project-handoff
Generate complete client handoff documentation — deployment guide, environment setup, CMS instructions, maintenance checklist, architecture overview, and operational runbook. Use when delivering a finished project to a client or their team.
8client-proposal
Generate a professional project proposal from a website audit. Analyzes the prospect's current site, identifies issues, and produces a structured proposal with scope, deliverables, tech recommendations, and phased timeline. Use as a sales tool or for scoping client engagements.
6web-audit
Comprehensive website quality audit — Lighthouse scores, accessibility (axe-core), cross-browser testing, performance budgets, and mobile responsiveness. Generates actionable reports with pass/fail per page. Use to audit any live website or as a QA gate before deployment.
6