AI CODING
本文介绍了搭建AI编码全流程技能的安装配置方法，主要包括三个工具：Claude Code、OpenSpec和UI/UX Pro Max。首先详细说明了Claude Code的Node.js环境准备、安装步骤和验证方法。其次讲解了OpenSpec的安装流程，重点介绍了与Claude Code集成的初始化操作和核心斜杠命令的使用场景。最后提供了UI/UX Pro Max的安装指南，包括环境检查、CLI工具安装和项目初始化配置。这些工具协同工作，可帮助开发者实现从需求分析到代码生成的全流程AI辅助开发。
文章目录
- AI CODING
- 前言
- 一、安装Claude Code
- 二、安装Openspec
- 三、安装UI/UX Pro Max
- 总结
前言
快速构建一套从需求到研发落地上线的全流程SKILLS
一、安装Claude Code
🔧 前置环境检查 安装 Node.js（必需） 版本要求：22.x 版本 下载安装：前往 nodejs.org 下载 Windows 安装包（.msi），安装时务必勾选 Add to PATH（自动添加到系统环境变量） 验证安装：打开 PowerShell / 终端，输入以下命令，显示版本号即代表成功
node —version # 输出示例：v20.12.2
npm —version # 输出示例：10.5.0
终端准备 推荐使用 PowerShell 5.1+ 或 Windows Terminal，建议以管理员身份运行（避免权限问题） 若遇到 PowerShell 脚本执行限制，执行以下命令解除：
Set-ExecutionPolicy –Scope CurrentUser –ExecutionPolicy RemoteSigned
📥 正式安装（npm 方式） 全局安装（推荐，全局可用） 以管理员身份打开终端，执行安装命令：
npm install –g @anthropic-ai/claude-code
✅ 安装验证 安装完成后，执行以下命令验证，显示版本号即代表安装成功：
claude —version # 输出示例：2.1.81 (Claude Code)
二、安装Openspec
全局安装 OpenSpec（已装可跳过）
# 管理员身份打开 PowerShell
npm install –g @fission-ai/openspec@latest
# 验证
openspec —version
项目初始化（关键：绑定 Claude Code）
# 进入你的项目根目录
cd D:\\projects\\your-project
# 初始化并选择 Claude Code
openspec init
交互式向导中，集成工具选择「Claude Code」 完成后会生成： .openspec/：规范、提案、任务清单 .claude/skills/openspec/：Claude Code 技能配置 openspec.yaml：项目全局配置
验证集成
# 查看当前项目的 OpenSpec 配置
openspec list
Claude Code 中使用：核心斜杠命令 在 Claude Code 聊天框输入 /openspec: 即可触发，支持自动补全。
- 探索需求（梳理模糊需求 → 明确规范）
/openspec:explore 为电商后台实现用户角色权限管理
作用：引导你澄清需求、定义边界、输出结构化上下文 输出：.openspec/explore/xxx/ 下的分析文档
- 提出变更（生成完整提案）
/openspec:propose 给用户列表接口添加角色过滤参数
作用：一次性生成 规范（spec.md）+ 任务清单（tasks.md）+ 变更说明 输出：.openspec/proposals/add-user-role-filter/
- 应用提案（让 Claude 按规范写代码）
/openspec:apply add-user-role-filter
作用：读取提案里的 spec.md 和 tasks.md，自动生成 / 修改代码 效果：Claude 会严格遵循 OpenSpec 定义的接口、参数、约束来编码
- 归档提案
# 归档已完成提案
/openspec:archive add-user-role-filter
- 完整工作流示例（从需求到代码） 终端：cd 项目 → openspec init（选 Claude Code） Claude Code：/openspec:explore 实现用户管理模块 Claude Code：/openspec:propose 开发用户列表接口（带分页、角色过滤） 终端 / 编辑器：检查 .openspec/proposals/xxx/ 里的 spec.md、tasks.md，确认规范 Claude Code：/openspec:apply xxx → 自动生成 controller、service、路由 等代码 开发：Review 代码、测试、提交；后续迭代重复 3–5 步
进阶：自定义规范与约束 编辑 config.yaml 可定义项目级规则，Claude 会严格遵守：
# openspec.yaml
project: "电商后台"
architecture: "微服务 + RESTful API"
stack:
backend: "SpringBoot 3.2"
database: "MySQL 8.0"
auth: "JWT"
constraints:
– "所有 API 必须有参数校验"
– "禁止硬编码密钥"
– "接口返回统一格式：{ code, data, msg }"
三、安装UI/UX Pro Max
UI/UX Pro Max 是 AI 编码助手的设计增强 Skill，Windows 下通过 npm 安装核心 CLI 工具 uipro-cli 即可一键部署。
🔧 前置环境检查 Python 3.x（部分脚本依赖）
python —version # 或 python3 –version
以管理员身份打开 PowerShell/Windows Terminal 📥 安装 CLI（npm 方式，推荐） 全局安装 uipro-cli
# 标准安装
npm install –g uipro-cli
# 国内加速（可选）
npm install –g uipro-cli —registry=https://registry.npmmirror.com
验证安装
uipro —version # 显示版本号即成功
uipro —help # 查看命令帮助
🚀 项目初始化（集成到 AI 助手） 进入你的项目根目录，执行初始化并指定 AI 助手：
cd 你的项目路径
# 集成到 Claude Code（最常用）
uipro init —ai claude
# 其他 AI 助手可选
# uipro init –ai cursor
# uipro init –ai copilot
# uipro init –ai windsurf
# uipro init –ai qoder
执行后会在项目中生成 .claude/skills/ui-ux-pro-max/ 等配置目录。 离线环境可加 –offline 参数：
uipro init —ai claude —offline
✅ 验证与使用 启动 Claude Code，输入 /ui-ux-pro-max 或 /uipro 即可激活技能。 示例 Prompt：
用 UI/UX Pro Max 生成一个现代 SaaS 登录页，Bento 布局、深色模式、Tailwind CSS
总结
未完待续…
