front-kit

Front Kit

Spec-driven development for distinctive frontend design with AI agents.

AI agents produce generic-looking websites because one prompt is asked to do three jobs at once: pick an aesthetic position, define content and structure, and write code. Front Kit separates those jobs into a disciplined pipeline of slash commands and artifacts — so the design decisions happen before the code, get written down, and are enforced all the way to the final audit.

Works with Claude Code, GitHub Copilot, Cursor, Windsurf and Gemini CLI.

Quickstart

npx front-kit init          # in your project directory

Then restart your IDE/agent so it loads the commands, and run:

/fk.constitution                 # set your non-negotiable design principles
/fk.direction <your brief>       # explore 3 distinct design directions

The 8 commands

Command	What it does	Output
/fk.constitution	Non-negotiable principles (a11y, performance, responsive, identity)	.frontkit/memory/constitution.md
/fk.direction	Generates 3 aesthetically distant variants from the brief, self-checked against known AI-default looks; you choose	designs/NNN-*/direction.md
/fk.specify	Pages, sections, real content (lorem forbidden), component states, breakpoints	spec.md
/fk.tokens	Semantic design tokens, fresh from the direction or --scanned from an existing codebase	tokens.json + design-system.md
/fk.plan	Maps direction+spec+tokens to your declared stack, with a constitution gate	plan.md
/fk.tasks	Phased task list with visual DoDs (tokens → layout → components → pages → motion → polish)	tasks.md
/fk.implement	Executes tasks in batches with a self-critique pass before showing you results	code + updated tasks.md
/fk.critique	Audits any state against the direction and constitution, findings cited verbatim	critique-NN.md

Why it doesn't come out generic

• anti-generic.md names the default looks precisely — the 3 classics (cream+serif+terracotta, near-black+acid accent, hairline broadsheet) and the modern ones (purple-gradient AI product, glass-everything, uniform bento, Linear-clone) — and bans them unless the brief asks.
• A curated direction library (200 cataloged, growing): each direction ships with an AA-verified palette, a Google Fonts pairing with rationale, concrete layout rules, a motion personality, implementation hints with real KB costs, and its own default-trap with antidote. Modern-trend families (bento grids, dark product, aurora/gradient, glass, motion-first/scroll, 3D/spatial, neo-brutalism, minimal premium, interaction-led) plus heritage families (print, technical, cultural, atmospheric).
• Adaptation is mandatory: copying a reference verbatim is defined as a failure — palettes and type are re-derived from your subject's world.
• Gates all the way down: the plan checks the constitution, implement refuses to run without artifacts, critique quotes the direction back at the implementation.

What this is not

No canvas, no Figma integration, no rendering sandbox, no component library. Front Kit is the process discipline, portable to any agent that reads markdown commands. If you need a visual design tool, use one — then bring the decisions here so they survive implementation.

The direction library

Directions live in .frontkit/references/ after install. Each is a complete, executable aesthetic: bento-hierarchy, linear-discipline, aurora-veil, glass-strata, scroll-chapters, spatial-object, neo-brutalist-punch, type-monument, cursor-stage, terminal-crt, blueprint-draft, andean-textile, and more. See CATALOG.md for all 200 planned entries and CONTRIBUTING.md to author one.

Credits & inspirations

• spec-kit (GitHub, MIT) — the spec-driven command/artifact mechanism this adapts to design.
• Kombai — conceptual reference for self-critique refinement passes.
• Anthropic's frontend-design guidance — reference point for the anti-generic rules (all text here is original writing).

License

MIT 2026 Luis Barra