Quick design generation with AI-driven creation and review cycle.
npx claudepluginhub kasperjunge/kasperjunge-marketplace --plugin spec-driven-development# Create Design Quick design generation with AI-driven creation and review cycle. ## Initial Setup Respond with: Wait for user input. ## Workflow 1. **Read** `spec/requirements.md` FULLY 2. **Receive user's tech preferences** 3. **Fill in gaps** with reasonable decisions based on: - What user specified - Requirements from requirements.md - Modern best practices - Project complexity and scope 4. **Generate complete design document** at `spec/design.md` 5. **Be explicit about decisions made**: "Based on your input, I made these decisions: [list with rationale]" 6. **Present de...
Quick design generation with AI-driven creation and review cycle.
Respond with:
I'm ready to help create your technical design.
I'll read your requirements from spec/requirements.md first.
Please tell me your tech stack preferences. You can be specific (e.g., 'Python, FastAPI, SQLite, Jinja2') or general (e.g., 'modern web stack') or just say 'you decide'.
Wait for user input.
spec/requirements.md FULLYspec/design.mdAfter generating design.md:
I've created a design document at spec/design.md.
Based on your input, I made these decisions:
- [Decision 1 with rationale - e.g., "React 18 with TypeScript for type safety and modern features"]
- [Decision 2 with rationale - e.g., "localStorage for data persistence since requirements don't need server sync"]
- [Decision 3 with rationale - e.g., "Vitest + React Testing Library for component testing (matches Vite build tool)"]
The design includes:
- Complete tech stack with rationale
- Component breakdown with responsibilities
- Data model and [UI structure if applicable]
- Key user flows and interactions
- File structure and testing strategy
Does this look good, or would you like me to make adjustments?
After adjustments (if needed):
I've updated spec/design.md with your feedback.
Changes made:
- [Change 1]
- [Change 2]
Does this look good now, or would you like further adjustments?
Create spec/design.md:
# Design: [Project Name]
## Design Overview
[2-3 sentences describing the technical approach and key architectural decisions]
## Tech Stack
### Languages & Frameworks
- **Language**: [e.g., JavaScript/TypeScript]
- **Framework**: [e.g., React 18]
- **Build Tool**: [e.g., Vite]
- **Styling**: [e.g., Tailwind CSS]
### Data & State
- **Data Storage**: [e.g., localStorage, PostgreSQL, MongoDB]
- **State Management**: [e.g., React Context, Redux, Zustand]
- **Data Format**: [e.g., JSON, structured data model]
### Dependencies
- [Library 1]: [Purpose]
- [Library 2]: [Purpose]
**Rationale**: [Why this tech stack? How does it fit the requirements?]
## System Architecture
### High-Level Architecture
[Diagram or description of system layers]
Example: ┌─────────────────────────────┐ │ Presentation Layer │ ← UI Components ├─────────────────────────────┤ │ Business Logic Layer │ ← State Management ├─────────────────────────────┤ │ Data Layer │ ← Storage/API └─────────────────────────────┘
### Component Breakdown
#### Component: [Name]
**Purpose**: [What this component does]
**Location**: `src/components/ComponentName.tsx`
**Responsibilities**:
- [Responsibility 1]
- [Responsibility 2]
**Props/Interface**:
```typescript
interface ComponentProps {
prop1: string;
prop2: number;
onAction: () => void;
}
State:
interface EntityName {
id: string;
field1: string;
field2: number;
field3: Date;
}
Purpose: [What this represents]
Relationships: [How it relates to other entities]
Purpose: [What user accomplishes here]
Layout:
┌─────────────────────────┐
│ Header │
├─────────────────────────┤
│ Main Content │
│ - Element 1 │
│ - Element 2 │
├─────────────────────────┤
│ Footer/Actions │
└─────────────────────────┘
Key Elements:
User Interactions:
Scenario: [User story this implements]
Error Handling:
project-root/
├── src/
│ ├── components/
│ │ ├── ComponentA.tsx
│ │ └── ComponentB.tsx
│ ├── hooks/
│ │ └── useCustomHook.ts
│ ├── utils/
│ │ └── helpers.ts
│ ├── types/
│ │ └── index.ts
│ ├── App.tsx
│ └── main.tsx
├── spec/
│ ├── requirements.md
│ └── design.md
├── package.json
└── README.md
Choice: [What we decided]
Alternatives Considered: [What else we could do]
Rationale: [Why we chose this]
Tradeoffs: [What we gain/lose]
Philosophy: Every task must be verified before moving to the next. Testing is incremental and continuous.
[e.g., npm test, pytest, etc.][Describe when tests should be written:]
src/__tests__/ or alongside source files[command to run unit tests][command to run integration tests][High-level phases - detailed breakdown happens in plan.md]
[Any remaining technical uncertainties - resolve before planning]
spec/requirements.md