Compose Web: VS Code Plugin-Driven Full-Stack Scaffold System

Introduction

In modern web development, scaffolding tools are mature: Create React App, Vite, Next.js CLI, etc. But these tools solve the project initialization problem, not the business code generation problem.

Compose Web attempts to fill this gap: not generating empty project skeletons, but assembling complete business features through natural language conversation.

Core Positioning

Comparison with Existing Tools

Tool	Problem Solved	Output
Create React App	Project initialization	Empty project skeleton
Cursor/Copilot	Code completion	Code snippets
v0.dev	UI generation	Frontend components
compose-web	Business feature assembly	Complete feature modules

Core Value

User describes: "Add a user management page with CRUD support"

Traditional approach:
  1. Create routes
  2. Write table component
  3. Implement CRUD logic
  4. Connect API
  5. Add form validation
  ... (could take hours)

compose-web:
  Agent analyzes intent → Select blocks → Assemble & generate → Self-verify & fix
  ... (completed in minutes)

Three-Layer Block Structure

Design Philosophy

Block design follows the minimum composable unit principle:

┌─────────────────────────────────────────────────────────────┐
│                       Composite Layer                        │
│  Complete pages/systems                                      │
│  e.g.: User management admin, blog frontend, e-commerce home│
├─────────────────────────────────────────────────────────────┤
│                       Component Layer                        │
│  Feature combinations                                        │
│  e.g.: Login form, user card, data table, search bar        │
├─────────────────────────────────────────────────────────────┤
│                         Atom Layer                           │
│  Minimum functional units                                    │
│  e.g.: Button, input, API route, database field             │
└─────────────────────────────────────────────────────────────┘

Atom Layer Definition

interface Atom {
  id: string
  type: 'ui' | 'api' | 'data'
  name: string
  description: string
 
  // Tech stack adaptation
  adapters: {
    [frontend: string]: {
      template: string
      dependencies: string[]
    }
  }
 
  // Usage constraints
  constraints: {
    requires?: string[]
    conflicts?: string[]
  }
}
 
// Example: Button Atom
const ButtonAtom: Atom = {
  id: 'atom-button',
  type: 'ui',
  name: 'Button',
  description: 'Generic button',
 
  adapters: {
    'vue': {
      template: `<button class="btn {{variant}}" @click="onClick">{{label}}</button>`,
      dependencies: []
    },
    'react': {
      template: `<button className="btn {{variant}}" onClick={onClick}>{label}</button>`,
      dependencies: []
    },
    'svelte': {
      template: `<button class="btn {{variant}}" on:click={onClick}>{label}</button>`,
      dependencies: []
    }
  },
 
  constraints: {}
}

Component Layer Composition

interface Component {
  id: string
  name: string
  description: string
 
  // Composed Atoms
  atoms: AtomReference[]
 
  // Composition logic
  composition: {
    layout: LayoutTemplate
    wiring: WiringScript
  }
 
  // Supported tech stacks
  supportedStacks: string[]
}
 
// Example: Login Form Component
const LoginFormComponent: Component = {
  id: 'comp-login-form',
  name: 'LoginForm',
  description: 'User login form',
 
  atoms: [
    { ref: 'atom-input', props: { type: 'text', label: 'Username' } },
    { ref: 'atom-input', props: { type: 'password', label: 'Password' } },
    { ref: 'atom-button', props: { label: 'Login', variant: 'primary' } },
    { ref: 'atom-button', props: { label: 'Register', variant: 'secondary' } }
  ],
 
  composition: {
    layout: 'vertical-form',
    wiring: 'connect-form-submit'
  },
 
  supportedStacks: ['vue', 'react', 'svelte']
}

Multi-Stack Support

Supported Tech Stack Combinations

#	Frontend	Backend	Database
1	Vue 3	Node (Express)	PostgreSQL
2	React	Node (Express)	PostgreSQL
3	Vue 3	Python (FastAPI)	PostgreSQL
4	React	Python (FastAPI)	PostgreSQL
5	Next.js	Built-in API Routes	PostgreSQL
6	Nuxt 3	Built-in Server	PostgreSQL
7	Vue 3	Go (Gin)	PostgreSQL
8	React	Go (Gin)	PostgreSQL
9	Svelte	Node (Express)	PostgreSQL
10	Angular	Node (NestJS)	PostgreSQL

Self-Verification Self-Healing Mechanism

Three-Level Strategy Degradation

normal → conservative → minimal
  ↓           ↓            ↓
Full gen    Safe mode    Minimal

interface GenerationStrategy {
  level: 'normal' | 'conservative' | 'minimal'
 
  // normal: Full features
  generateFull(request: UserRequest): Promise<GeneratedCode>
 
  // conservative: Safe mode
  generateSafe(request: UserRequest): Promise<GeneratedCode>
 
  // minimal: Minimized
  generateMinimal(request: UserRequest): Promise<GeneratedCode>
}
 
async function generateWithFallback(
  request: UserRequest,
  strategy: GenerationStrategy
): Promise<GeneratedCode> {
  try {
    // Try full generation
    const code = await strategy.generateFull(request)
    const validation = await validate(code)
 
    if (validation.passed) return code
 
    // Degrade to safe mode
    strategy.level = 'conservative'
    const safeCode = await strategy.generateSafe(request)
    const safeValidation = await validate(safeCode)
 
    if (safeValidation.passed) return safeCode
 
    // Degrade to minimal
    strategy.level = 'minimal'
    return strategy.generateMinimal(request)
 
  } catch (error) {
    // On exception, directly degrade
    strategy.level = 'conservative'
    return strategy.generateSafe(request)
  }
}

Verification Flow

async function validate(code: GeneratedCode): Promise<ValidationResult> {
  const results: ValidationResult[] = []
 
  // 1. Lint check
  results.push(await runLint(code))
 
  // 2. Type check
  results.push(await runTypeCheck(code))
 
  // 3. Unit tests (if available)
  if (code.tests) {
    results.push(await runTests(code.tests))
  }
 
  // 4. Runtime check (optional)
  if (code.hasRuntimeCheck) {
    results.push(await runRuntimeCheck(code))
  }
 
  return {
    passed: results.every(r => r.passed),
    errors: results.flatMap(r => r.errors)
  }
}

Current Status

Design phase complete. Architecture documents produced:

System design document
Block system design
Agent system design
VS Code plugin design
LLM client design
Project initialization flow

Awaiting implementation phase.