VECTOR

Visual Engineering and Coding Technique for Outcome-driven Releases

A structured method for designing and building fullstack apps — from a hand-drawn sketch to a production-ready codebase — using Claude as co-designer and Claude Code as builder.

---

What it is

VECTOR is a 15-step process organized in four phases:

• Design (Steps 1–8) — guided by Claude.ai with MCP filesystem access
• Plan & Freeze (Steps 9–10) — development plan, context synthesis, and design freeze
• Handover (Steps 11–12) — GitHub issues, Gantt chart, repo preparation for Claude Code
• Build & Test (Steps 13–15) — executed by Claude Code with structured commands

The method enforces a strict separation between design and execution. Claude Code never makes architectural decisions. The human never writes a spec from scratch.

---

Stack

VECTOR is stack-agnostic by design. The reference implementation targets:

• Backend — Python + FastAPI
• Frontend — React + Tailwind
• Database — PostgreSQL
• Infrastructure — Docker

---

Requirements

• Claude.ai with an active Pro or Team plan
• Claude Code
• Node.js (any recent version)
• A GitHub account

---

Installation

1. Clone this repo

git clone https://github.com/fedeglan/vector.git

2. Create the Claude Project

1. Open Claude.ai → Projects → New Project
2. Name it: VECTOR
3. Open Project Settings → Custom Instructions
4. Paste the full contents of src/setup/SYSTEM_PROMPT.md
5. Save

3. Run setup

Open the VECTOR Project in Claude.ai and type:

/setup

Claude configures the MCP servers automatically and walks you through setting up GitHub access securely. No JSON editing required.

---

Usage

Create a new project

/new-project /path/to/projects/my-app

Resume an existing project

/resume /path/to/projects/my-app

Request a design change after the freeze

/change-scope

---

Repository structure

vector/
├── src/
│   ├── commands/              ← Claude Code commands (copied into each project)
│   │   ├── audit-plan.md
│   │   ├── bootstrap-github.md
│   │   ├── change-scope.md
│   │   ├── debug.md
│   │   ├── explain-pr.md
│   │   ├── fix-bugs.md
│   │   ├── how-to-navigate.md
│   │   ├── report-bug.md
│   │   ├── review-pr.md
│   │   ├── ship-issue.md
│   │   ├── solve-issue.md
│   │   └── test-plan.md
│   └── setup/                 ← Claude.ai setup (not copied into projects)
│       ├── SYSTEM_PROMPT.md   ← goes into Claude Project custom instructions
│       ├── setup.md           ← run once to configure MCPs
│       ├── new-project.md     ← creates a new project
│       └── resume.md          ← resumes an existing project
├── docs/
│   └── VECTOR.md              ← full method specification
├── README.md
└── LICENSE

---

Project structure (generated by /new-project)

<project>/
├── .claude/
│   └── commands/           ← VECTOR commands, ready to use in Claude Code
├── docs/
│   ├── adrs/
│   ├── research/
│   └── audits/
├── research/
├── backend/
├── frontend/
├── .gitignore
└── LICENSE

After completing all design steps, the project will also contain:

<project>/
├── CLAUDE.md               ← the law for Claude Code
├── CONTEXT.md              ← project bible with design freeze marker
├── SESSIONS.md             ← session-by-session traceability
├── docs/
│   ├── PRD.md
│   ├── views.md
│   ├── api-spec.yaml
│   ├── api-frontend-reference.docx
│   ├── data-model.md
│   ├── erd.dbml
│   ├── architecture.md
│   ├── DEVELOPMENT_PLAN.md
│   ├── GITHUB_ISSUES.md
│   └── project-gantt.html
...

---

Commands (Claude Code)

Command	What it does
/bootstrap-github	Create GitHub Project with all issues, labels, milestones, and dates
/ship-issue	Full gitflow: branch → implement → review → PR → merge → cleanup → log
/solve-issue	Implement a specific issue with debugging guidance
/review-pr	Review a PR against all specs
/explain-pr	Explain the PR in very simple terms
/audit-plan	Audit codebase against the development plan
/debug	Analyze and fix broken things
/change-scope	Request a design change after the freeze
/test-plan	Audit existing tests, complete the suite, execute all layers, produce report
/how-to-navigate	Prepare human for exploratory testing: setup, credentials, navigation plan
/report-bug	Capture a bug during exploratory testing (structured or quick mode)
/fix-bugs	Analyze backlog, propose fix plan, execute after human review

---

License

MIT

Citation

Glancszpigel, Federico M., VECTOR: A Structured Method for AI-Assisted Fullstack Software Development (April 03, 2026). Available at SSRN: https://ssrn.com/abstract=6516343