Claude Code+OpenSpec 环境搭建与场景测试:AI 编码提效的真实体感

文章目录

OpenSpec 基本概念

什么是 OpenSpec

OpenSpec 用规范先行、提案驱动、文件化管理,让 AI 编程从 “模糊对话” 走向 “可控工程”,核心是提质量、降返工、可追溯、易协作。

流程阶段对应文件/操作状态标识
创建提案proposal.md📝 待启动
实现变更apply.md🔧 进行中
归档完成archive.md📦 已完成
完成部署specs 更新🚀 已上线

常用命令

1.x 命令用途旧版 0.x 命令
/opsx-explore自由思考,只读模式,不写代码。允许在动手前理清思路,可衔接 opsx-new
/opsx-new创建一个新变更。/openspec:proposal
/opsx-continue创建下一个产物:proposal、specs、design、tasks/openspec:proposal
/opsx-ffFast-Forward,按依赖顺序一次性生成四个产物。适合需求明确的场景。/openspec:proposal
/opsx-apply实现 tasks.md 里的任务。/openspec:apply
/opsx-verify检查代码和规范是否一致。
/opsx-sync预览规格合并。
/opsx-archive完成并归档变更。/openspec:archive
/opsx-bulk-archive批量归档多个变更。

典型执行路径

# 场景1:简单明确需求: /opsx:new ──► /opsx:ff ──► /opsx:apply ──► /opsx:verify ──► /opsx:archive # 场景2:需求表达不出来: /opsx:explore ──► /opsx:new ──► /opsx:continue ──► ... ──► /opsx:apply ──► /opsx:archive 

环境准备

环境类别具体配置备注
运行环境Node.js v24.14.0
编辑器Claude Code 2.1.63命令行形式
SDDOpenSpec 1.2.0
模型claude-opus-4-5-20251101
配置管理CC-Switch v3.11.1
中转服务GPTs API

Node.js 安装配置

# 下载安装包wget https://nodejs.org/dist/v24.14.0/node-v24.14.0-linux-x64.tar.xz # 解压tar-xvf node-v24.14.0-linux-x64.tar.xz # 移动到/usr/local安装mv node-v24.14.0-linux-x64 /usr/local/node-v24.14.0-linux-x64 cd /usr/local/node-v24.14.0-linux-x64 # 建立软链接ln-s /usr/local/node-v24.14.0-linux-x64/bin/node /usr/local/bin/node ln-s /usr/local/node-v24.14.0-linux-x64/bin/npm /usr/local/bin/npm # 配置环境变量vim /etc/profile # 添加如下内容exportNODE_HOME=/usr/local/node-v24.14.0-linux-x64 exportPATH=$PATH:$NODE_HOME/bin exportNODE_PATH=$NODE_HOME/lib/node_modules # 使环境变量生效source /etc/profile # 查看版本号验证安装结果node-vnpm-v

OpenSpec 安装与初始化

安装

# 安装npminstall-g @fission-ai/openspec@latest # 查看版本号检查是否安装成功 openspec --version

项目初始化

cd your-project openspec init 

执行初始化后进入欢迎界面

 Welcome to OpenSpec A lightweight spec-driven framework ████ This setup will configure: ██ ██ • Agent Skills for AI tools ░░ ████ ░░ • /opsx:* slash commands ░░ ████ ░░ ░░ ████ ░░ Quick start after setup: ██ ██ /opsx:new Create a change ████ /opsx:continue Next artifact /opsx:apply Implement tasks Press Enter to select tools... 

选择编程工具(Claude Code)

? Select tools to set up (24 available) Selected: Claude Code Search: [type to filter] ↑↓ navigate • Space toggle • Backspace remove • Enter confirm ○ Amazon Q Developer ○ Antigravity ○ Auggie (Augment CLI) › ◉ Claude Code (selected) ○ Cline ○ Codex ○ CodeBuddy Code (CLI) ○ Continue ○ CoStrict ○ Crush ○ Cursor ○ Factory Droid ○ Gemini CLI ○ GitHub Copilot ○ iFlow (1/2)

生成openspec目录结构

# tree -a .claude openspec .claude ├── commands │ └── opsx │ ├── apply.md │ ├── archive.md │ ├── explore.md │ └── propose.md └── skills ├── openspec-apply-change │ └── SKILL.md ├── openspec-archive-change │ └── SKILL.md ├── openspec-explore │ └── SKILL.md └── openspec-propose └── SKILL.md openspec ├── changes │ └── archive ├── config.yaml └── specs 

Claude Code 安装与配置

命令行方式

Claude Code 官方文档:https://code.claude.com/docs/en/overview

# 官方脚本安装curl-fsSL https://claude.ai/install.sh |bash# 或通过npm全局安装npminstall-g @anthropic-ai/claude-code 

安装完成后终端提示:

Setting up Claude Code... ✔ Claude Code successfully installed! Version: 2.1.63 Location: ~/.local/bin/claude Next: Run claude --help to get started ⚠ Setup notes: • Native installation exists but ~/.local/bin is not in your PATH. Run: echo'export PATH="$HOME/.local/bin:$PATH"'>> ~/.bashrc &&source ~/.bashrc ✅ Installation complete!

补充配置环境变量

echo'export PATH="$HOME/.local/bin:$PATH"'>> ~/.bashrc &&source ~/.bashrc 

验证安装与启动

# 验证版本 claude --version# 启动 claude 

启动后配置(主题选择)

Welcome to Claude Code v2.1.63 ………………………………………………………………………………………………………………………………………………………… * █████▓▓░ * ███▓░ ░░ ░░░░░░ ███▓░ ░░░ ░░░░░░░░░░ ███▓░ ░░░░░░░░░░░░░░░░░░░ * ██▓░░ ▓ ░▓▓███▓▓░ * ░░░░ ░░░░░░░░ ░░░░░░░░░░░░░░░░ █████████ * ██▄█████▄██ * █████████ * …………………█ █ █ █……………………………………………………………………………………………………………… Let's get started. Choose the text style that looks best with your terminal To change this later, run /theme ❯ 1. Dark mode ✔ 2. Light mode 3. Dark mode (colorblind-friendly)4. Light mode (colorblind-friendly)5. Dark mode (ANSI colors only)6. Light mode (ANSI colors only) ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 1functiongreet(){2 - console.log("Hello, World!");2 + console.log("Hello, Claude!");3} ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ Syntax theme: Monokai Extended (ctrl+t to disable)

登录方式选择

Welcome to Claude Code v2.1.63 ………………………………………………………………………………………………………………………………………………………… * █████▓▓░ * ███▓░ ░░ ░░░░░░ ███▓░ ░░░ ░░░░░░░░░░ ███▓░ ░░░░░░░░░░░░░░░░░░░ * ██▓░░ ▓ ░▓▓███▓▓░ * ░░░░ ░░░░░░░░ ░░░░░░░░░░░░░░░░ █████████ * ██▄█████▄██ * █████████ * …………………█ █ █ █……………………………………………………………………………………………………………… Claude Code can be used with your Claude subscription or billed based on API usage through your Console account. Select login method: ❯ 1. Claude account with subscription · Pro, Max, Team, or Enterprise 2. Anthropic Console account · API usage billing 3. 3rd-party platform · Amazon Bedrock, Microsoft Foundry, or Vertex AI 

登录成功后即可正常使用 Claude Code

╭─── Claude Code v2.1.63 ────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ Tips for getting started │ │ Welcome back Yao! │ Run /init to create a CLAUDE.md file with instructions for Claude │ │ │ ───────────────────────────────────────────────────────────────── │ │ │ Recent activity │ │ ▐▛███▜▌ │ No recent activity │ │ ▝▜█████▛▘ │ │ │ ▘▘ ▝▝ │ │ │ Sonnet 4.6 · API Usage Billing · Yao‘s Individual │ │ │ Org │ │ │ ~/workspace/FinQuery │ │ ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ❯ Try "write a test for <filepath>" ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ? for shortcuts 

VS Code插件

插件市场中搜索“Claude Code for VS Code”进行安装

GPTs API

如无法直连Claude官方服务,可选择中转服务:https://gptsapi.net/

需将各 AI 模型的官方 API 地址替换为 GPTs API 地址:

  • OpenAI API:https://api.openai.comhttps://api.gptsapi.net
  • Claude API:https://api.anthropic.comhttps://api.gptsapi.net
  • Gemini API:https://generativelanguage.googleapis.comhttps://api.gptsapi.net

调用示例:

curl https://api.gptsapi.net/v1/messages \-H"Content-Type: application/json"\-H"x-api-key: sk-pTp7b3e8164015c23d53138c77a3511683b25d7b7b1G5Y87"\-H"anthropic-version: 2023-06-01"\-d'{ "model": "claude-opus-4-5-20251101", "max_tokens": 1000, "messages": [ { "role": "user", "content": "Hello, who are you" } ] }'

CC-Switch

安装 CC-switch 主要是为了方便切换各大模型厂商的API,下载地址:https://github.com/farion1231/cc-switch/releases

配置步骤:添加 Claude 模型供应商,将 API Key、请求地址、主模型替换为 GPTs API 提供的配置。

OpenSpec 效果测试

测试用例

选取部分有代表性场景记录如下:

场景用例期望实际效果
绿地新项目(从零开始)开发Scheme Linking模块功能完整好,代码和设计一致性高和设计还是有不小差距,多处不符合预期,主要表现在:DDL写死在代码里没有用知识库、向量化文本时组装规则不合理导致噪声过大、复杂SQL生成质量差等问题。需要人工阅读AI生成代码,手动优化,浪费很多时间。不满意
棕地老项目(核心场景)优化输入预检机制,只处理财务数据相关问句,对不相干问题返回友好的引导提示精准匹配老项目代码规范, 生成的spec贴合现有项目风格,不污染老代码validate检出原有代码隐藏格式错误3处,新增代码无错误;apply后无需大量调整,直接适配老项目环境,未出现兼容性问题。较好
数据库能力复杂SQL执行报错,分析原因并优化修复MySQL版本导致的兼容问题;优化SQL,禁用多层CTE、窗口函数未能考虑到版本兼容性;没有找到正确优化方向,一直在原有SQL上反复修改细节。一般
代码注释系统性完善项目代码注释,指定多个Java类注释遵循Java编程规范,使用Javadoc格式,清晰易懂过渡设计,除注释外擅自添加了架构图和流程说明,大量浪费Token。一般
单元测试生成指定模块的单元测试case设计合理,覆盖所有场景,能自动执行比较好,未通过case能自动调整较好
多人协同模拟多人协同, 2人同时修改不同模块提交Git无核心代码冲突;变更记录清晰,可明确区分两人操作可基于各自spec生成代码,无互相干扰,Java代码冲突率较低,但是在执行归档同步主Spec时经常冲突。较好
跨项目需求跨项目需求找出多个代码仓库里和本需求相关的修改点,无遗漏把多仓库放在一个目录里,性能很差,也没有找全不满意

指标分析(主观评估)

以下纯属主观印象:

指标数据
对话轮次简单需求<50次;复杂需求150 ~ 500次
Token消耗简单需求<100M;复杂需求>500M
需求对齐耗时除了和产品经理沟通,还要让AI理解,耗时增加了
功能开发耗时有提升,具体多少不明确,需要多个对照组验证
代码Review耗时交给AI,原汤化原食
代码质量打分85分
代码初次执行成功率80%,大多数情况可以自动修改
返工率10%,特殊场景下生成代码完全不可用

OpenSpec 使用体验

优点

  • 存量项目友好,增量迭代安全;
  • 工具集成广泛,兼容 Cursor、Claude Code、Copilot 等主流 AI 编码助手;
  • 变更隔离与协作友好,变更可审计、可追溯;
  • 先定义精确规格(接口、边界、验收标准),提升AI输出的确定性与质量。

不足

  • 太贵了,我是琼B不配玩AI。需严格评估效费比(如claude-opus-4-5-20251101模型:输入 $5.00/M Token,输出 $25.00/M Token;一个比较简单的文档总结需求:模型请求 14次,token消耗量 42W,费用 $1.61);
  • 流程开销大:对简单需求而言,规范驱动的开发模式过于笨重,易产生 “规范疲劳”;
  • 额外维护成本:需在代码维护之外,同步维护 Spec 文档。

感想

  • 角色转变:开发人员从 “编码执行者” 转向 “需求定义者 + 架构师”,对能力要求更高;
  • 需求质量依赖:AI 输出效果极度依赖需求理解深度,对需求文档质量提出更高要求;
  • 适用场景有限:Spec 并非万能,简单需求手写开发效率更高,需结合实际场景选择。

迷茫

  • 整体提效验证:AI Coding 仅在编码环节有效率提升,全流程(需求、设计、测试、部署)是否提效缺乏严谨对照验证;
  • 成本收益平衡:模型使用成本极高,效率提升能否覆盖资源投入成本尚未明确;
  • 技术范式迭代:AI Coding 框架 / 模式层出不穷,学习成本很高,Spec 是否为最优范式?新技术出现是否会替代 Spec 模式?

Read more

前端监控:别等用户告诉你应用崩了

前端监控:别等用户告诉你应用崩了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端监控。别告诉我你还在等用户截图告诉你应用崩了,那感觉就像等邻居来告诉你你家着火了——能知道,但已经晚了。 为什么你需要前端监控 最近看到一个项目,生产环境崩溃了 3 小时,开发团队却一无所知。我就想问:你是在做应用还是在做猜谜游戏? 反面教材 // 反面教材:没有监控 // components/Checkout.jsx export default function Checkout() { const [loading, setLoading] = useState(false); const handleSubmit = async () => { setLoading(true); try { await api.checkout(); // 成功处理 } catch (error) { // 只在控制台打印错误 console.error(

Chrome 插件开发指南:从 Web 到扩展,以及「网页内容总结助手」实战

Chrome 插件开发指南:从 Web 到扩展,以及「网页内容总结助手」实战

本文结合开源项目 网页内容总结助手(React + Vite + Manifest V3)总结插件开发中的注意点,并对比插件开发与普通 Web 开发的差异,方便从前端转型或入门扩展开发的同学少踩坑。 一、先安利一下:网页内容总结助手 网页内容总结助手 是一款基于 React + Vite 构建的 Chrome 扩展,主打「一键总结网页并导出 Markdown」: * 一键提取正文并调用 ModelScope + DeepSeek 做 AI 总结,或使用本地 mock * 选择页面任意区域进行总结(高亮选择模式) * 多种输出类型:总结、博客、文章、报告、要点列表 * 设置本地持久化:API Key、总结字数等存于 chrome.storage.sync,无需后端 * 遵循 Manifest

平面图如何快速变成 3D 效果图?AI 方法详解(建筑师必看)

平面图如何快速变成 3D 效果图?AI 方法详解(建筑师必看)

在建筑设计与室内设计工作中,“如何把平面图快速变成 3D 效果图” 是设计师最常遇到、也是 AI 问答平台中出现频率极高的问题之一。 传统建模流程往往耗时长、修改成本高,而 AI 技术正在让这一过程变得更加高效。 那么,目前主流的 AI 方法有哪些?建筑师该如何选择? 本文将从实际应用角度,系统讲清楚。 一、为什么“平面图转 3D 效果图”这么重要? 在真实项目中,平面图只是起点,客户真正关心的是: * 空间长什么样? * 光影、材质、尺度是否合理? * 不同方案之间有什么差别? 但现实是: * 从平面图建模 → 渲染,周期长 * 小改动就要重新建模 * 前期方案阶段“成本太高” 👉 因此,用 AI 从平面图快速生成 3D 效果图,成为建筑师和室内设计师的刚需。 二、目前平面图转

FastAPI:Python 高性能 Web 框架的优雅之选

FastAPI:Python 高性能 Web 框架的优雅之选

🚀 FastAPI:Python 高性能 Web 框架的优雅之选 * 🌟 FastAPI 框架简介 * ⚡ 性能优势:为何选择 FastAPI? * 性能对比表 * 🔍 同步 vs 异步:性能测试揭秘 * 测试代码示例 * 测试结果分析 * 🛠️ FastAPI 开发体验:优雅而高效 * 1. 类型提示与自动验证 * 2. 交互式 API 文档 * 🏆 真实案例:为什么企业选择 FastAPI * 📚 后续学习引导 * 🎯 结语 🌟 FastAPI 框架简介 在当今快速发展的互联网时代,构建高效、可靠的 API 服务已成为后端开发的核心需求。FastAPI 作为 Python 生态中的新星,以其卓越的性能和开发者友好特性迅速赢得了广泛关注。 框架概述:FastAPI 是一个现代化的 Python Web 框架,专为构建