中文版

A VSCode extension that brings spec-driven development to Claude Code. Manage your specs and steering documents visually while leveraging Claude Code's powerful AI capabilities.

NEW: Create SPEC with Sub Agents:

1. Click the Kiro for CC icon in the activity bar
2. In the SPEC view header, click the "New Spec with Agents" button (with sparkle icon ✨)
3. Enter a feature description
4. Claude will automatically:
   • Load the spec workflow system prompt
   • Delegate work to specialized agents (requirements, design, tasks)
   • Process each phase in parallel with dedicated context windows
5. Review outputs as agents complete their work

Note: Sub agents may occasionally experience longer execution times due to a known bug. To maintain compatibility, both the original (+ button) and new Sub Agent methods are available. The traditional method remains stable if you encounter any issues.

• Create Specs: Generate requirements, design, and task documents with Claude's help
• Visual Explorer: Browse and manage specs in the sidebar
• Spec Workflow: Requirements → Design → Tasks with review at each step
• NEW: Sub Agent Support: Create specs using specialized agents for parallel processing

• User & Project Agents: View and manage Claude Code agents at user and project levels
• Built-in Agents: Pre-configured spec workflow agents (requirements, design, tasks, judge, etc.)
• Agent Explorer: Browse and edit agent configurations with syntax highlighting

• CLAUDE.md: Browse and edit global/project-specific guidelines
• Generated Docs: Product, tech, and structure steering documents

• MCP Servers: View configured global and workspace MCP servers

• Agent Hooks: View Claude Code hooks

• Settings Management: Centralized configuration

The extension provides a comprehensive sidebar interface with organized views for specs, steering documents, MCP servers, and hooks management. All your Claude Code enhancement tools in one place.

1. Claude Code Installation: Ensure Claude Code is installed and configured

2. Compatibility:

VSCode users:

1. Open VSCode
2. Go to Extensions (Cmd+Shift+X)
3. Search for "Kiro for Claude Code"
4. Click Install

Or via command line:

code --install-extension heisebaiyun.kiro-for-cc

Cursor users: The extension is available on OpenVSX Registry. In Cursor:

1. Go to Extensions
2. Search for "Kiro for Claude Code"
3. Click Install

Or via command line:

cursor --install-extension heisebaiyun.kiro-for-cc

Download the latest .vsix file from GitHub Releases, then:

# VSCode
code --install-extension kiro-for-cc-{latest-version}.vsix

# Cursor
cursor --install-extension kiro-for-cc-{latest-version}.vsix

Replace {latest-version} with the actual version number, e.g., 0.2.4.

Traditional Method:

1. Click the Kiro for CC icon in the activity bar
2. In the SPEC view, click the + button
3. Enter a feature description
4. Claude will generate the requirements document
5. Review and approve before proceeding to design
6. Generate tasks after design is complete

1. Requirements: Define what you want to build
2. Design: Create technical design after requirements approval
3. Tasks: Generate implementation tasks after design approval
4. Implementation: Execute tasks one by one

Create project-specific guidance:

• Click ✨ icon to create custom steering
• Generate initial docs (product, tech, structure)
• Documents are stored in .claude/steering/

Settings are stored in .claude/settings/kfc-settings.json:

{
  "paths": {
    "specs": ".claude/specs",
    "steering": ".claude/steering",
    "settings": ".claude/settings"
  },
  "views": {
    "specs": {
      "visible": true
    },
    "steering": {
      "visible": true
    },
    "mcp": {
      "visible": true
    },
    "hooks": {
      "visible": true
    },
    "settings": {
      "visible": false
    }
  }
}

The extension creates the following structure in your workspace:

.claude/                      # Extension data directory
├── specs/                    # Feature specifications
│   └── {spec-name}/
│       ├── requirements.md   # What to build
│       ├── design.md        # How to build
│       └── tasks.md         # Implementation steps
├── agents/                  # Claude Code agents
│   └── kfc/                 # Built-in agents (auto-initialized)
│       ├── spec-requirements.md
│       ├── spec-design.md
│       ├── spec-tasks.md
│       ├── spec-judge.md
│       ├── spec-impl.md
│       ├── spec-test.md
│       └── spec-system-prompt-loader.md
├── steering/                # AI guidance documents
│   ├── product.md          # Product conventions
│   ├── tech.md             # Technical standards
│   └── structure.md        # Code organization
├── settings/
│   └── kfc-settings.json   # Extension settings

• Node.js 16+
• VSCode 1.84.0+
• TypeScript 5.3.0+

# Clone the repository
git clone https://github.com/notdp/kiro-for-cc.git
cd kiro-for-cc

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

1. Open the project in VSCode
2. Press F5 to launch Extension Development Host
3. The extension will be available in the new VSCode window

# Build VSIX package
npm run package

# Output: kiro-for-cc-{latest-version}.vsix

src/
├── extension.ts              # Extension entry point, command registration
├── constants.ts              # Configuration constants
├── features/                 # Business logic
│   ├── spec/
│   │   └── specManager.ts    # Spec lifecycle management
│   ├── steering/
│   │   └── steeringManager.ts # Steering document management
│   └── agents/
│       └── agentManager.ts   # Agent initialization and management
├── providers/                # VSCode TreeDataProviders
│   ├── claudeCodeProvider.ts # Claude CLI integration
│   ├── specExplorerProvider.ts
│   ├── steeringExplorerProvider.ts
│   ├── agentsExplorerProvider.ts    # NEW: Agent explorer
│   ├── hooksExplorerProvider.ts
│   ├── mcpExplorerProvider.ts
│   └── overviewProvider.ts
├── prompts/                  # AI prompt templates
│   ├── specPrompts.ts        # Spec generation prompts
│   ├── steeringPrompts.ts    # Steering doc prompts
│   └── spec/
│       └── create-spec-with-agents.md # NEW: Sub agent workflow
├── resources/                # Built-in resources
│   ├── agents/              # Pre-configured agents
│   └── prompts/             # System prompts
└── utils/
    └── configManager.ts      # Configuration management

• Manager Pattern: Each feature has a Manager class handling business logic
• Provider Pattern: Tree views extend vscode.TreeDataProvider
• Command Pattern: All commands follow kfc.{feature}.{action} naming
• Configuration: Centralized through ConfigManager for flexibility

MIT License - see LICENSE for details