feat(guide): add AI Ecosystem section for complementary tools (v3.9.1)
New Section 11 documenting tool complementarity with Claude Code: - guide/ai-ecosystem.md (752 lines): detailed guide covering Perplexity, Gemini, Kimi, NotebookLM, IDE tools, and UI prototypers - Section 11 in ultimate-guide.md (~250 lines): condensed version with practical workflows and integration patterns - 4 workflow pipelines: Research→Code, Visual→Code, Documentation, Presentation - Ready-to-use prompts and cost optimization strategies Also includes: mobile-access.md enhancements from [Unreleased] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
dab11d260c
commit
e822452000
9 changed files with 1149 additions and 15 deletions
35
CHANGELOG.md
35
CHANGELOG.md
|
|
@ -6,6 +6,41 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## [3.9.1] - 2026-01-19
|
||||
|
||||
### Added
|
||||
|
||||
- **AI Ecosystem: Complementary Tools** — New Section 11 documenting tool complementarity
|
||||
- `guide/ultimate-guide.md` Section 11 (~250 lines)
|
||||
- 11.1 Why Complementarity Matters — Claude Code strengths vs gaps
|
||||
- 11.2 Tool Matrix — Decision guide for when to use which tool
|
||||
- 11.3 Practical Workflows — 4 pipelines (Research→Code, Visual→Code, Documentation, Presentation)
|
||||
- 11.4 Integration Patterns — Full workflows with budget recommendations
|
||||
- `guide/ai-ecosystem.md` (NEW, ~750 lines)
|
||||
- Detailed guide for each complementary tool
|
||||
- Perplexity AI (research with verified sources)
|
||||
- Google Gemini (image understanding → code)
|
||||
- Kimi/Moonshot (PPTX generation, 128K context)
|
||||
- NotebookLM (doc synthesis + audio overviews)
|
||||
- IDE tools (Cursor, Windsurf, Cline)
|
||||
- UI Prototypers (v0, Bolt, Lovable)
|
||||
- Ready-to-use prompts appendix
|
||||
- Cost optimization strategies
|
||||
- Updated `guide/README.md` with navigation link
|
||||
- Updated main `README.md` navigation table
|
||||
- Updated `machine-readable/reference.yaml` with 6 new line number references
|
||||
|
||||
### Changed
|
||||
|
||||
- **tools/mobile-access.md** - Enhanced with verified data and alternatives
|
||||
- Added Architecture Comparison section with 3 ASCII diagrams (ttyd, Happy Coder, Remoto.sh)
|
||||
- Restructured comparison table with Type/Pros/Cons/ToS/Stars columns
|
||||
- Added Happy Coder section: 7.8K ⭐ (verified 2026-01-19), MIT, Tauri/Expo stack, ToS-safe
|
||||
- Added Remoto.sh warning: ToS risk documented (Anthropic §4.2 proxy policy)
|
||||
- Added Sources section with all referenced projects
|
||||
- Updated footer with data verification date
|
||||
- File expanded from 300 to 385 lines
|
||||
|
||||
## [3.9.0] - 2026-01-19
|
||||
|
||||
### Added
|
||||
|
|
|
|||
|
|
@ -557,6 +557,7 @@ Jump directly to any section in the [Ultimate Guide](./guide/ultimate-guide.md):
|
|||
| **[8. MCP Servers](./guide/ultimate-guide.md#8-mcp-servers)** | Extend Claude with databases, browsers, and external tools | Extended |
|
||||
| **[9. Advanced Patterns](./guide/ultimate-guide.md#9-advanced-patterns)** | Orchestrate Trinity workflows and CI/CD pipelines | Power user |
|
||||
| **[10. Reference](./guide/ultimate-guide.md#10-reference)** | Look up commands, shortcuts, and troubleshooting tips | Daily |
|
||||
| **[11. AI Ecosystem](./guide/ultimate-guide.md#11-ai-ecosystem-complementary-tools)** | Chain Claude Code with Perplexity, Gemini, Kimi, NotebookLM | Workflow |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -741,7 +742,7 @@ Get notified about major updates, new templates, and Claude Code best practices:
|
|||
|
||||
---
|
||||
|
||||
*Version 3.9.0 | January 2026 | Crafted with Claude*
|
||||
*Version 3.9.1 | January 2026 | Crafted with Claude*
|
||||
|
||||
<!-- SEO Keywords -->
|
||||
<!-- claude code, claude code tutorial, anthropic cli, ai coding assistant, claude code mcp,
|
||||
|
|
|
|||
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
3.9.0
|
||||
3.9.1
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ Core documentation for mastering Claude Code.
|
|||
| [observability.md](./observability.md) | Session monitoring and cost tracking | 15 min |
|
||||
| [methodologies.md](./methodologies.md) | 15 development methodologies reference (TDD, SDD, BDD, etc.) | 20 min |
|
||||
| [security-hardening.md](./security-hardening.md) | Security threats, MCP vetting, injection defense | 25 min |
|
||||
| [ai-ecosystem.md](./ai-ecosystem.md) | Complementary AI tools (Perplexity, Gemini, Kimi, NotebookLM) | 25 min |
|
||||
| [workflows/](./workflows/) | Practical workflow guides for Claude Code | 30 min |
|
||||
|
||||
### Workflows
|
||||
|
|
|
|||
752
guide/ai-ecosystem.md
Normal file
752
guide/ai-ecosystem.md
Normal file
|
|
@ -0,0 +1,752 @@
|
|||
# AI Ecosystem: Maximizing Claude Code with Complementary Tools
|
||||
|
||||
> **Reading time**: ~25 minutes
|
||||
>
|
||||
> **Purpose**: This guide helps you understand when to use Claude Code vs. complementary AI tools, and how to chain them for optimal workflows.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Introduction](#introduction)
|
||||
- [1. Perplexity AI (Research & Sourcing)](#1-perplexity-ai-research--sourcing)
|
||||
- [2. Google Gemini (Visual Understanding)](#2-google-gemini-visual-understanding)
|
||||
- [3. Kimi (PPTX & Long Document Generation)](#3-kimi-pptx--long-document-generation)
|
||||
- [4. NotebookLM (Synthesis & Audio)](#4-notebooklm-synthesis--audio)
|
||||
- [5. IDE-Based Tools (Cursor, Windsurf, Cline)](#5-ide-based-tools-cursor-windsurf-cline)
|
||||
- [6. UI Prototypers (v0, Bolt, Lovable)](#6-ui-prototypers-v0-bolt-lovable)
|
||||
- [7. Workflow Orchestration](#7-workflow-orchestration)
|
||||
- [8. Cost & Subscription Strategy](#8-cost--subscription-strategy)
|
||||
- [Ready-to-Use Prompts](#appendix-ready-to-use-prompts)
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
### Philosophy: Augmentation, Not Replacement
|
||||
|
||||
Claude Code excels at:
|
||||
- **Contextual reasoning** across entire codebases
|
||||
- **Multi-file implementation** with test integration
|
||||
- **Persistent memory** via CLAUDE.md files
|
||||
- **CLI automation** for CI/CD pipelines
|
||||
- **Agentic task completion** with minimal supervision
|
||||
|
||||
What Claude Code doesn't do well (by design):
|
||||
- **Real-time web search with source verification** (WebSearch exists but limited)
|
||||
- **Image generation** (no native capability)
|
||||
- **PowerPoint/slide generation** (no PPTX output)
|
||||
- **Audio synthesis** (no TTS)
|
||||
- **Browser-based prototyping** (no visual preview)
|
||||
|
||||
The goal is not to find "better" tools, but to chain the **right tool for each step**.
|
||||
|
||||
### The Complementarity Matrix
|
||||
|
||||
| Task | Claude Code | Better Alternative | Why |
|
||||
|------|-------------|-------------------|-----|
|
||||
| **Code implementation** | ✅ Best | - | Contextual reasoning + file editing |
|
||||
| **Deep research with sources** | ⚠️ Limited | Perplexity Pro | 100+ verified sources |
|
||||
| **Image → Code** | ⚠️ Limited | Gemini 2.5+ | Superior visual understanding |
|
||||
| **Slide generation** | ❌ None | Kimi.com | Native PPTX export |
|
||||
| **Audio overview** | ❌ None | NotebookLM | Podcast-style synthesis |
|
||||
| **Browser prototyping** | ❌ None | v0.dev, Bolt | Live preview |
|
||||
| **IDE autocomplete** | ❌ None | Copilot, Cursor | Inline suggestions |
|
||||
|
||||
---
|
||||
|
||||
## 1. Perplexity AI (Research & Sourcing)
|
||||
|
||||
### When to Use Perplexity Over Claude
|
||||
|
||||
| Scenario | Use Perplexity | Use Claude |
|
||||
|----------|---------------|------------|
|
||||
| "What's the latest API for X?" | ✅ | ⚠️ Knowledge cutoff |
|
||||
| "Compare 5 libraries for auth" | ✅ Sources | ⚠️ May hallucinate |
|
||||
| "Explain this error message" | ⚠️ Generic | ✅ Contextual |
|
||||
| "Implement auth in my codebase" | ❌ No files | ✅ Full access |
|
||||
|
||||
### Perplexity Pro Features for Developers
|
||||
|
||||
**Deep Research Mode**
|
||||
- Synthesizes 100+ sources into structured output
|
||||
- Takes 3-5 minutes but produces comprehensive specs
|
||||
- Export as markdown → Feed to Claude Code
|
||||
|
||||
**Model Selection**
|
||||
- Claude Sonnet 4: Best for technical prose and documentation
|
||||
- GPT-4o: Good for code snippets
|
||||
- Sonar Pro: Fast factual lookups
|
||||
|
||||
**Labs Features**
|
||||
- Spaces: Persistent project contexts
|
||||
- Code blocks: Syntax-highlighted exports
|
||||
- Charts: Auto-generated from data
|
||||
|
||||
### Integration Workflow
|
||||
|
||||
#### Pattern 1: Research → Spec → Code
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. PERPLEXITY (Deep Research) │
|
||||
│ "Research best practices for JWT refresh tokens │
|
||||
│ in Next.js 15. Include security considerations, │
|
||||
│ common pitfalls, and library recommendations." │
|
||||
│ │
|
||||
│ → Output: 2000-word spec with sources │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Export as spec.md
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ > claude │
|
||||
│ "Implement JWT refresh tokens following spec.md. │
|
||||
│ Use the jose library as recommended." │
|
||||
│ │
|
||||
│ → Output: Working implementation with tests │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Pattern 2: Parallel Pane Workflow
|
||||
|
||||
Using tmux or terminal split:
|
||||
|
||||
```bash
|
||||
# Left pane: Perplexity (browser or CLI)
|
||||
perplexity "Best practices for rate limiting in Express"
|
||||
|
||||
# Right pane: Claude Code (implementing)
|
||||
claude "Add rate limiting to API. Check spec.md for approach."
|
||||
```
|
||||
|
||||
### Comparison: Claude WebSearch vs Perplexity
|
||||
|
||||
| Feature | Claude WebSearch | Perplexity Pro |
|
||||
|---------|-----------------|----------------|
|
||||
| Source count | ~5-10 | 100+ (Deep Research) |
|
||||
| Source verification | Basic | Full citations |
|
||||
| Real-time data | Yes | Yes |
|
||||
| Export format | Text in context | Markdown, code blocks |
|
||||
| Best for | Quick lookups | Comprehensive research |
|
||||
| Cost | Included | $20/month Pro |
|
||||
|
||||
**Recommendation**: Use Claude WebSearch for quick factual checks. Use Perplexity Deep Research before any significant implementation that requires understanding the ecosystem.
|
||||
|
||||
---
|
||||
|
||||
## 2. Google Gemini (Visual Understanding)
|
||||
|
||||
### Developer Use Cases
|
||||
|
||||
**Gemini's Visual Superpowers**:
|
||||
- UI mockup → HTML/CSS/React code (90%+ fidelity)
|
||||
- Diagram interpretation (flowcharts → Mermaid/code)
|
||||
- Screenshot debugging ("why does this look broken?")
|
||||
- Design token extraction (colors, spacing from images)
|
||||
|
||||
### Gemini 2.5 Pro for Development
|
||||
|
||||
Best-in-class for:
|
||||
- **Complex UI conversion**: Upload Figma screenshot → Get Tailwind components
|
||||
- **Diagram comprehension**: Architecture diagrams → Implementation plan
|
||||
- **Error analysis**: Upload error screenshot → Get debugging steps
|
||||
|
||||
Model selection:
|
||||
- **Gemini 2.5 Pro**: Complex visual reasoning, long context
|
||||
- **Gemini 2.5 Flash**: Quick visual tasks, lower cost
|
||||
|
||||
### Integration Workflow
|
||||
|
||||
#### Pattern: Visual → Code
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. GEMINI 2.5 PRO │
|
||||
│ Upload: screenshot.png of Figma design │
|
||||
│ Prompt: "Convert this to a React component using │
|
||||
│ Tailwind CSS. Use semantic HTML and │
|
||||
│ include responsive breakpoints." │
|
||||
│ │
|
||||
│ → Output: JSX + Tailwind code │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Copy to clipboard
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ > claude │
|
||||
│ "Refine this component for our Next.js project. │
|
||||
│ Add proper TypeScript types, our Button component, │
|
||||
│ and connect to the auth context." │
|
||||
│ │
|
||||
│ → Output: Production-ready component │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Pattern: Diagram → Implementation Plan
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. GEMINI │
|
||||
│ Upload: architecture-diagram.png │
|
||||
│ Prompt: "Analyze this architecture diagram. │
|
||||
│ Output a Mermaid diagram with the same │
|
||||
│ structure, and list the components." │
|
||||
│ │
|
||||
│ → Output: Mermaid code + component list │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Paste mermaid to CLAUDE.md
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ "Implement the UserService component from the │
|
||||
│ architecture in CLAUDE.md. Start with the │
|
||||
│ interface, then the implementation." │
|
||||
│ │
|
||||
│ → Output: Implemented service │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Image Generation Alternatives
|
||||
|
||||
For generating diagrams, mockups, or visual assets:
|
||||
|
||||
| Tool | Best For | Format | Quality |
|
||||
|------|----------|--------|---------|
|
||||
| Ideogram 3.0 | UI mockups, icons | PNG, SVG | High |
|
||||
| Recraft v3 | Vectors, logos | SVG, PNG | Very high |
|
||||
| Midjourney | Artistic visuals | PNG | Artistic |
|
||||
| DALL-E 3 | Quick concepts | PNG | Good |
|
||||
|
||||
**Workflow for generated images**:
|
||||
1. Generate image with tool of choice
|
||||
2. Upload to Gemini for → code conversion
|
||||
3. Refine with Claude Code
|
||||
|
||||
---
|
||||
|
||||
## 3. Kimi (PPTX & Long Document Generation)
|
||||
|
||||
### What is Kimi?
|
||||
|
||||
[Kimi](https://kimi.ai) is Moonshot AI's assistant, notable for:
|
||||
- **Native PPTX generation** (actual slides, not markdown)
|
||||
- **128K+ token context** (entire codebases)
|
||||
- **Code-aware layouts** (syntax highlighting in slides)
|
||||
- **Multilingual** (excellent Chinese/English)
|
||||
|
||||
### Developer Use Cases
|
||||
|
||||
**Presentation Generation**:
|
||||
- PR summary → stakeholder deck
|
||||
- Architecture docs → visual presentation
|
||||
- Technical spec → team onboarding slides
|
||||
- Code walkthrough → training materials
|
||||
|
||||
### Integration Workflow
|
||||
|
||||
#### Pattern: Code → Presentation
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. CLAUDE CODE │
|
||||
│ "Generate a summary of all changes in the last │
|
||||
│ 5 commits. Format as markdown with sections: │
|
||||
│ Overview, Key Changes, Breaking Changes, Migration."│
|
||||
│ │
|
||||
│ → Output: changes-summary.md │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Upload to Kimi
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. KIMI │
|
||||
│ Prompt: "Create a 10-slide presentation from this │
|
||||
│ summary for non-technical stakeholders. │
|
||||
│ Use business-friendly language. │
|
||||
│ Include one slide per major feature." │
|
||||
│ │
|
||||
│ → Output: stakeholder-update.pptx │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Pattern: Architecture → Training
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. CLAUDE CODE (using /explain or equivalent) │
|
||||
│ "Explain the authentication flow in this project. │
|
||||
│ Include sequence diagrams (mermaid) and key files." │
|
||||
│ │
|
||||
│ → Output: auth-explanation.md with diagrams │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Upload to Kimi
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. KIMI │
|
||||
│ "Create an onboarding presentation for new devs. │
|
||||
│ 20 slides covering the auth system. Include │
|
||||
│ code snippets and diagrams where relevant." │
|
||||
│ │
|
||||
│ → Output: auth-onboarding.pptx │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Comparison: Presentation Tools
|
||||
|
||||
| Tool | Strengths | Weaknesses | Best For |
|
||||
|------|-----------|------------|----------|
|
||||
| **Kimi** | Native PPTX, code-aware | Less design polish | Technical decks |
|
||||
| **Gamma.app** | Beautiful templates | Less code support | Business decks |
|
||||
| **Tome** | AI-native, visual | Expensive | Marketing |
|
||||
| **Beautiful.ai** | Smart templates | Manual | Design-focused |
|
||||
| **Marp** | Markdown → slides | Manual styling | Developer decks |
|
||||
|
||||
**Recommendation**: Use Kimi for technical content with code. Use Gamma for business/investor decks.
|
||||
|
||||
---
|
||||
|
||||
## 4. NotebookLM (Synthesis & Audio)
|
||||
|
||||
### Developer Use Cases
|
||||
|
||||
**Documentation Synthesis**:
|
||||
- Upload 50+ files → Get unified understanding
|
||||
- Ask questions about your codebase
|
||||
- Generate audio overview for commute learning
|
||||
|
||||
**Audio Overview Feature**:
|
||||
- Generates 10-15 minute "podcast" from uploaded content
|
||||
- Two AI hosts discuss your documentation
|
||||
- Perfect for onboarding or reviewing large systems
|
||||
|
||||
### Integration Workflow
|
||||
|
||||
#### Pattern: Codebase → Audio Onboarding
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. EXPORT (via Claude Code or manual) │
|
||||
│ "Export all markdown files from docs/ and the │
|
||||
│ main README to a single combined-docs.md file." │
|
||||
│ │
|
||||
│ → Output: combined-docs.md (50K tokens) │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Upload to NotebookLM
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. NOTEBOOKLM │
|
||||
│ - Add combined-docs.md as source │
|
||||
│ - Click "Generate Audio Overview" │
|
||||
│ - Wait 3-5 minutes for generation │
|
||||
│ │
|
||||
│ → Output: 12-minute audio explaining your system │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Listen during commute
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 3. BACK TO CLAUDE CODE │
|
||||
│ "Based on my notes from the audio overview: │
|
||||
│ [paste notes] │
|
||||
│ Help me understand the auth flow in more detail." │
|
||||
│ │
|
||||
│ → Output: Contextual deep-dive │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Pattern: Multi-Source Synthesis
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ NOTEBOOKLM │
|
||||
│ Upload multiple sources: │
|
||||
│ - Your codebase docs (combined-docs.md) │
|
||||
│ - Framework documentation (Next.js docs PDF) │
|
||||
│ - Related articles (URLs or PDFs) │
|
||||
│ │
|
||||
│ Ask: "How does our auth implementation compare to │
|
||||
│ Next.js best practices?" │
|
||||
│ │
|
||||
│ → Output: Comparative analysis with citations │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Export to CLAUDE.md
|
||||
|
||||
After NotebookLM synthesis, export key insights to your project:
|
||||
|
||||
```markdown
|
||||
## Architecture Insights (from NotebookLM synthesis)
|
||||
|
||||
### Key Patterns
|
||||
- Service layer uses repository pattern
|
||||
- Auth flow follows OAuth2 with PKCE
|
||||
- State management via React Query
|
||||
|
||||
### Potential Issues Identified
|
||||
- Token refresh logic not documented
|
||||
- Missing error boundaries in critical paths
|
||||
|
||||
### Recommendations
|
||||
- Add token refresh documentation
|
||||
- Implement error boundary audit
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. IDE-Based Tools (Cursor, Windsurf, Cline)
|
||||
|
||||
### When IDE Tools Complement Claude Code
|
||||
|
||||
| Scenario | Use IDE Tool | Use Claude Code |
|
||||
|----------|-------------|-----------------|
|
||||
| Quick inline edits | ✅ Faster | ⚠️ Context switch |
|
||||
| Autocomplete while typing | ✅ Essential | ❌ Not available |
|
||||
| Multi-file refactoring | ⚠️ Limited | ✅ Superior |
|
||||
| Understanding large codebase | ⚠️ Limited | ✅ Better context |
|
||||
| CI/CD automation | ❌ Manual | ✅ Native |
|
||||
|
||||
### Hybrid Workflow
|
||||
|
||||
**Morning session (strategic)**:
|
||||
```bash
|
||||
claude "Review the auth module and suggest improvements"
|
||||
# Claude analyzes, suggests multi-file refactoring plan
|
||||
```
|
||||
|
||||
**During coding (tactical)**:
|
||||
```
|
||||
# In Cursor/VS Code with Copilot
|
||||
# Quick autocomplete, inline suggestions
|
||||
# Small function implementations
|
||||
```
|
||||
|
||||
**Before commit (validation)**:
|
||||
```bash
|
||||
claude "Review my changes and suggest tests"
|
||||
# Claude reviews diff, generates comprehensive tests
|
||||
```
|
||||
|
||||
### Cursor-Specific Integration
|
||||
|
||||
Cursor's `.cursor/rules` can mirror your CLAUDE.md:
|
||||
|
||||
```markdown
|
||||
# .cursor/rules
|
||||
# Mirror from CLAUDE.md for consistency
|
||||
|
||||
## Conventions
|
||||
- Use TypeScript strict mode
|
||||
- Prefer named exports
|
||||
- Test files: *.test.ts
|
||||
|
||||
## Patterns
|
||||
- Services use dependency injection
|
||||
- Components use render props for flexibility
|
||||
```
|
||||
|
||||
### Export from IDE to Claude
|
||||
|
||||
When you need Claude's deeper analysis:
|
||||
|
||||
1. Select code in IDE
|
||||
2. Copy with context (file path, line numbers)
|
||||
3. Paste in Claude with: "Analyze this and suggest architectural improvements"
|
||||
|
||||
---
|
||||
|
||||
## 6. UI Prototypers (v0, Bolt, Lovable)
|
||||
|
||||
### When to Use Prototypers
|
||||
|
||||
| Scenario | Use Prototyper | Use Claude Code |
|
||||
|----------|---------------|-----------------|
|
||||
| "Build a landing page" | ✅ v0 (visual) | ⚠️ No preview |
|
||||
| "Add form to existing app" | ⚠️ Context needed | ✅ Has context |
|
||||
| "Rapid UI iteration" | ✅ Live preview | ⚠️ Slower |
|
||||
| "Match design system" | ⚠️ Generic | ✅ Reads your tokens |
|
||||
|
||||
### Tool Comparison
|
||||
|
||||
| Tool | Strengths | Stack | Best For |
|
||||
|------|-----------|-------|----------|
|
||||
| **v0.dev** | Shadcn/Tailwind | React | Component prototypes |
|
||||
| **Bolt.new** | Full app scaffold | Various | Quick MVPs |
|
||||
| **Lovable** | Design-to-code | React | Designer handoff |
|
||||
| **WebSim** | Experimental UI | Web | Creative exploration |
|
||||
|
||||
### Integration Workflow
|
||||
|
||||
#### Pattern: Prototype → Production
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. V0.DEV │
|
||||
│ Prompt: "A user profile card with avatar, │
|
||||
│ stats, and action buttons" │
|
||||
│ │
|
||||
│ → Output: React + Shadcn component preview │
|
||||
│ → Export: Copy code │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Paste to clipboard
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ "Adapt this v0 component for our Next.js app: │
|
||||
│ - Use our existing Button, Avatar components │
|
||||
│ - Add TypeScript types matching User interface │
|
||||
│ - Connect to getUserProfile API endpoint │
|
||||
│ - Add loading and error states" │
|
||||
│ │
|
||||
│ → Output: Production-ready integrated component │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Workflow Orchestration
|
||||
|
||||
### The Complete Pipeline
|
||||
|
||||
For maximum efficiency, chain tools in this order:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ PLANNING PHASE │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [PERPLEXITY] [GEMINI] [NOTEBOOKLM] │
|
||||
│ Deep Research Diagram Analysis Doc Synthesis │
|
||||
│ "Best practices for..." Upload architecture Upload all docs │
|
||||
│ ↓ ↓ ↓ │
|
||||
│ spec.md mermaid + plan audio overview │
|
||||
│ │
|
||||
└────────────────────────────────┬────────────────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ IMPLEMENTATION PHASE │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [CLAUDE CODE] [IDE + COPILOT] │
|
||||
│ Multi-file implementation Inline autocomplete │
|
||||
│ "Implement per spec.md..." Quick edits while typing │
|
||||
│ ↓ ↓ │
|
||||
│ Working code + tests Polished code │
|
||||
│ │
|
||||
└────────────────────────────────┬────────────────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ DELIVERY PHASE │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [CLAUDE CODE] [KIMI] │
|
||||
│ PR description Stakeholder deck │
|
||||
│ /release-notes "Create slides from..." │
|
||||
│ ↓ ↓ │
|
||||
│ GitHub PR presentation.pptx │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Session Templates
|
||||
|
||||
#### Research-Heavy Feature
|
||||
|
||||
```bash
|
||||
# 1. Research (Perplexity - 10 min)
|
||||
# "Best practices for WebSocket implementation in Next.js 15"
|
||||
# → Export to websocket-spec.md
|
||||
|
||||
# 2. Implementation (Claude Code - 40 min)
|
||||
claude
|
||||
> "Implement WebSocket following websocket-spec.md.
|
||||
Add to src/lib/websocket/. Include reconnection logic."
|
||||
|
||||
# 3. Stakeholder update (Kimi - 5 min)
|
||||
# Upload: changes + demo screenshots
|
||||
# → Generate 5-slide update deck
|
||||
```
|
||||
|
||||
#### Visual-Heavy Feature
|
||||
|
||||
```bash
|
||||
# 1. UI Prototype (v0 - 10 min)
|
||||
# Generate dashboard layout
|
||||
|
||||
# 2. Visual refinement (Gemini - 5 min)
|
||||
# Upload Figma polish → Get final code
|
||||
|
||||
# 3. Integration (Claude Code - 30 min)
|
||||
claude
|
||||
> "Integrate this dashboard component.
|
||||
Connect to our data fetching hooks.
|
||||
Add proper TypeScript types."
|
||||
```
|
||||
|
||||
#### Onboarding New Codebase
|
||||
|
||||
```bash
|
||||
# 1. Audio overview (NotebookLM - 15 min)
|
||||
# Upload all docs → Generate audio → Listen
|
||||
|
||||
# 2. Deep questions (Claude Code - 20 min)
|
||||
claude
|
||||
> "I just listened to an overview of this codebase.
|
||||
Help me understand the payment flow in detail."
|
||||
|
||||
# 3. First contribution (Claude Code - 30 min)
|
||||
claude
|
||||
> "Add a new endpoint to the payments API.
|
||||
Follow the patterns I see in existing endpoints."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Cost & Subscription Strategy
|
||||
|
||||
### Monthly Cost Comparison
|
||||
|
||||
| Tool | Free Tier | Pro Cost | Best For |
|
||||
|------|-----------|----------|----------|
|
||||
| Claude Code | Pay-per-use | ~$20-50/month typical | Primary dev tool |
|
||||
| Perplexity | 5 Pro searches/day | $20/month | Research-heavy work |
|
||||
| Gemini | Good free tier | $19.99/month | Visual work |
|
||||
| NotebookLM | Free | Free | Documentation |
|
||||
| Kimi | Generous free | Free | Presentations |
|
||||
| v0.dev | Limited | $20/month | UI prototyping |
|
||||
| Cursor | Free tier | $20/month | IDE integration |
|
||||
|
||||
### Recommended Subscriptions by Profile
|
||||
|
||||
**Minimal Stack ($40-70/month)**:
|
||||
- Claude Code (pay-per-use) - $20-50
|
||||
- Perplexity Pro - $20
|
||||
- Everything else: Free tiers
|
||||
|
||||
**Balanced Stack ($80-110/month)**:
|
||||
- Claude Code - $30-50
|
||||
- Perplexity Pro - $20
|
||||
- Gemini Advanced - $20
|
||||
- Cursor Pro - $20
|
||||
- Free: NotebookLM, Kimi
|
||||
|
||||
**Power Stack ($120-150/month)**:
|
||||
- Claude Code (heavy usage) - $50-80
|
||||
- Perplexity Pro - $20
|
||||
- Gemini Advanced - $20
|
||||
- Cursor Pro - $20
|
||||
- v0 Pro - $20
|
||||
- Free: NotebookLM, Kimi
|
||||
|
||||
### Cost Optimization Tips
|
||||
|
||||
1. **Use Claude Code's Haiku model** for simple tasks (`/model haiku`)
|
||||
2. **Batch research sessions** in Perplexity to maximize Deep Research
|
||||
3. **Use free tiers** for Gemini Flash, NotebookLM, Kimi
|
||||
4. **Check context usage** regularly (`/status`) to avoid waste
|
||||
5. **Use Opus sparingly** - only for architectural decisions
|
||||
|
||||
---
|
||||
|
||||
## Appendix: Ready-to-Use Prompts
|
||||
|
||||
### Perplexity: Technical Spec Research
|
||||
|
||||
```
|
||||
Research [TECHNOLOGY/PATTERN] implementation best practices in [FRAMEWORK].
|
||||
|
||||
Requirements:
|
||||
- Production-ready patterns only (no experimental)
|
||||
- Include security considerations
|
||||
- Compare top 3 library options with pros/cons
|
||||
- Include code examples where helpful
|
||||
- Cite all sources
|
||||
|
||||
Output format: Markdown spec I can feed to a coding assistant.
|
||||
```
|
||||
|
||||
### Gemini: UI to Code
|
||||
|
||||
```
|
||||
Convert this UI screenshot to a [FRAMEWORK] component using [STYLING].
|
||||
|
||||
Requirements:
|
||||
- Use semantic HTML
|
||||
- Include responsive breakpoints (mobile/tablet/desktop)
|
||||
- Extract color values as CSS variables
|
||||
- Add accessibility attributes (aria labels, roles)
|
||||
- Include hover/focus states visible in the design
|
||||
|
||||
Output: Complete component code ready to paste.
|
||||
```
|
||||
|
||||
### Kimi: Code to Presentation
|
||||
|
||||
```
|
||||
Create a [N]-slide presentation from this technical content.
|
||||
|
||||
Audience: [TECHNICAL/NON-TECHNICAL]
|
||||
Purpose: [STAKEHOLDER UPDATE/TRAINING/PITCH]
|
||||
|
||||
Requirements:
|
||||
- One key message per slide
|
||||
- Include code snippets where relevant (syntax highlighted)
|
||||
- Add speaker notes for each slide
|
||||
- Business-friendly language for non-tech audiences
|
||||
- Include a summary/next steps slide
|
||||
|
||||
Output: Downloadable PPTX file.
|
||||
```
|
||||
|
||||
### NotebookLM: Codebase Understanding
|
||||
|
||||
After uploading documentation:
|
||||
|
||||
```
|
||||
Based on all sources, explain:
|
||||
1. The overall architecture pattern used
|
||||
2. How data flows through the system
|
||||
3. Key integration points with external services
|
||||
4. Potential areas of technical debt or complexity
|
||||
5. How authentication/authorization works
|
||||
|
||||
Format as a structured summary I can add to my CLAUDE.md file.
|
||||
```
|
||||
|
||||
### Claude Code: Integrate External Output
|
||||
|
||||
```
|
||||
I have [DESCRIBE SOURCE] from [TOOL].
|
||||
|
||||
Context: [PASTE CONTENT]
|
||||
|
||||
Integrate this into our project:
|
||||
- Location: [TARGET DIRECTORY/FILE]
|
||||
- Adapt to our patterns (check CLAUDE.md)
|
||||
- Add TypeScript types matching our interfaces
|
||||
- Connect to existing [STATE/API/HOOKS]
|
||||
- Add tests following our testing patterns
|
||||
|
||||
Validate against existing code before implementing.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference Card
|
||||
|
||||
### Tool Decision Matrix
|
||||
|
||||
| I need to... | Use |
|
||||
|--------------|-----|
|
||||
| Implement a feature | Claude Code |
|
||||
| Research before implementing | Perplexity Deep Research |
|
||||
| Convert design to code | Gemini → Claude |
|
||||
| Create a presentation | Claude → Kimi |
|
||||
| Understand new codebase | NotebookLM → Claude |
|
||||
| Rapid UI prototype | v0/Bolt → Claude |
|
||||
| Quick inline edits | IDE + Copilot |
|
||||
|
||||
### Chaining Patterns
|
||||
|
||||
```
|
||||
Research → Code: Perplexity → Claude Code
|
||||
Visual → Code: Gemini → Claude Code
|
||||
Prototype → Prod: v0/Bolt → Claude Code
|
||||
Code → Slides: Claude Code → Kimi
|
||||
Docs → Understanding: NotebookLM → Claude Code
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Back to [Ultimate Guide](./ultimate-guide.md#11-ai-ecosystem-complementary-tools) | [Main README](../README.md)*
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
**Written with**: Claude (Anthropic)
|
||||
|
||||
**Version**: 3.9.0 | **Last Updated**: January 2026
|
||||
**Version**: 3.9.1 | **Last Updated**: January 2026
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -397,4 +397,4 @@ where.exe claude; claude doctor; claude mcp list
|
|||
|
||||
**Author**: Florian BRUNIAUX | [@Méthode Aristote](https://methode-aristote.fr) | Written with Claude
|
||||
|
||||
*Last updated: January 2026 | Version 3.9.0*
|
||||
*Last updated: January 2026 | Version 3.9.1*
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
**Last updated**: January 2026
|
||||
|
||||
**Version**: 3.9.0
|
||||
**Version**: 3.9.1
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -169,6 +169,11 @@ Context full → /compact or /clear
|
|||
- [10.4 Troubleshooting](#104-troubleshooting)
|
||||
- [10.5 Cheatsheet](#105-cheatsheet)
|
||||
- [10.6 Daily Workflow & Checklists](#106-daily-workflow--checklists)
|
||||
- [11. AI Ecosystem: Complementary Tools](#11-ai-ecosystem-complementary-tools)
|
||||
- [11.1 Why Complementarity Matters](#111-why-complementarity-matters)
|
||||
- [11.2 Tool Matrix](#112-tool-matrix)
|
||||
- [11.3 Practical Workflows](#113-practical-workflows)
|
||||
- [11.4 Integration Patterns](#114-integration-patterns)
|
||||
- [Appendix: Templates Collection](#appendix-templates-collection)
|
||||
- [Appendix A: File Locations Reference](#appendix-a-file-locations-reference)
|
||||
|
||||
|
|
@ -10151,6 +10156,253 @@ exit 0
|
|||
- `npm test` - Run tests
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 11. AI Ecosystem: Complementary Tools
|
||||
|
||||
_Quick jump:_ [Why Complementarity](#111-why-complementarity-matters) · [Tool Matrix](#112-tool-matrix) · [Practical Workflows](#113-practical-workflows) · [Integration Patterns](#114-integration-patterns)
|
||||
|
||||
---
|
||||
|
||||
**Reading time**: 10 minutes
|
||||
|
||||
**Skill level**: Intermediate
|
||||
|
||||
**Goal**: Chain Claude Code with the right AI tools for optimal workflows
|
||||
|
||||
> **TL;DR**: Claude Code excels at contextual reasoning and multi-file implementation. Combine it with Perplexity (research), Gemini (images), Kimi (slides), and NotebookLM (synthesis) for a complete AI-powered development workflow.
|
||||
|
||||
## 11.1 Why Complementarity Matters
|
||||
|
||||
Claude Code is designed to be your **implementation partner** with deep codebase understanding. It deliberately doesn't try to do everything—and that's a strength.
|
||||
|
||||
### What Claude Code Does Best
|
||||
|
||||
| Capability | Why Claude Excels |
|
||||
|-----------|------------------|
|
||||
| **Contextual reasoning** | Reads entire project, understands patterns |
|
||||
| **Multi-file editing** | Coordinates changes across modules |
|
||||
| **Test integration** | Generates tests that understand your code |
|
||||
| **CLI automation** | Perfect for CI/CD pipelines |
|
||||
| **Persistent memory** | CLAUDE.md files maintain context |
|
||||
|
||||
### Where Other Tools Add Value
|
||||
|
||||
| Gap | Why | Solution |
|
||||
|-----|-----|----------|
|
||||
| **Deep research with sources** | WebSearch is limited (~5-10 sources) | Perplexity Pro (100+ verified sources) |
|
||||
| **Image → Code** | No visual understanding | Gemini 2.5 (superior image analysis) |
|
||||
| **Slide generation** | No PPTX output capability | Kimi (native PowerPoint) |
|
||||
| **Audio synthesis** | No TTS capability | NotebookLM (podcast-style overviews) |
|
||||
| **Live browser prototyping** | No visual preview | v0.dev, Bolt (instant preview) |
|
||||
|
||||
The goal isn't replacement—it's **chaining the right tool for each step**.
|
||||
|
||||
## 11.2 Tool Matrix
|
||||
|
||||
### Quick Decision Guide
|
||||
|
||||
| I need to... | Use | Why Not Claude |
|
||||
|--------------|-----|----------------|
|
||||
| Implement a feature | **Claude Code** | ✅ Best choice |
|
||||
| Research before implementing | **Perplexity** | Limited sources, no citations |
|
||||
| Convert mockup to code | **Gemini → Claude** | Limited visual understanding |
|
||||
| Create stakeholder deck | **Claude → Kimi** | No PPTX export |
|
||||
| Understand new codebase quickly | **NotebookLM → Claude** | No audio synthesis |
|
||||
| Rapid UI prototype | **v0/Bolt → Claude** | No live preview |
|
||||
| Quick inline edits | **IDE + Copilot** | Context switching overhead |
|
||||
|
||||
### Complementary Tools Overview
|
||||
|
||||
| Tool | Primary Strength | Free Tier | Pro Cost |
|
||||
|------|-----------------|-----------|----------|
|
||||
| **[Perplexity](https://perplexity.ai)** | Research with verified sources | 5 Pro searches/day | $20/month |
|
||||
| **[Gemini](https://gemini.google.com)** | Image understanding → code | Generous | $19.99/month |
|
||||
| **[Kimi](https://kimi.ai)** | PPTX generation, 128K context | Generous | Free |
|
||||
| **[NotebookLM](https://notebooklm.google.com)** | Doc synthesis + audio | Full features | Free |
|
||||
| **[v0.dev](https://v0.dev)** | UI prototyping (Shadcn) | Limited | $20/month |
|
||||
| **[Cursor](https://cursor.sh)** | IDE with AI autocomplete | Limited | $20/month |
|
||||
|
||||
## 11.3 Practical Workflows
|
||||
|
||||
### Research → Code Pipeline
|
||||
|
||||
Use when: You need to understand best practices before implementing.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. PERPLEXITY (Deep Research Mode - 5 min) │
|
||||
│ │
|
||||
│ "Research JWT refresh token best practices for │
|
||||
│ Next.js 15. Include security, common pitfalls, │
|
||||
│ and compare jose vs jsonwebtoken libraries." │
|
||||
│ │
|
||||
│ → Output: 2000-word spec with 20+ sources │
|
||||
│ → Export: Copy as Markdown → spec.md │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ > claude │
|
||||
│ │
|
||||
│ "Implement JWT refresh per @spec.md. │
|
||||
│ Use jose library as recommended. │
|
||||
│ Add to src/lib/auth/. Include tests." │
|
||||
│ │
|
||||
│ → Output: Working implementation + tests │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**When to use**: Any implementation requiring ecosystem knowledge, library comparisons, or security considerations.
|
||||
|
||||
### Visual → Code Pipeline
|
||||
|
||||
Use when: You have mockups, screenshots, or diagrams to implement.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. GEMINI 2.5 PRO │
|
||||
│ │
|
||||
│ Upload: dashboard-mockup.png │
|
||||
│ "Convert to React component with Tailwind. │
|
||||
│ Include responsive breakpoints and accessibility." │
|
||||
│ │
|
||||
│ → Output: Initial JSX + Tailwind code │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Copy to clipboard
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. CLAUDE CODE │
|
||||
│ │
|
||||
│ "Integrate this component into our Next.js app: │
|
||||
│ - Use our Button, Avatar components │
|
||||
│ - Add TypeScript types matching User interface │
|
||||
│ - Connect to getUserProfile API hook │
|
||||
│ - Add loading and error states" │
|
||||
│ │
|
||||
│ → Output: Production-ready integrated component │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**When to use**: Figma exports, whiteboard sketches, architecture diagrams, error screenshots.
|
||||
|
||||
### Documentation Pipeline
|
||||
|
||||
Use when: You need to quickly understand a new codebase or create audio overviews.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. EXPORT DOCS (Claude Code) │
|
||||
│ │
|
||||
│ "Combine all markdown from docs/ into one file. │
|
||||
│ Include README.md and CLAUDE.md." │
|
||||
│ │
|
||||
│ → Output: combined-docs.md │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Upload to NotebookLM
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. NOTEBOOKLM │
|
||||
│ │
|
||||
│ - Add combined-docs.md as source │
|
||||
│ - Click "Generate Audio Overview" │
|
||||
│ - Listen during commute (10-15 min) │
|
||||
│ │
|
||||
│ → Output: Podcast-style system overview │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Take notes, return to Claude
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 3. CLAUDE CODE │
|
||||
│ │
|
||||
│ "Based on my understanding from the audio: │
|
||||
│ Help me deep-dive into the payment flow." │
|
||||
│ │
|
||||
│ → Output: Contextual explanation + code walkthrough │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**When to use**: Joining new team, reviewing unfamiliar codebase, onboarding prep.
|
||||
|
||||
### Presentation Pipeline
|
||||
|
||||
Use when: You need to communicate technical changes to stakeholders.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 1. CLAUDE CODE │
|
||||
│ │
|
||||
│ "Summarize changes from last 5 commits. │
|
||||
│ Format: Overview, Key Features, Breaking Changes, │
|
||||
│ Migration Steps. Use business-friendly language." │
|
||||
│ │
|
||||
│ → Output: changes-summary.md │
|
||||
└───────────────────────────┬─────────────────────────────┘
|
||||
↓ Upload to Kimi
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 2. KIMI │
|
||||
│ │
|
||||
│ "Create 10-slide deck for non-technical stakeholders.│
|
||||
│ One key message per slide. │
|
||||
│ Include summary and next steps." │
|
||||
│ │
|
||||
│ → Output: stakeholder-update.pptx │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**When to use**: Sprint demos, release announcements, executive updates.
|
||||
|
||||
## 11.4 Integration Patterns
|
||||
|
||||
### Full Workflow: Research-Heavy Feature
|
||||
|
||||
```bash
|
||||
# 1. Research (Perplexity - 10 min)
|
||||
# → "Best practices for WebSocket in Next.js 15"
|
||||
# → Export to websocket-spec.md
|
||||
|
||||
# 2. Implementation (Claude Code - 40 min)
|
||||
claude
|
||||
> "Implement WebSocket per websocket-spec.md.
|
||||
Add to src/lib/websocket/. Include reconnection."
|
||||
|
||||
# 3. Stakeholder update (Kimi - 5 min)
|
||||
# → Upload changes + screenshots
|
||||
# → Generate 5-slide deck
|
||||
```
|
||||
|
||||
### Full Workflow: Visual-Heavy Feature
|
||||
|
||||
```bash
|
||||
# 1. UI Prototype (v0 - 10 min)
|
||||
# → Generate dashboard layout
|
||||
|
||||
# 2. Visual refinement (Gemini - 5 min)
|
||||
# → Upload Figma polish → Get refined code
|
||||
|
||||
# 3. Integration (Claude Code - 30 min)
|
||||
claude
|
||||
> "Integrate this dashboard.
|
||||
Connect to our data hooks. Add TypeScript types."
|
||||
```
|
||||
|
||||
### Recommended Tool Stack by Budget
|
||||
|
||||
| Budget | Stack | Monthly |
|
||||
|--------|-------|---------|
|
||||
| **Minimal** | Claude Code + Perplexity Pro | $40-70 |
|
||||
| **Balanced** | + Gemini + Cursor | $80-110 |
|
||||
| **Power** | + v0 Pro | $100-130 |
|
||||
|
||||
### Cost Optimization Tips
|
||||
|
||||
1. **Use Haiku** for simple tasks (`/model haiku`)
|
||||
2. **Batch research** in Perplexity Deep Research sessions
|
||||
3. **Use free tiers**: NotebookLM, Kimi, Gemini Flash are free
|
||||
4. **Check context** regularly (`/status`) to avoid waste
|
||||
5. **Use Opus sparingly** - reserve for architectural decisions
|
||||
|
||||
---
|
||||
|
||||
> **📖 Deep Dive**: For detailed integration patterns, ready-to-use prompts, and tool comparisons, see the [complete AI Ecosystem guide](./ai-ecosystem.md).
|
||||
|
||||
|
||||
## Further Reading
|
||||
|
||||
|
|
@ -10564,4 +10816,4 @@ Thumbs.db
|
|||
|
||||
**Contributions**: Issues and PRs welcome.
|
||||
|
||||
**Last updated**: January 2026 | **Version**: 3.9.0
|
||||
**Last updated**: January 2026 | **Version**: 3.9.1
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
# Source: guide/ultimate-guide.md
|
||||
# Purpose: Condensed index for LLMs to quickly answer user questions about Claude Code
|
||||
|
||||
version: "3.9.0"
|
||||
version: "3.9.1"
|
||||
updated: "2026-01"
|
||||
|
||||
# ════════════════════════════════════════════════════════════════
|
||||
|
|
@ -96,6 +96,13 @@ deep_dive:
|
|||
troubleshooting: 9426
|
||||
cheatsheet: 9801
|
||||
daily_workflow: 9877
|
||||
# AI Ecosystem (Section 11, ~line 10156)
|
||||
ai_ecosystem: 10156
|
||||
ai_ecosystem_complementarity: 10170
|
||||
ai_ecosystem_tool_matrix: 10196
|
||||
ai_ecosystem_workflows: 10221
|
||||
ai_ecosystem_integration: 10347
|
||||
ai_ecosystem_detailed: "guide/ai-ecosystem.md"
|
||||
|
||||
# ════════════════════════════════════════════════════════════════
|
||||
# DECISION TREE (most important - en premier)
|
||||
|
|
|
|||
|
|
@ -36,6 +36,55 @@ YOUR COMPUTER YOUR PHONE
|
|||
|
||||
---
|
||||
|
||||
## Architecture Comparison
|
||||
|
||||
### ttyd + Tailscale (Self-hosted)
|
||||
|
||||
```
|
||||
YOUR COMPUTER YOUR PHONE
|
||||
┌─────────────────┐ ┌─────────────────┐
|
||||
│ Claude Code │◄──────────────│ Browser │
|
||||
│ (runs here) │ Tailscale │ (same session) │
|
||||
│ ┌───────────┐ │ VPN │ │
|
||||
│ │ ttyd │ │ └─────────────────┘
|
||||
│ └───────────┘ │
|
||||
└─────────────────┘
|
||||
✅ ToS-Safe: CLI officiel, pas d'intermédiaire cloud
|
||||
```
|
||||
|
||||
### Happy Coder (App native)
|
||||
|
||||
```
|
||||
YOUR COMPUTER YOUR PHONE
|
||||
┌─────────────────┐ ┌─────────────────┐
|
||||
│ Claude Code │ │ Happy App │
|
||||
│ (CLI officiel) │◄─────────────►│ (Expo native) │
|
||||
│ ▲ │ Local sync │ │
|
||||
│ subprocess │ └─────────────────┘
|
||||
│ ┌───────────┐ │
|
||||
│ │ Happy Hub │ │
|
||||
│ └───────────┘ │
|
||||
└─────────────────┘
|
||||
✅ ToS-Safe: Wrapper local, subprocess Node.js
|
||||
```
|
||||
|
||||
### Remoto.sh (Cloud relay)
|
||||
|
||||
```
|
||||
REMOTO CLOUD YOUR PHONE
|
||||
┌─────────────────┐ ┌─────────────────┐
|
||||
│ Docker │◄──────────────│ Browser │
|
||||
│ Container │ WebSocket │ │
|
||||
│ ┌───────────┐ │ └─────────────────┘
|
||||
│ │ Claude │ │
|
||||
│ │ Code CLI │ │
|
||||
│ └───────────┘ │
|
||||
└─────────────────┘
|
||||
⚠️ ToS Risk: Cloud wrapping = potentiel "proxy non autorisé"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Why This Approach?
|
||||
|
||||
### ToS Considerations
|
||||
|
|
@ -260,14 +309,14 @@ sudo snap install ttyd --classic
|
|||
|
||||
---
|
||||
|
||||
## Alternatives Considered
|
||||
## Alternatives Comparison
|
||||
|
||||
| Solution | Pros | Cons | ToS Risk |
|
||||
|----------|------|------|----------|
|
||||
| **ttyd + Tailscale** ✅ | Simple, no wrapper, ToS-safe | Terminal UX on mobile | ✅ Safe |
|
||||
| Happy Coder (7.1K ⭐) | Native apps, polished | Wraps CLI | ⚠️ Unknown |
|
||||
| Claude Code Web (5.5K ⭐) | Rich UI | Wraps CLI | ⚠️ Unknown |
|
||||
| tmux + SSH | Zero deps | Needs SSH client on phone | ✅ Safe |
|
||||
| Solution | Type | Pros | Cons | ToS | Stars |
|
||||
|----------|------|------|------|-----|-------|
|
||||
| **ttyd + Tailscale** ✅ | Self-hosted | Gratuit, max contrôle, CLI officiel | Setup manuel, UX terminal | ✅ Safe | N/A |
|
||||
| [Happy Coder](https://github.com/slopus/happy) | App native | Voice, encryption, multi-instances, mobile-first | Dépendance projet tiers | ✅ Safe | 7.8K |
|
||||
| [Remoto.sh](https://remoto.sh) | Cloud relay | Setup rapide, browser only | Cloud wrapping, latence, coût | ⚠️ Risk | N/A |
|
||||
| tmux + SSH | Self-hosted | Zero deps, CLI officiel | Besoin client SSH mobile | ✅ Safe | N/A |
|
||||
|
||||
We chose ttyd + Tailscale because:
|
||||
- It's just your terminal exposed via browser
|
||||
|
|
@ -276,6 +325,33 @@ We chose ttyd + Tailscale because:
|
|||
|
||||
---
|
||||
|
||||
### Happy Coder - Alternative Recommandée
|
||||
|
||||
Si vous préférez une **app native** plutôt qu'un terminal web :
|
||||
|
||||
- **Repo** : [github.com/slopus/happy](https://github.com/slopus/happy)
|
||||
- **Stars** : 7.8K (janvier 2026)
|
||||
- **License** : MIT
|
||||
- **Stack** : Tauri (desktop) + Expo (mobile)
|
||||
- **Providers** : Claude Code, Codex, Gemini
|
||||
|
||||
**Pourquoi ToS-safe** : Happy Coder est un wrapper local qui exécute le CLI officiel via subprocess Node.js. Pas d'appels API directs, pas de proxy cloud.
|
||||
|
||||
**Installation** :
|
||||
```bash
|
||||
npm i -g happy-coder && happy
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Remoto.sh - Alternative Cloud (avec risques)
|
||||
|
||||
**Pourquoi risqué** : Remoto.sh utilise des conteneurs Docker cloud comme relay. Selon les ToS Anthropic (§4.2), les "proxies non autorisés qui masquent l'origine des requêtes" sont interdits. Des suspensions ont été signalées sur Reddit/HN pour usage similaire.
|
||||
|
||||
> **Recommandation** : Préférer Happy Coder ou ttyd+Tailscale pour éviter les risques ToS.
|
||||
|
||||
---
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [ttyd GitHub](https://github.com/tsl0922/ttyd) - Terminal web server
|
||||
|
|
@ -285,6 +361,16 @@ We chose ttyd + Tailscale because:
|
|||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- [Happy Coder GitHub](https://github.com/slopus/happy) - 7.8K ⭐, MIT license
|
||||
- [ttyd GitHub](https://github.com/tsl0922/ttyd) - Terminal web server
|
||||
- [Tailscale](https://tailscale.com/) - Zero-config VPN
|
||||
- [Remoto.sh](https://remoto.sh) - Cloud terminal (ToS risk noted)
|
||||
- ToS Anthropic §4.2 - Proxies non autorisés
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
|
||||
This doc is **WIP/UNTESTED**. If you test this setup, please share:
|
||||
|
|
@ -296,4 +382,4 @@ Open an issue or PR on this repo.
|
|||
|
||||
---
|
||||
|
||||
*Last updated: January 2026 | Status: WIP/UNTESTED*
|
||||
*Last updated: January 2026 | Status: WIP/UNTESTED | Data verified: Happy Coder 7.8K ⭐ (2026-01-19)*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue