Open source · MIT

Frontend spec-driven
development, done right

Kiro-style specs for Flutter, Next.js, and React Native — from requirements and gap analysis to UI design and implementation tasks.

Get started View on GitHub
Flutter Next.js React Native Cursor MCP Claude Desktop

Why SpecDrive

Structure for frontend teams

Backend has OpenAPI and Spec Kit. Frontend needs specs focused on screens, components, navigation, and accessibility.

📋

Kiro-style gates

Approve requirements, gap-analysis, design, and tasks before writing code.

🔍

Gap analysis

Compare requirements against your codebase — know what's missing before design.

🎨

HLD + LLD drive UI

Architecture overview + concrete files/classes — then checkbox tasks. Human approves every gate.

🤖

AI-agnostic

Free LLM in CLI, or MCP in Cursor/Claude using your host AI keys.

Workflow

Kiro-style pipeline

brief ✓ → requirements ✓ → gap ✓ → HLD ✓ → LLD ✓ → tasks ✓ → Implement

Quick start

Install in seconds

terminal 
npm install -g @specdrive/cli
spec init --stack flutter
spec create "Product Review Screen"
export GEMINI_API_KEY="your-key"
spec gap-analysis --spec product-review-screen

Modes

CLI vs MCP

ModeGenerates docsAPI keys
CLI / npm SpecDrive free LLM chain GEMINI_API_KEY, Groq, or Ollama
MCP Host AI (Cursor / Claude) Your editor's key — SpecDrive never calls LLM

MCP setup guide →

Explore

Documentation

🚀

Getting started

Install, init, and run your first spec workflow.
⌨️

CLI reference

All spec commands and environment variables.
🔌

MCP setup

Cursor, Claude Desktop, and npm install.
📄

Spec format

requirements, gap-analysis, design, tasks templates.