sf-cli

AI 驱动的前端开发 CLI 工具，通过自动学习项目业务和技术规范，实现需求到代码的自动化工作流。

安装

npm install -g @nick848/sf-cli

快速开始

# 启动 CLI
sf-cli
# 或
sfa

环境变量配置

在使用前，需要配置至少一个 AI 模型的 API Key：

# 智谱 GLM（推荐）
export GLM_API_KEY=your_glm_api_key

# OpenAI
export OPENAI_API_KEY=your_openai_api_key

# Claude
export ANTHROPIC_API_KEY=your_anthropic_api_key

# DeepSeek
export DEEPSEEK_API_KEY=your_deepseek_api_key

# 通义千问
export QWEN_API_KEY=your_qwen_api_key

# Kimi
export KIMI_API_KEY=your_kimi_api_key

命令说明

基础命令

| 命令 | 说明 | |------|------| | /init | 初始化项目，生成 AGENTS.md 及模板文档 | | /new <需求描述> | 启动新的开发工作流 | | /apply [变更ID] | 提交当前变更进入开发阶段 | | /archive [变更ID] | 归档已完成的变更 | | /undo | 撤销当前变更的所有修改 | | /update | 更新 CLI 版本 | | /learn | 学习并更新代码规范 | | /model | 切换或配置 AI 模型 | | /help [命令] | 显示帮助信息 | | /exit | 退出 CLI |

Skill 技能

Skill 是赋能当前 Agent 执行某项任务的能力，共享所有上下文：

#code requirement="实现登录功能" language="typescript"
#review files=["src/auth.ts", "src/login.ts"]

SubAgent 子代理

SubAgent 独立完成任务，有独立上下文：

$code 实现用户登录功能
$review 审核当前变更的代码质量

文件引用

使用 @ 符号引用文件：

@src/index.ts
@src/utils/helper.ts:42
@src/components/Button.tsx:15:10

工作流

sf-cli 采用 9 步工作流实现需求到代码的自动化：

Step 1: 需求分析
   ↓
Step 2: 架构设计
   ↓
Step 3: BDD 场景拆解
   ↓
Step 4: OpenSpec 规格生成 ← 需要用户确认
   ↓
Step 5: 测试用例生成
   ↓
Step 6: 代码实现
   ↓
Step 7: 代码审核
   ↓
Step 8: 代码测试 ← 需要用户确认
   ↓
Step 9: 文档更新 ← 需要用户确认
   ↓
归档

项目结构

初始化后，项目会生成以下目录结构：

.sf-cli/
├── AGENTS.md       # 工程入口文档
├── prod.md         # 业务描述文档
├── arch.md         # 架构文档
├── learn/          # 学习记录
│   └── dialog.json
├── skills/         # 自定义技能
├── agents/         # 自定义 SubAgent
└── state/          # CLI 状态

openspec/
├── config.yaml     # 开发规范配置
├── spec/           # 规格文档
└── changes/        # 变更文档

支持的模型

| 模型 | 说明 | |------|------| | GLM-5 | 智谱 GLM 系列 | | OpenAI | GPT-4o / GPT-4-turbo / GPT-3.5-turbo | | Claude | Claude 3.5 Sonnet / Opus / Haiku | | DeepSeek | DeepSeek Coder / Chat | | Qwen | 通义千问 Max / Plus / Turbo | | Kimi | Moonshot Kimi 8k / 32k / 128k |

MCP 服务集成

sf-cli 预装以下 MCP 服务：

• 语雀 - 获取产品 PRD 文档
• Figma - 获取设计稿信息
• 蓝湖 - 获取设计稿和切图

配置 MCP 凭证：

# 在 .sf-cli/config.yaml 中配置
mcp:
  yuque:
    token: your_yuque_token
  figma:
    token: your_figma_token
  lanhu:
    token: your_lanhu_token

开发

# 克隆仓库
git clone <repo-url>
cd superFrontend

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

# 运行测试
npm test

License

MIT