Generate Tech Stack

generate-tech-stack

扫描任意项目并生成可视化的 TECH_STACK.html 页面——支持明暗主题、自适应、零配置。

可作为 Claude Code 技能、MCP 服务或 GitHub Copilot 扩展使用。

在线演示 → ——由 fastapi/full-stack-fastapi-template 生成，未作任何修改。

（真实 CLI 输出，未经脚本处理——如果不想自动播放，可查看静态截图）

---

生成内容

每个生成的页面都包含：

Section	Description
统计行	工具总数 · 类别数 · AI 后端 · 数据存储
架构图	分层流程图（使用方 → API → AI/NLP → 数据/可观测性/前端）
条形图	按类别显示的水平条形图，颜色与类别匹配
工具卡片	每个类别对应一张卡片；每个工具显示一个圆点、名称、描述和徽标
徽标说明	说明 pip、dep、optional、core、deploy、ci 等标记
页脚	项目名称 · 工具数量 · 生成日期
引导导览	逐步讲解每个版块；首次打开报告时自动显示，也可随时点击 ? 按钮重播
主题切换	导览按钮旁的太阳/月亮按钮可在暗色和亮色模式间切换

---

仓库结构

~/.claude/skills/generate-tech-stack/
├── SKILL.md                  ← Claude Code skill definition
├── INSTALL.md                ← detailed per-platform installation guide
├── README.md                 ← this file
├── scripts/
│   └── analyze.py            ← core scanner + HTML renderer (no dependencies)
├── mcp/
│   ├── server.py             ← MCP stdio server (pip install mcp)
│   └── requirements.txt
└── copilot/
    ├── index.js              ← GitHub Copilot Extension (Express)
    ├── package.json
    └── openai_function.json  ← OpenAI / Antigravity function definition

---

用法

pip（CLI + MCP 服务）

pip install generate-tech-stack-mcp

generate-tech-stack . TECH_STACK.html    # CLI: scan and write the report
generate-tech-stack-mcp                   # stdio MCP server

安装 pip 后，任意 MCP 宿主的配置都可简化为：

{
  "mcpServers": {
    "generate-tech-stack": { "command": "generate-tech-stack-mcp" }
  }
}

Claude Code

/generate-tech-stack

在任意项目目录中运行。该技能会调用 scripts/analyze.py 并在浏览器中打开结果。

MCP（Claude Desktop、VS Code、Cursor、Zed、Windsurf、Continue）

pip install mcp

将以下内容添加到宿主的 MCP 配置中（将路径替换为你的实际主目录）：

{
  "mcpServers": {
    "generate-tech-stack": {
      "command": "python3",
      "args": ["/home/<you>/.claude/skills/generate-tech-stack/mcp/server.py"]
    }
  }
}

然后询问：generate my tech stack 或 /generate-tech-stack。

提供的 MCP 工具：

• generate_tech_stack — 扫描项目，写入 TECH_STACK.html，并在浏览器中打开
• list_tech_stack — 返回 JSON 摘要，不写入文件

GitHub Copilot 扩展

cd copilot
npm install
npm start        # listens on port 3000
ngrok http 3000  # expose for GitHub to reach

注册一个启用了 Copilot 扩展的 GitHub App，将 Agent URL 设置为 https://your-url/agent，并将其安装到你的账户。然后在 Copilot Chat 中：

@generate-tech-stack /generate-tech-stack
@generate-tech-stack /generate-tech-stack /path/to/project

命令行（独立运行）

python3 ~/.claude/skills/generate-tech-stack/scripts/analyze.py /path/to/project
# output: /path/to/project/TECH_STACK.html

# custom output path:
python3 scripts/analyze.py . ~/Desktop/TECH_STACK.html

analyze.py 不依赖任何第三方库——只需 Python 3.8+。

---

检测内容

Source file	Detected tools
requirements.txt / pyproject.toml	Python 包（Web、数据库、AI、测试、可观测性、安全等）
package.json	Node / npm 包（框架、前端、数据库驱动、工具等）
go.mod	Go 语言
Cargo.toml	Rust 语言
pom.xml / build.gradle	Java / Kotlin
Gemfile	Ruby
composer.json	PHP
**/*.py 源文件	通过 importlib.find_spec() 模式检测可选/动态 SDK
docker-compose.yml / .env	PostgreSQL、Redis、MongoDB、SQLite 连接字符串
Dockerfile	Docker
docker-compose.yml	Docker Compose
.github/workflows/	GitHub Actions
.gitlab-ci.yml	GitLab CI
alembic.ini	Alembic 迁移
nginx.conf / Caddyfile	反向代理
tsconfig.json / src/**/*.ts	TypeScript

---

检测到的类别

类别	颜色	示例
语言和运行时	绿色	Python、Go、Rust、TypeScript
Web / API 框架	紫色	FastAPI、Express、Django、Next.js
数据库 / 存储	绿色	SQLAlchemy、Prisma、Redis、ChromaDB
AI SDK	蓝色	OpenAI、Anthropic、LangChain、GuardrailsAI、NVIDIA NeMo、Presidio
NLP / ML	青绿色	spaCy、Transformers、Sentence Transformers
可观测性	青绿色	Prometheus、OpenTelemetry、Sentry、Loguru
测试	黄色	pytest、Jest、Cypress、Playwright
安全 / 身份验证	玫瑰色	PyJWT、bcrypt、Authlib、Helmet
基础设施 / 部署	橙色	Docker、Kubernetes、Celery、Boto3
前端 / 仪表板	灰色	React、Vue、Tailwind、Recharts
消息传递 / 通信	蓝色	Kafka、RabbitMQ、Socket.io
开发工具	灰色	ESLint、Prettier、Vite、TypeScript

---

设计

默认使用深色模式，可切换为浅色模式（右上角，不会持久保存——重新加载后会重置为深色模式）。字体：IBM Plex Sans（正文）+ JetBrains Mono（代码 / 徽章），通过 Google Fonts 加载。原生 JavaScript 仅用于引导式导览和主题切换——其他部分均使用纯 HTML + CSS。所有内容都在一个独立文件中，可在任何浏览器中离线打开。

---

另请参阅

• INSTALL.md — 各平台的安装说明
• SKILL.md — Claude Code 技能规范