saccoai-frontend-design
This skill produces a creative design direction for any frontend project. It transforms extracted design tokens and site analysis into a distinctive visual identity — typography choices, color strategy, spatial composition, motion narrative, and a signature element that makes the project unforgettable.
The user provides: a project context (URL, description, or brief), and optionally a mood or aesthetic preference. When running inside the saccoai pipeline, it reads .saccoai/design-system/ and .saccoai/analysis/ automatically.
Why This Exists
AI-built frontends converge on the same look: Inter font, purple-to-blue gradient, white background, evenly-spaced card grids, predictable hero sections. This happens because models default to statistically common patterns. Every project built with saccoai skills should look like it was designed for that specific client by someone who cares about craft. This skill is the mechanism that ensures that.
The goal is not maximalism for its own sake. A minimal site can be just as distinctive as an elaborate one — what matters is intentionality. Every typographic choice, color relationship, and spatial decision should have a reason.
Design Thinking Process
Before writing any code or selecting any component, work through these five questions. Write the answers into the design brief.
Q1: What is the emotional territory?
Not "what industry" — that produces formulaic output. Instead: what should someone feel when they land on this site?
Examples of emotional territories (combine 2-3):
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