Using Grit with Claude
Build entire full-stack applications using AI spec-driven development. Plan with Claude Web, build with Claude Code — ship in hours, not weeks.
The Workflow
The Grit + Claude workflow is a 3-step process that turns a project idea into a fully scaffolded, working application. You use Claude Web (claude.ai) to plan and generate spec files, then hand those specs to Claude Code (the CLI agent) to execute every command and build the entire project automatically.
Plan
Open claude.ai and describe your project. Ask Claude to generate 3 spec files.
Spec
Claude outputs 3 files: project-description.md, claude-code-prompt.md, and project-phases.md.
Build
Feed the specs to Claude Code. It runs every grit command, generates resources, and builds the app.
Why two Claudes? Claude Web excels at creative planning and writing detailed specifications. Claude Code excels at executing commands, editing files, and building working software. Together, they cover the full spectrum from idea to deployed application.
Step 1: Planning with Claude Web
Open claude.ai and describe your project idea in detail. The more specific you are about your models, fields, relationships, user roles, and features, the better the output will be. Tell Claude about Grit so it generates specs that use the correct CLI commands and field types.
Here is the exact prompt template you can paste into Claude Web. Replace the bracketed sections with your own project details:
I want to build a [PROJECT NAME] using the Grit framework. Grit is a full-stack meta-framework that uses: - Go backend (Gin web framework + GORM ORM) - Next.js frontend (React + App Router + TypeScript) - Admin panel (resource-based, Filament-like) - Monorepo with shared types and validation (Zod) - Docker for infrastructure (PostgreSQL, Redis, MinIO) Here's what I want to build: [DESCRIBE YOUR PROJECT IN DETAIL] Please create these 3 files for me: 1. project-description.md — Full project spec with all models, their fields (use Grit field types: string, text, int, uint, float, bool, datetime, date, slug, belongs_to, many_to_many), relationships, user roles, and features. 2. claude-code-prompt.md — Step-by-step instructions that I'll give to Claude Code (AI coding agent). Include exact grit CLI commands to run in order. Use `grit generate resource <Name> --fields "..."` syntax. 3. project-phases.md — A phased build plan with checkboxes. Phase 1: scaffold + core models. Phase 2: relationships + complex features. Phase 3: frontend customization + polish.
Example: Job Board Application
Here is what a filled-in prompt looks like for a Job Board app:
I want to build a Job Board using the Grit framework. Grit is a full-stack meta-framework that uses: - Go backend (Gin web framework + GORM ORM) - Next.js frontend (React + App Router + TypeScript) - Admin panel (resource-based, Filament-like) - Monorepo with shared types and validation (Zod) - Docker for infrastructure (PostgreSQL, Redis, MinIO) Here's what I want to build: A job board where companies can post job listings and candidates can browse and apply. Companies have profiles with a name, logo, website, and description. Jobs have a title, description, location, salary range (min and max), job type (full-time, part-time, contract, remote), and a category. Applications track which user applied to which job, with a cover letter and resume URL. There should be an admin panel for managing all resources, and a public frontend for browsing published jobs. User roles: ADMIN (manages everything), EMPLOYER (posts jobs for their company), USER (browses and applies). Please create these 3 files for me: 1. project-description.md 2. claude-code-prompt.md 3. project-phases.md
Claude Web will respond with all 3 files, fully detailed and ready to use. Copy each file into your project directory before moving to Step 2.
The 3 Spec Files
Claude Web generates three Markdown files that together form a complete blueprint for your application. Each file serves a different purpose in the build pipeline.
project-description.md
The full project specification. Contains the project name, description, every model with its fields and relationships, user roles and permissions, feature list, and API endpoints. This is the single source of truth for what the application does.
# Job Board — Project Description ## Overview A full-stack job board where companies post listings and candidates browse and apply. ## Models ### Company - name: string (required) - slug: slug (unique) - logo: string - website: string - description: text - user: belongs_to (the employer who owns it) ### Job - title: string (required) - slug: slug (unique) - description: text (required) - location: string - salary_min: int - salary_max: int - job_type: string (full-time | part-time | contract | remote) - published: bool (default: false) - company: belongs_to - category: belongs_to ### Category - name: string (required, unique) - slug: slug (unique) - description: text ### Application - cover_letter: text - resume_url: string - status: string (pending | reviewed | accepted | rejected) - job: belongs_to - user: belongs_to (the applicant) ## User Roles - ADMIN: full access to all resources - EMPLOYER: can manage their own company and jobs - USER: can browse jobs and submit applications ## Features - Public job listing page with search and filters - Company profile pages - Job detail pages with "Apply" button - Application tracking for users - Admin dashboard with stats and management
claude-code-prompt.md
Step-by-step instructions that you feed directly to Claude Code. Contains the exact grit CLI commands to run, in the correct order. Claude Code reads this file and executes each step automatically.
# Claude Code — Build Instructions Read GRIT_SKILL.md first to understand the framework. Then read project-description.md for the full spec. Execute these steps in order: ## Phase 1: Scaffold and Core Models 1. Scaffold the project: grit new jobboard cd jobboard 2. Start infrastructure: docker compose up -d 3. Add the EMPLOYER role: grit add role EMPLOYER 4. Generate core resources: grit generate resource Category --fields "name:string,slug:slug,description:text" grit generate resource Company --fields "name:string,slug:slug,logo:string,website:string,description:text,user_id:belongs_to" grit generate resource Job --fields "title:string,slug:slug,description:text,location:string,salary_min:int,salary_max:int,job_type:string,published:bool,company_id:belongs_to,category_id:belongs_to" grit generate resource Application --fields "cover_letter:text,resume_url:string,status:string,job_id:belongs_to,user_id:belongs_to" 5. Verify the build: cd apps/api && go build ./... && cd ../.. ## Phase 2: Relationships and Business Logic 6. Update Go models to add Preload in services 7. Add a public endpoint for published jobs 8. Add role-based route guards for EMPLOYER routes 9. Run grit sync to update TypeScript types ## Phase 3: Frontend Customization 10. Customize admin resource definitions 11. Build the public job listing page 12. Build the company profile page 13. Add search and filter functionality
project-phases.md
A phased checklist that breaks the build into manageable stages. Phase 1 covers scaffolding and core models. Phase 2 handles relationships and advanced features. Phase 3 is frontend customization and polish. This prevents Claude Code from trying to do everything at once.
# Job Board — Build Phases
## Phase 1: Scaffold + Core Models
- [ ] Run grit new jobboard
- [ ] Start Docker services
- [ ] Add EMPLOYER role with grit add role
- [ ] Generate Category resource
- [ ] Generate Company resource
- [ ] Generate Job resource
- [ ] Generate Application resource
- [ ] Verify go build ./... passes
## Phase 2: Relationships + Business Logic
- [ ] Add Preload("Company") and Preload("Category") to Job service
- [ ] Add Preload("Job") to Application service
- [ ] Create public /api/jobs/published endpoint
- [ ] Add EMPLOYER route guards for company/job management
- [ ] Add status workflow for applications (pending -> reviewed -> accepted/rejected)
- [ ] Run grit sync to update TypeScript types
- [ ] Verify go build ./... passes
## Phase 3: Frontend + Polish
- [ ] Customize Job admin resource (badges, filters, relation columns)
- [ ] Customize Application admin resource (status badges, job relation)
- [ ] Build public job listing page with search and category filter
- [ ] Build job detail page with Apply button
- [ ] Build company profile page
- [ ] Add application tracking page for logged-in users
- [ ] Test full flow: post job -> browse -> apply -> reviewStep 2: Building with Claude Code
Once you have the 3 spec files from Claude Web, it's time to hand them to Claude Code and let it build the application. Claude Code is an AI coding agent that runs in your terminal — it can execute shell commands, read and edit files, and build entire projects autonomously.
Install Claude Code
Install Claude Code globally using npm. You need Node.js 18+ installed.
npm install -g @anthropic-ai/claude-code
Open your terminal in an empty directory
Create a new folder for your project and navigate into it. Place the 3 spec files from Claude Web into this directory.
mkdir jobboard-project && cd jobboard-project # Place your 3 spec files here: # - project-description.md # - claude-code-prompt.md # - project-phases.md
Start a Claude Code session
Launch Claude Code in the project directory. It will detect the spec files and be ready to execute instructions.
claude
Feed it the claude-code-prompt.md
Tell Claude Code to read the prompt file and execute the instructions. It will scaffold the project, generate every resource, and build the app step by step.
Read claude-code-prompt.md and project-description.md. Execute all the steps in Phase 1 of the build instructions. After each grit command, verify the output looks correct before moving to the next step.
Review and iterate
After each phase, review what Claude Code built. Check that the Go API compiles, models look correct, and the admin panel renders properly. Then tell it to proceed with the next phase, or ask for adjustments.
# After Phase 1 completes: Phase 1 looks good. Now execute Phase 2 from the build instructions. # If something needs fixing: The Job model needs a "deadline" field (datetime). Add it and re-run grit sync. # When ready for frontend work: Execute Phase 3. Customize the admin resources and build the public pages.
The Grit Skill File
Every Grit project generated with grit new includes a GRIT_SKILL.md file in the project root. This file teaches Claude Code (and any other AI assistant) how your Grit project works — the folder structure, CLI commands, code patterns, naming conventions, and injection markers.
When Claude Code opens your project directory, it automatically reads GRIT_SKILL.md and gains full context about how to work with Grit. If you are starting from scratch (before running grit new), you can create this file manually so Claude Code already understands Grit before scaffolding begins.
Tip: Copy the skill file below and save it as GRIT_SKILL.md in your project directory before starting Claude Code. This ensures the AI understands Grit conventions from the very first message.
# Grit Framework — AI Skill Context
> Give this file to any AI coding assistant to teach it how to work with your Grit project.
## What is Grit?
Grit is a full-stack framework: Go (Gin + GORM) backend + Next.js (React + TypeScript) frontend in a monorepo.
## CLI Commands
grit new <name> # Scaffold full project
grit new <name> --api # API only
grit generate resource <Name> --fields "field:type,..." # Full-stack CRUD
grit remove resource <Name> # Remove a resource
grit sync # Sync Go types → TypeScript
grit migrate # Run GORM AutoMigrate
grit seed # Seed database
grit add role <ROLE> # Add a new role
## Field Types
string, text, int, uint, float, bool, datetime, date, slug
belongs_to (e.g., category:belongs_to)
many_to_many (e.g., tags:many_to_many:Tag)
## Project Structure
project/
├── apps/api/ # Go backend (Gin + GORM)
│ ├── cmd/server/ # Entry point
│ └── internal/ # models, handlers, services, middleware, routes
├── apps/web/ # Next.js frontend
├── apps/admin/ # Admin panel (resource-based)
├── packages/shared/ # Zod schemas, TS types, constants
└── docker-compose.yml # PostgreSQL, Redis, MinIO, Mailhog
## Conventions
- Go models: PascalCase structs with gorm/json/binding tags
- API responses: { "data": ..., "meta": { "total", "page", "page_size", "pages" } }
- Errors: { "error": { "code": "...", "message": "..." } }
- TS files: kebab-case (use-users.ts, api-client.ts)
- Routes: plural, lowercase (/api/users, /api/posts)
- Validation: Zod schemas in packages/shared/schemas/
- Data fetching: React Query hooks (useQuery, useMutation)
- Styling: Tailwind CSS + shadcn/ui, dark theme default
- Admin: defineResource() API with DataTable, FormBuilder, widgets
## Code Generation Markers (DO NOT REMOVE)
// grit:models, /* grit:studio */, // grit:handlers, // grit:routes:protected,
// grit:routes:admin, // grit:routes:custom, // grit:schemas, // grit:types,
// grit:api-routes, // grit:resources, // grit:resource-list
## How to Build with Grit
1. grit new myapp && cd myapp && docker compose up -d
2. grit generate resource <Name> --fields "..." for each model
3. cd apps/api && air (hot reload)
4. cd apps/admin && pnpm install && pnpm dev
5. Customize handlers, add business logic, build frontend pagesTips & Best Practices
Let Claude Code run grit commands
Do not manually type grit commands in a separate terminal. Let Claude Code execute them so it can read the output, detect errors, and fix issues automatically. The whole point of the workflow is hands-free building.
Review generated models before adding relationships
After generating core resources, check that the Go models have the correct field types and tags before adding belongs_to or many_to_many relationships. It is easier to regenerate a resource early than to fix relationships later.
Use phases — do not try to build everything at once
The phased approach prevents Claude Code from getting overwhelmed. Complete Phase 1 (scaffold + core models), verify it compiles, then move to Phase 2 (relationships), and so on. Each phase builds on a working foundation.
Always check go build ./... after each phase
This catches compilation errors early. If Claude Code introduces a bug in Phase 1, you want to find it before Phase 2 adds more complexity on top. Include this step in your claude-code-prompt.md.
Use grit remove resource if you need to redo something
If a resource was generated with the wrong fields, remove it completely and regenerate. This is cleaner than manually editing multiple files across the monorepo. The CLI handles cleanup in all layers.
Keep GRIT_SKILL.md in your project root
Claude Code automatically reads files in the project root. Having the skill file there means every new Claude Code session starts with full Grit context, no manual pasting required.
Complete Prompt Template for Claude Web
Here is the full, ready-to-copy prompt that you can paste directly into claude.ai. Replace the bracketed sections with your own project details and Claude will generate all 3 spec files in a single response.
I want to build a [PROJECT NAME] using the Grit framework. Grit is a full-stack meta-framework that uses: - Go backend (Gin web framework + GORM ORM) - Next.js frontend (React + App Router + TypeScript) - Admin panel (resource-based, Filament-like) - Monorepo with shared types and validation (Zod) - Docker for infrastructure (PostgreSQL, Redis, MinIO) Here's what I want to build: [DESCRIBE YOUR PROJECT IN DETAIL] Please create these 3 files for me: 1. project-description.md — Full project spec with all models, their fields (use Grit field types: string, text, int, uint, float, bool, datetime, date, slug, belongs_to, many_to_many), relationships, user roles, and features. 2. claude-code-prompt.md — Step-by-step instructions that I'll give to Claude Code (AI coding agent). Include exact grit CLI commands to run in order. Use `grit generate resource <Name> --fields "..."` syntax. 3. project-phases.md — A phased build plan with checkboxes. Phase 1: scaffold + core models. Phase 2: relationships + complex features. Phase 3: frontend customization + polish.
Tip: The more detail you provide in the [DESCRIBE YOUR PROJECT] section, the better your spec files will be. Include specific field names and types, relationships between models, user roles and permissions, and any custom business logic or API endpoints you need.