GitHub Spec-Kit 完全上手指南 | Vibe Coding时代程序员必备的新技能！

本期

课程

我们 会

采用

gethub

官方

推出 的

spea

kkit

这个

开发 的

套件 来

去 开发

一个

真实 的

AI 用

这个

spea

kkit

最近 在

海洋 外

都 挺

火 的

你 如果

去 搜

YouT

ube

这 两周

有 很多

相关 的

视频

科技

大佬 都

在 讲

gethub

的

spea

kkit

它 所

尊心 的

一个

概念

叫做

规范

驱动

开发 的

一个

概念 这

一块

我们

之后 会

在 我们

的 课程

当中 讲

到 来

给 大家

看 一下

本期

课程 的

一个

实战 的

一个

项目

我们 会

去 开发

一个

叫做

AI

charts

的 这样

的 一个

智能

数据

可实化

的 一个

小 工具

我 创建

一下

测试

用力

我们

可以 来

实际 的

测试

一下

比方说

环形 图

当然 你

也 可以

不 指定

环形 图

AI 会

去 帮

你 自动

的 去

选择

一个

最佳 的

图表

进行

一个

渲染

OK

这是

AI

开发

出来 的

一个

图表 它

就 生成

了 这样

一个 可

交互式

的 环形

图 那

本期

课程 里

将 会

学到

掌握

什么 是

SDD

开发 的

一个

概念 也

就是

规范

文档

驱动

开发

同时 呢

我们 会

去 告诉

你

Spec

Kid

开发 的

流程 和

相关 的

命令 是

什么

以及 它

的 一个

优劣势

到底 是

什么

最后

我们 会

带来

大家

使用

eCha

rts

加上

切问

3Max

Prev

iew

这个

模型 呢

同时

使用

Spec

Kid

去 完成

一个

整套 的

开发

流程 的

工具 去

开发

一个

我们

刚才 说

展示 的

AEI

图表 的

开发工具

同时 来

加深 和

巩固

Spec

Kit

的 使用

这 就是

本期 的

一个

课程

我们 来

开始

进入

Spec

Kit

的 学习

首先

我们

来看

一下

Spec

Kit

如何 去

进行

安装

大家

可以

点击

进入

Github

的 官网

首先

需要

说明 的

是 我们

来看

一下

这儿

Github

的 支持

的 AI

agent

工具 是

比较 多

的 包括

Cloud

Code

GitHub

Copi

lot

像是

cursor

千万

code

都 是

支持 的

还有

wind

serve

什么

之类 的

但 需要

说明 的

是 它

对

codex

的 命令

的 支持

比较 差

因为

codex

目前 不

支持

一个

缓鞋 杆

的 一个

资金

参数

所以 说

我们

这次

课程

当中 会

去 展示

如何 在

cursor

以及

clou

dcode

当中 去

安装 它

的 安装

方式

两种

第一种

是 使用

uvx

或者

uv 的

命令 去

进行

安装

第二种

是 直接

下载

文件 我

是 比较

推荐

第二种

方式

原因

我待会

说 到

我 带

着 大家

都 来

去 尝试

一下 把

两种

方式 都

给 使用

一下

第一种

方式 是

安装

spec

kit

这个

COI

工具

然后 你

就 可以

直接

使用

spec

ify

相关 的

一个

命令 去

初始化

对应 的

项目

我们

可以 来

去 看

一下

我们 来

.

com

的

term

inal

进入 到

你 平时

去 放

项目 的

这个

文件

里面

我们

可以 去

初始化

一个

直接 去

复制粘贴

这 行

命令

首先 来

去 安装

对应 的

一个

命令行

现在 它

就 OK

安装

成功 了

很快

接下来

就 可以

开始 去

直接 去

调用

这个

工具

需要

注意

后面 是

需要

输入

项目 的

名称

比方说

我们

叫做

spec

Kit

inst

all

test01

他 现在

没有

找到

命令 那

是因为

他 这边

没有 去

设置 对

命令行

我们 去

设置

一下

ok

现在

应该 就

有 了

接下来

他会

要求 你

选择

对应 的

一个

AI

助理

我们

可以

直接

选择

cursor

这边

他会

选择

你

对应

的

一个

命令

如果 你

是 一个

Mac

你 就

选择

sh

如果 你

是

Wind

ows

就 选择

PS 那

当然 我

是

Mac

我 选择

第一个

OK

接下来

你 就

可以

进入 到

这个

项目

当中

Spec

Kit

inst

all

test01

我们 用

cursor

打开

它用

cursor

打开

这个

项目

之后 你

会 发现

其实

Spec

Kit

它 就是

给 你

安装 了

两个

文件夹

你 如果

是

cursor

它 其实

会 有

个 点

cursor

这边 有

相应 的

一个

文档 和

自定义

的 一个

命令 的

说明

spec

ify

文件夹

下 有些

相应 的

一些

记忆

像是

限赃 的

一些

文档

相关 的

一些

脚本

包括

对应 的

命令 的

一个

模板 那

怎么 去

使用 它

我们

可以

离到

我们 的

编

cursor

的 一个

chat

模式 你

可以 看

一下 你

输入

反鞋 杠

你 现在

发现

其实 你

目前 就

多 了

多 的

一些

自定义

的 命令

比方说

spec

ify

比方说

杠

tasks

连接

之后 就

会 具有

了 这些

其实

就是

这些

文档

特别 是

点

cursor

这个

文档 给

你 带来

的 一些

自定义

的 命令

你 看

它 在

cursor

下 的

comm

ands

下

这些

其实

就是

对应

的

一个

自定义

命令 的

一个

文件

这是

我们

刚才 说

的 使用

UV 的

方式 去

进行

安装

当然 你

如果

实际上

要

一次性

使用

的话 你

也 可以

不 需要

去 安装

spec

ify

的 这个

COI

的 命令

你 可以

直接

使用

UVX

这个

命令 去

进行

安装 这

就是

官方 所

推荐 的

一个

持久 化

安装 的

方式

第二种

其实 是

我 更加

推荐

下载

文件 的

方式

我们

可以

来看

一下

下载

文件

怎么

下载

我们

可以

直接 去

点击 到

gethub

这儿 有

一个

rele

ase

你 去

点击

这边 有

相应 的

已经

打包 好

的 一些

zipped

文件

那 这

一次

我来 带

着 大家

安装

Cloud

Code

我们 来

去 选择

刚才 说

到 的

PS 是

给

Wind

ows

Powe

rShell

使用 的

这边

我们

下载 这

一个

下载

成功

之后

解压 它

去 拖

到 我们

的

cris

里面 去

打开 它

来 这个

时候 你

就 会

发现 它

其实

同样 的

它 是

多 了

一个 .

cloud

一些

相关 的

命令

spec

ify

这个

文件夹

都 是

一致 的

那 这个

时候

我们 再

打开

我们 的

cloud

那 你

这边

输入

反弦杠

之后 会

发现

这边 也

就 多

了 对应

的 一个

制定 义

命令

con

像是

cons

titu

tion

impl

emen

tplan

spec

ify

就 对应

的 这边

的

spec

kit

所 规定

的 一个

制定 义

命令

这个

方式

就是

直接

采用

一个

文档

下载 的

方式

至于

为什么

我 比较

推荐 是

大家

直接 来

下载

文档 呢

我们

刚才 用

cursor

去

硕实化

的 它

只 有点

cursor

或者 点

spec

ify

这个

文件 那

如果说

我们 要

开发

一个 新

的 项目

我们

肯定

不是

从头开始

开发 不

可能 让

AI

去

帮助

我们

去

从 零到

一 的

去 搭建

一个

脚手架

我们

可能 更

多 的

是 去

安装

一个

初始化

的 模板

比如说

我们

这儿 我

随便

打开

一个

项目 去

打开 我

的 这个

happy

ai

coding

19

pages

的 这个

项目

这个

项目 你

可以

理解 为

它 是

一个

初始化

的 一个

next

. js

. js

的 项目

这个

时候

如果说

你 有

了 一个

项目

或者

一个

对应 的

一个

模板

一个

脚手架

之后

我们

需要 做

的 告诉

大家

我们 把

这个

套者 给

打开 去

复制 这

一个 的

这 两个

文件夹

直接

粘贴 到

我们 的

这 一个

项目 的

一个

根目录

下来

这个

时候 它

就 添加

了 点

cloud

或者 点

spec

ify

这个

文件

我们 先

来 尝试

去 打开

一下

cloud

来 对应

的 命令

是不是

也 是

具有 的

当然 也

可以 把

这个

cursor

也 给

复制

进来

直接

comm

and

加 v

粘贴 它

cursor

复制

进来

之后

大家

可以 看

一下

这边 也

是 具有

spec

kit

的

一个

自定义

命令

的

所以 说

这 就是

为什么

我 比较

推荐

下载

文件 的

方式

因为

我们 只

需要 把

对应 的

文件 拖

到 我们

已有 的

一个

项目 的

一个

根目录

下 其实

就 能够

去 安装

对应 的

一个

spec

kit

这样

其实 我

是 感觉

会 简单

一点

当然

大家

如果

觉得 用

UV

命令

安装 的

方式 再

去

拖进去

也 是

比较

方便 的

说 明白

怎么

安装

之后

我们 再

介绍

一下

spec

kit

的 一个

核心 的

一个

概念

叫做

sdd

这 是

还 官方

说 定义

的 什么

叫做

SDD

第一个

它 是

一个

意义 图

驱动 的

一个

开放

我们 先

用 规范

先 定义

到底 是

做 什么

然后

之后 再

定义

怎么 做

同时

使用

一些

互拿

或者

组织 的

原则

创建

丰富 的

规范

同时

需要

注意 的

是

接下来

再 通过

多部

西化 的

方式 而

不是

根据

提示

一次性

生成

对应 的

代码

SDD

是 严重

依赖

AI 的

就 这么

说 大家

可能

概念

有点

模糊

首先

大家 去

看 完

就是

Github

这个

文档 下

的 这儿

有个

Spec

Driven

咱们

点击

一下

大家

可以

看

一下

这个

文档

这个

文档

详细 的

说明 了

什么

叫做

SDD

相关 的

一个

概念

特别 是

这边 的

一个

SDD

的 一个

工作

流程

以及

为什么

SDD

如此 的

重要

大家

读完

这个

文档

之后 我

相信 会

对

SDD

就是

规范

驱动

开发 去

有 一个

比较

深刻 的

一个

认识

但是

需要

说明 的

是 现在

SDD

还是

一个

比较

早期

的

一个

概念

它

并

不

像是

测试

驱动

开发

这样 是

一些

比较

成熟 的

概念

所以 说

未来

一两年

之内

这个

SDD

的 一个

最佳

开发 的

范式 也

可能 会

发生变化

不 一定

是

Gate

Hub

推荐 的

这个

Spec

Kit

的 一个

套件 的

一个

开发 的

方式

Spec

Kit

主要 有

五个

命令

第一个

是

Cons

titu

tion

这个

命令

我们

现在

总体 的

过 一遍

待 会

我会 去

逐个 的

讲解

它会

生成

一个

限赃 的

Cons

titu

tionMD

这个

文档

第二个

是

Spec

ify

这个

命令

它会

生成

一个

规范 的

文档

第三个

是

Plan

这个

命令

它会

生成

技术

相关

的

文档

第四个

是

Task

它会

生成

本次

这个

Spec

ify

就是

本次

规范 要

执行 的

一系列

的 文档

最后

就是

Impl

ement

去 执行

刚才 的

一个

任务 那

这 就是

Spec

Kit

的 全部

的 命令

那 具体

每个

命令

对应

什么

我们

可以

来讲

大家 讲

一下

Cons

ultism

这个

命令 是

建立

对应 的

一个

限章

明确

必须 要

遵守 的

一个

最高 的

准则

比方说

一些

代码 的

质量

准则

测试 的

标准

用户

体验 的

自信 和

性能 的

要求 都

是 使用

这个

命令

进行

生成 那

你 什么

去 使用

呢 来

你 直接

使用

cons

titu

tion

这个

命令

然后 把

你 相关

的 需要

去 增加

的 一些

就是

一些

准则 写

到 这

里面 就

可以 了

AI 就

会 总统

帮 你

生成 这

一套

命令 会

去 修改

.

spec

ify

下 的

这个

memory

下 的

cons

titu

tion

. md

. md

这个

文件

这个

文件 就

可以

类比 为

是

codex

的

agents

. md

. md

或者 是

clou

dcode

的

clouds

. md

. md

这样 的

一个

东西

或者

cursor

下 的

一个

全局 的

rules

这个

文件

非常

的

重要

同时

第二个

命令 是

spec

ify

它会

生成

规格 的

一个

说明书

这些

说明书

里面 有

用户 的

故事

功能

需求

关键 的

实体

以及

层工 的

标准

我们 来

可以 看

一下

这边 我

之前

生成 的

是 这个

文件

spec

. md

. md

来 这边

相关 的

一个

执行 的

一个

流程

用户 的

一个

故事

相关 的

一个

场景

以及

包括

一些

age

cases

也 就是

一些

极端 的

一些

边界 的

一些

情况 它

都 帮

你 考虑

到 的

最后

这个

需要

说明

这个 很

重要

这里

看见

一系列

的

chec

klist

最好 你

是 将

这

一系列

的

chec

klist

都 打勾

的 情况

下 再

去 词行

下 一步

的 一个

plan

的 命令

这边

没有

全部打

勾 说明

你 的

这个

规格

文件 有

一些

没有 给

AI 说

明白 你

需要

接着

进一步

的 说明

之后

我们 会

在 我们

的 时尚

课上

看到

这个

spec

ified

的 命令

需要

说明

一个

几个 点

第一 你

不要 去

说明

任何 的

一个

技术细节

你 就

只 需要

说明 你

的 具体

的 需求

第二个

每次 你

需要

检查

spec

. md

. md

如果说

刚才 说

到 的

chec

klist

里面

就是

AI

觉得 你

有 需要

补充 的

地方 你

需要 去

进行

一个

进一步

的 补充

第三个

它 是

会 每次

的 自动

创建

一个 新

的 分支

也就是说

你 每次

自行

spec

ify

的 时候

它会 去

自动

创建

一个

分支

认为

这是

一个 新

的 一个

fature

也 就是

一个

产品 的

需求

这个 是

非常

合理 的

这边 我

可以 给

大家

简单 看

一下

一个

spec

ify

的 一个

命令 你

看 其实

比方说

我们

这边

生成

一个

代办

事项 请

帮 我

创建

一个

代办

事项 的

运用

帮助

用户

管理 对

日常

任务

什么

之类 的

其实

我们 给

他 说

明白

我们 的

一个

需求

没有

说明

任何 的

一个

技术细节

技术细节

是 在

下 一个

命令

当中

使用

接下来

就是

plan

mean

ingp

lan

mean

ing

是 制定

技术 的

一个

实现 的

计划

回答 该

怎么 做

那 这个

时候 你

的 技术

的 一些

细节

技术 的

架构

架构 的

设计

api

以及

数据模型

什么

之类 的

这些

相关 的

技术细节

其实 是

通过

plan

mean

ing

去 进行

一个

说明 那

这边

我们

可以

简单 看

一下 我

的 这边

一个

plan

mean

ing

同样 是

以 刚才

toto

应用 为

例来

这边

相关 的

说明

我们

采用 的

框架

采用 的

tail

wind

css

采用 的

suba

base

相关 的

一些

设计 的

数据表

以及

相关 的

性能

要求

之类 的

这些 都

是 在

planet

mini

当中

先

说明

Plan

生成 完

之后

它会

生成

这样 的

一系列

的

Plan

. md

. md

的 一个

文件

非常

详细 的

去 说明

你 的

技术

相关 的

一些

参数

然后

相应 的

一些

前后 端

代码 该

如何

进行

分布

包括

数据模型

以及

Quic

kstart

的 一些

相关 的

命令 它

都 会

帮 你

写 在

对应 的

一个

文档

当中

接下来

是

Task

命令

它会 去

猜测

对应 的

一个

任务 去

猜测到

一个

Task

. md

. md

当中 你

可以 看

一下

这些

对应 的

一些

任务

目前 它

帮 我

列出 了

有 56

个 任务

那 这

56 个

任务 你

去 就

可以 让

AI 去

进行

接下来

的

进一步

执行 那

执行 是

通过

哪个

命令 是

通过

impl

ement

这个

命令 去

根据

就是

刚才 说

的 任务

清单 去

执行

对应 的

命令 那

最后

我来

总结

一下

对应 的

一个

基础知识

cons

titu

tion

这个

命令 是

立 规矩

定 原则

接下来

我们 有

几个

核心 的

命令

spec

ify

是 写

规范

讲清楚

你 要

做 什么

不 涉及

到 任何

的 一个

技术细节

pain

的 命令

是 出

技术

方案

应该 是

技术

方案设计

应该

怎么 做

plan

设计 好

之后 就

可以

执行

tasks

这个

命令 去

让 AI

帮助 你

去 拆解

对应 的

任务

形成 可

执行 的

步骤

最后

执行

impl

ement

这个

命令 让

AI 来

去 动手

去 实现

对应 的

一个

刚才 的

任务

然后

这个

时候

大家

可能 会

去 踩

到 的

一个 坑

的 点

我

是不是

能够

通过

一次 的

spec

ify

写 完

之后

AI 就

帮 我

把 整个

的 项目

给 搭建

出来 了

是 不

可能 的

不要 有

这个

妄念

这边 大

项目 你

需要 去

执行

多次 的

spec

ify

的

一个

操作

比方说

你 的

用户

管理 是

一个

spec

ify

你 的

支付 是

一个

spec

ify

你 的

报表 是

一个

spec

ify

但 你

去 按照

不同 的

一个

特性

拆解 为

多个 的

spec

ify

去 这么

执行

这个 才

是 一个

最佳

实践

不要 有

这个

妄念 我

把 我

的 一个

相关 的

一个

产品 去

写 清楚

他 能

帮 我

拆解

几百 上

千个 的

任务

工作

几个

小时

七八个

小时 就

把 我们

的 任务

给 开发

出来 了

这 是

不 可能

的 目前

的 这个

阶段 是

不 可能

的 你

还是

需要 把

功能 点

拆 分成

各个 的

一个

规范 去

进行

一个

执行

这个 是

我 需要

给 大家

讲 明白

的 最后

SDD

的 一个

优缺点

就是

它用

一套 的

框架 去

对齐 了

需求 去

减少

一些

遗漏

觉得

这个 是

非常 有

价值 的

特别 是

这些

spec

的 文档

以及

doin

the

plan

的 文档

它 其实

是 有

一套 的

框架 去

帮 我们

去 梳理

我们 的

一个

设计 的

过程

以及

检查

我们

可能

需要

遗漏 的

一些 点

比方说

这些

边界 的

情况

像是

比方说

这个

age

cases

就是

一些

边界

情况

我们

可能 会

很少

考虑 到

但是

AI

会帮

我们

考虑 到

并且 让

我们 去

澄清

这些

边界 的

情况

但是 它

的 缺点

其实 是

对于 你

去 写

这个

spec

要求 是

非常 高

的 而且

整套

流程

因为 它

要 去

完成

这么

一系列

的 流程

其实 它

的 开发

是 对

我 而言

是 非常

慢 的

所以 说

其实 我

这边 在

贝克 的

阶段

尝试

使用

spec

kit

去 贝克

了 多个

的 项目

它 的

一个

使用

体验 对

我 来说

其实 并

不算

太好

核心

是因为

它 真的

非常 的

慢 这套

流程

非常 的

复杂

但是 它

的 核心

的 价值

对于

新手

学员

来说

对于 你

去 理清

的 需求

去 减少

对应 的

一个

遗漏

并且 去

生成 了

对应 的

一个

任务 的

逻辑 去

告诉 你

开发

项目

一个

最佳 的

任务

流程 是

如何 的

我 觉得

这个

还是

非常 有

价值 的

大家

可以 去

尝试

感受一下

那 这边

说 了

这么 多

的 一些

基础

概念

之后

大家

可能

对于

Spec

ate

还是 有

一些

陌生 那

这边

就要

进入 到

实际 的

一个

开发阶段

带 着

大家

深入 的

使用

Spec

ate

的 这

一个

工具 那

我们

正式

进入

一个

实际 的

开发阶段

我们

还是

使用

next

. js

. js

的 框架

做 网页

的 因为

我们

客人 做

网页 都

是 使用

的 这个

框架

直接

复制 这

一行 的

命令

然后 去

打开

终端

进入 到

我们

平时 放

项目 的

一个

文件

当中 去

粘贴 这

行 命令

点击

回车

首先

输入

项目 的

名称

我们

叫做

AI

charts

demo

spec

kit

吧 其他

的 你

都 一路

回车

就行

选择

默认 的

就 可以

然后

这边

好像

npm

安装

失败 了

没关系

我们

可以

自己

进入

安装

我们

点击

打开

curs

orAI

charts

spec

kit

然后

打开

我们 的

终端 去

用

pnpm

安装 它

我们 的

课程

里面 去

之前 有

介绍

pnpm

它 安装

会快 和

稳定

很多

安装

成功

之后

我们 去

把 项目

给 跑

起来

pnpm

run

def

正常

的话

项目 会

跑 在

Local

Horse

3000

端口

我们

打开

我们 的

浏览器

那 这个

时候

项目 就

已经 跑

起来 了

还有

一步

准备

工作

因为

我们 的

这个

图表

本身 是

通过

AI

生成 的

所以 说

我们

需要 找

一个 大

模型 的

提供商

我们

这边

还是

使用

阿里 云

的 百炼

然后

进入 到

一个

密钥

管理

然后

创建

一个

密钥

我们

就要 做

Kate

确定

然后 去

复制

这个

密钥

然后

同时

创建

一个 .

env

的

环境变量

叫做 -

scope

api

key

应该 是

叫 这个

名字 吧

我们

可以 看

一下

文档 哦

今天 又

发 模型

了

image

edit

我们

本次

用到 的

是 这个

max

prev

iew

同一

新闻 商

的 这个

模型 是

一个

最新 的

模型

我们

可以 看

一下

API

的 参考

一般来说

它 的

环境变量

叫做

这个 -

scope

api

key

中间 是

有 个

下滑 线

这边

我们

基础 的

一个

准备

工作 再

来 一下

初始化

仓库

Init

养成

一个 好

的 习惯

就是

项目

初始 好

之后

最好 去

getI

nit

一下

然后

提交

我们

接下来

就 完成

了 一个

我们 的

准备

工作

项目

初始化

的 一个

准备

工作

第一步

我们 去

初始化

一个

next

. js

. js

的 项目

第二步

我们 去

给 它

增加 了

一个

AI 的

环境

面量

之后

其实

AI 会

去 使用

到

第三个

我们 去

进行 了

一个

get

的 一个

初始化

操作 那

接下来

我们 去

给 这个

项目

引入

spec

kit

怎么 去

引入 呢

我们

刚才 有

进入 到

Squi

reKit

的

Github

的 一个

官网

然后

点击

rele

ase

直接 去

下载

我们

这次

使用

Clou

dcode

进行

演示 我

发现

Clou

dcode

其实 它

的 时间

效果

也好

一点

比起

Kersi

来说

我们

这边

下载 的

是 这个

sh 去

解压

它点 开

之后 把

这 两个

文件

复制粘贴

到 我们

的 项目

下 点击

粘贴

这个

时候

文件 就

多 出来

了 .

cloud

以及

spec

ify

这 两个

文件夹

以及

相关 的

一些

自定义

命令 和

相应 的

一些

文档 那

其实

我们 的

spec

kit

就 引入

成功 了

那 引入

成功

之后

我们

使用 的

clou

dcode

我们 就

去 输入

cloud

-

dang

erou

skit

perm

ission

去 运行

起来

clou

dcod

eok

运行

成功

之后 那

我们

记得

暂时 再

保存

一下

就是

init

back

kit

就 养成

一个 好

的 习惯

就 一步

一步 的

最好

进行

一个

保存

第一步

我们

刚才 说

的 要

做 什么

要 将

你 的

就是

第一步

我们 要

实现

一个

现章

文件 的

一个

数值 化

也 就是

dir

spec

ify

memory

下 的

cons

titu

tion

. md

. md

这个

文件 我

把 这个

关 一下

这个

文件

我们

项目 的

一些

基础 的

准则 你

可以

理解 为

是 类似

于

clou

dcode

的

cloud

. md

. md

或者 是

codex

的 一个

agents

. md

. md

这样 的

文件 那

接下来

我们 去

复制

我们

对应 的

一个

提示 词

就是

这个

提示 词

简单

介绍

一下

这个

题词

我们 给

它 说

明白 了

使用

cons

titu

tion

这个

命令

生成

对应 的

文件

这边

其实

就是

一些

限章 的

一些

规范 后

端 全部

使用

next

. js

. js

的

api

root

前端

调用 后

端的

接口

前端

主件

全部

使用

tel1

的 cs

加上 下

的 cn

的 主件

图标

主件

全部

使用 e

charts

这些

限章

文件 你

可以 写

的 更加

详细

一点

根据

自己 的

需求 我

这边

其实 写

的 是

一个

比较简单

的 你

可以

写个

几百 上

千行 的

文件 都

是 没有

问题 的

就是 月

项区

也好 你

可以

自己 去

总结 出

这样 的

一份

就是

通用 的

一些

项目

规则 的

文件

我们 来

复制 它

然后

直接

粘贴 到

这 点击

回车

我们 来

等待

AI 的

一个

生成 看

一下

clou

dcode

帮 我们

生成 了

cons

titu

tion

. md

. md

这 文件

改动 了

很多

东西

我们

可以

来看

一下

增加 的

一个

原则

AI

charts

spec

kit

cons

titu

tion

核心 的

原则

API

first

的 一个

架构

我们

刚才 说

到 的

使用

tail

wind

CSS

加 下载

CM

使用 e

charts

类型

安全

测试

驱动

核心 的

一些

代码

组织

以及

API

的 设计

的

guide

line

看

其实

他

写

的

帮

我们

补充

的

非常

清楚

当然

如果说

你 觉得

不太

合适 的

地方 你

也 可以

进行

调整

大家 也

注意 到

了 现在

这个

Kit

它 只能

生成

一个

英文 的

文档

所以 说

对于

大家 的

一个

英文 的

水平

还是 有

一定 的

要求 的

那 我们

这边

出示

完成

cons

titu

tion

一个

限赃 的

概念

之后

我们

进行

保存

一下

init

出示

化限赃

那 刚才

我们

完成 了

cons

titu

tion

生成

限赃 的

这样 的

文件

之后

我们

接下来

要 做

的

是不是

使用

spec

ified

的 命名

生成

对应 的

一个

规范

文档 还

记得

刚才

规范

文档 的

一个

要求 是

什么 吗

这份

spect

的 文档

是 不

应该

提供

任何

技术细节

的 只是

描 清楚

你 的

需求

现在

来看

一下

我们

这个

提示 词

首先

第一个

是 使用

spec

ify

的 一个

字页

指令

我要

创建

一个

叫做

AI

charts

的 官网

该 官网

首页 有

一个

居中 的

输入框

用户

可以

输入

任意 的

和 数据

相关

提示 词

我 这边

给 他

一个

示例

然后

发送给

AI

之后

我们 的

布局 就

会

发生变化

输入框

在 最

底部

上方

变成

一个

显示

图表 的

区域

LLM

能够

自动 的

提取 这

段 提示

司中 的

一个

数据 和

文本

选择

一个

最佳

图标 进

渲染

如果

用户

指定 了

某个

图表 的

类型

那么 就

使用

用户

指定 了

该 图表

类型 进

渲染

这边 我

就 输入

了 一个

简单 的

一个

用户

需求

当然 我

这边 的

一个

spec

的 一个

需求 是

比较简单

的 你

如果说

能够 去

细化

完成 是

把 你

的 需求

文档 这

一部分

功能 的

一个

需求

文档

完成 给

到 它

也 是

没有

任何

问题 的

那 这边

我们 来

这样 我

去 复制

这 一段

的 内容

然后

使用

我们 的

自定

命令

spec

ify

你 点击

tab

之后 它

就 会

帮 你

去 进行

一个

填充

粘贴

我们

刚才 的

这 一段

的 提示

词 点击

回车

等待

AI 帮

我们

生成

对应 的

一个

规范 的

文件

这边

AI

执行 好

之后

我们

打开

spec

. md

. md

就 帮

我们

生成

这个

文件

可以 来

简单 看

一下 在

看 这个

文件

之前

我们 来

注意

一个

小点

就是

这边 你

发现

没有

就是 它

的 分支

现在

变成 了

一个

001

下 的

AI

charts

下 的

120

的 分支

也就是说

它 自动

帮 我们

创建 了

一个

分支 这

是 我

刚才 说

的 你

每 执行

一个

这个 -

spec

ify

这个

命令 的

时候 它

都 会

帮助

我们 去

创建

一个

分支 也

就是 你

本次 的

一个

需求

分支 那

你 本次

的 分支

开发

之后 就

可以

合到 你

的 一个

man

分支

它会

默认 你

的 每

一个 的

spec

ify

就是

对应 的

一个

功能

作为

一个

功能

分支

这个 在

我们

程序 的

开发 的

程序 团

的 开发

当中 是

非常

合理 的

有时候

在 一个

项目

初始化

的 时候

可能 就

永远都是

在

man

分子

当中

进行

一个

开发

这个 在

项目

上线

之前 是

合理 的

但是

如果 你

之后 有

进行

产品

迭代

的话

上线

之后 你

一定 要

从

man

分子

里面 拉

出 一个

新 的

分支 来

但 之前

我们 在

开发

商业化

项目 的

那 一期

里面 也

有 讲

到 过

这 一点

大家

需要

注意 的

点 我们

可以 看

一下

spec

. md

. md

当中

有些

什么

东西

第一个

呢 是

执行 的

一个

工作

流对 吧

然后

第二个

呢 是

一个

guide

line

然后

核心

其实 是

主要 是

给 AI

看 的

然后 再

看 一下

这部分

就是

对应 的

一个

用户

故事 那

这边

核心 的

用户

故事 是

当 用户

访问

我们 的

AIch

arts

网络 的

时候 我

想要

就是 我

能够

输入

一个

自然语言

的 描述

给 我

的 数据

然后 呢

AI

能够 给

到 我

一个

可视化

的 一个

需求 对

吧 然后

相关 的

一些

场景

包括 他

一些

极端 的

情况 帮

你 考虑

到 了

就是

如果说

用户

没有

就是 他

给 的

文案

里面

没有

相关 的

一个

可以

抽取 的

数据

这个

时候 该

怎么办

如果说

用户 给

了 一个

指定 的

数据

但是 他

又 指定

了 一个

非常

不合理

的 图表

这个

时候

应该

怎么办

你 看

其实

AI

会帮

我们

考虑

很多 的

极端

情况

除了

这些

age

cases

之外

相关 的

一些

其他 的

一些

需求

然后

核心 的

一些

开发 的

一些

实体

这个

实体

什么

意思

比方说

数据 的

一个

提示

词对 吧

图表 的

一个

配置

我们

可视化

的 一个

配置

然后

用户 的

一个

sess

ion

大家

需要

注意 到

这个

文档

里面 的

needs

clar

ific

ation

这些

关键字

就是

这些

关键字

而是

说明

AI

觉得 你

需要

更加 的

进一步

的 澄清

的 我们

可以 看

一下

这个

就是 你

打勾 的

地方

就是

大部分

我们 都

是 打勾

了 的

但是 有

一些

需要

澄清 的

地方

就是 他

现在 是

保留 着

的 那

这 一步

没有

没有

打勾 那

接下来

我们 去

澄清 他

比方说

最大 的

一个

数量 是

吧 我们

来看

一下

比方说

第一个

点 这个

我们

相关 的

user

sess

ion

就是 他

说

第一个

点 是

是否

需要

针对

用户 去

保留

对应 的

一个

图表 的

历史

然后

我们 说

不 需要

保留

图表 的

历史

这是

一个

一次

应用

第二个

点 呢

说

第二点

需要

澄清 的

是 对于

单个 的

提示 词

有没有

什么

最大 的

一个

数量 的

点 限制

没有

最大 的

最 多

1000

条 数据

吧 他

说 系统

提示 词

他 说

系统

是否

应该

提供

一个

数据 的

格式化

提供数据

格式化

然后

用户

是否

可以 去

下载

或者

导出

生存

图表

可以

可以

下载

图表

我 记得

还有

一个

非常

关键 的

点 就是

刚才 在

age

cases

里面 他

说

如果说

用户

输入 的

文本

里面

没有

可以

抽取 的

数据

应该

怎么办

呢 如果

用户

输入 的

文本

里面

没有 可

抽取 的

数据

这个

时候

应该 用

alert

提示

用户 你

应该

输入 带

数据 的

内容

然后

这下

大家

可以 去

一一 的

去 进行

一个

澄清

我先

澄清 这

几 部分

然后

点击

回车

然后

AI

待会会

自动

帮助

我们

修改

我们

可以 先

把

这部分

给 提到

赞成 区

那 大家

应该 就

能 看

得 清楚

一点

AI 说

帮 我们

去

spec

ific

ation

upda

ted

去 更新

好 了

一个

规格 的

文件

可以

来看

一下

然后

现在

确实

全部 都

已经

打勾 了

然后

这边

错误 的

一个

刚才 说

到 的

一个

错误 的

数据

如果说

没有 去

可以

收取 的

数据

然后 去

提示

用户 请

输入

包含

数据 的

一些

内容 让

我们 用

get

打开

可能

看得

更

清楚

一点

然后

这边

其他

的

一些

就是

然后

这边 的

一些

功能

要求

这边 也

给 给

到 了

然后 这

就是 我

刚才 说

的 我们

尽量 要

把 这些

打勾 的

项 都

给 完成

就是 有

需要 去

澄清 的

地方 就

都 给

澄清 了

之后

我们 才

开始

进入 到

下 一步

这边

我们

spec

ify

其实 就

已经

完成

差不多

了 我们

来 去

进行

保存

一下

spec

ify

然后

点击

提交

那 刚才

也 说

到

如果说

spec

ify

完成 了

之后

规范

文档

完成 了

之后

我们

接下来

就要

生成

一个

技术

相关 的

一个

文档 了

这 两个

一定

要说

明白 这

两个 我

再 提醒

一下

就是 你

输入

技术

相关 的

一些

需求

一定 是

在

plan

就是

这个

mini

能 输入

自定 的

mini

能 输入

spec

ify

只是

生成 你

的 用户

需求 的

一些

相关 的

文档

这两点

差别

一定 要

注意 那

我们 来

去 粘贴

我们

plan

的 一个

文档

然后

我们

来看

一部分

这部分

plan

的 一个

提示 词

第一个

前段

主件 呢

尽可能

使用

pail

wind

的

css

加上

下载

cdn

的

主件

实现

第二

部分

图表

客户

使用

12 次

我们

需要

根据

lm

需要

lm 的

根据

用户

发送

提示 词

生成

含有

一个

12 次

的 一个

配置 的

接受

数据

三个

我们 给

到 了

一个

就是

lm 的

一个

调用 的

示例

示例 的

代码 是

怎么

拿到 的

呢 其实

也 很

简单

我们

其实

就是

文档

当中 的

这 一个

的 一个

代码

我们

切换 到

文本

输入

切换 到

lgs

然后

直接 给

到 这样

的 一个

文档 的

代码 给

到 它

就 行

注意

我们 的

模型

部分

这边 他

给 到

的 是

一个千

问

plus

的 模型

但 我们

呢 需要

换成

我们 这

一次 的

千问 三

的

max

prev

iew

这个

模型

因为

这个

模型 呢

他 的

一个

上下文

是 超大

的 一个

上下文

就 特别

适合

我们

这个

数据 的

需求 对

吧 因为

我们

就是

数据量

可能 会

很大

然后

第四个

点 呢

也 是

返回 的

格式 呢

我们

需要 他

是 一个

json

的 一个

格式

为什么

要 返回

一个

json

的 格式

呢 因为

我们 的

一个

echa

rts

给 大家

看 一下

echa

rts

刚才 还

应该 还

没 介绍

了

echa

rts

呢

是

一个

开源

的

一个

图表

库 然后

它 的

一些

配置 下

就 怎么

去 生成

这样 的

一个

图表 我

可以

点开 看

一个

实例 那

大家

可以 看

一下

这个 e

charts

的 怎么

去 渲染

出来

其实 它

就是

一个

对象

或者 也

可以 说

它 是

一个

json

那 我们

来 让

ai

核心 是

把 我们

生成

这样 的

一个

json

就 可以

去 渲染

出 这个

e

charts

的 一个

图表

然后

这部分

呢 可能

看 了

有点

专业

其实 很

简单

我们 来

搜 一下

文档

里面 的

json

open

ai 的

这样 的

一个

sdk

呢 它

是 能够

支持 去

传入

这样 的

一个

resp

onse

format

什么

意思 呢

你 可以

去 规定

他 的

一个

返回 的

直视

文本

内型

或者 是

一个

json

object

的 形式

那 当然

如果说

你 去

给 他

限制 了

是

json

object

你 最好

你 看

他 说

你 需要

在 系统

提示 词

或者

user

manage

当中 去

引导 用

模型

输出

一个

json

的 格式

例如 说

请 按照

json

格式

输出 那

这样的话

AI

基本上

就 能够

百分之百

的 输出

一个

json

的 格式

这个 是

需要

注意 的

点 那

其实 这

段 提示

词 我

也 是

只是

粘贴 的

文档

里面 的

内容

然后

第五 点

就是

刚才 说

的 他

需要

认真 的

编写 给

LLM

的 一个

系统

提示

词以

确保

AI

返回 的

直接

就是

eCha

rts

的 配置

接程

数据 那

前端 呢

就 能够

直接

通过 该

对象

实现

一个

渲染 的

功能 那

这个

就是

我们

plan

的 一个

提示 词

的 功能

我们 来

直接

复制 它

直接

复制

然后

回撤 来

等待

AI

帮助

我们

进行

一个

开发 那

需要

注意 的

是 你

所有

技术

相关 的

提示 词

啊 都

是 在

plan

这个

指令

当中

去

进行

一个

说明

等待

AI

完成

OK

这边

Plan

mini

执行 完

了 我们

可以 看

一下 他

帮 我们

生成 了

什么

东西 最

核心 的

文件 呢

是 这个

Plan

. md

. md

然后

这边 也

是 详细

的 去

说明 了

你 的

执行 的

一个

工作

理由

然后 你

的 一个

Summ

ary

一个

总结

技术 的

一些

细节 对

吧 包括

我们

核心 所

使用 到

的 一些

E -

Line

Nexe

rJS

Reac

tTel

wind

CSSCN

Echa

rtsO

penAI

SDK

看 刚才

我们

说明 的

他 其实

都 听

进去 的

非常 的

详细

下面 的

一个

结构

包括

文档 的

一个

结构

然后

代码 的

前后

端的

一个

结构

然后

这些 都

是 非常

的 详细

的 大家

可以 去

仔细 的

去 看

一下

然后 呢

其他 的

除了

plan

. md

. md

这个

文件

之外

还有

其他 的

一些

文件

包括 他

帮 我们

生成 了

cloud

. md

. md

很 智能

会 自动

的 去

帮助

我们

生成

cloud

. md

. md

这个

文件

包括

这样 的

一个

数据

设计 的

一个

文件

然后

这个 呢

其实

就是

eCha

rts

的 这样

的 一个

配置

一个

json

很 好

quic

kstart

如何

去

初始化

这个

项目

包括

这样 的

一个

技术细节

的

rese

arch

. md

. md

的 一个

文件

这个 呢

其实

就是

plan

这个

指令

自定义

指令

生成 的

它 呢

是 所有

的 指令

里面

生成 的

文档

里面

最多 的

因为

涉及 到

一些

技术 的

细节

我们

可以 来

去 暂时

保存

一下

完成 那

接下来

呢

plan

完成

之后

我们

就要 去

使用

tasks

这个

命令 呢

来 去

帮助 它

来 去

生成

我们

本次 要

执行 的

一系列

的 任务

然后

这个

任务 呢

他 会

放在

一个

task

. md

. md

的 文件

里面 让

我们

回到

我们 的

clou

dcode

去 输入

放写 -

tasks

这个

命令

然后

点击

回车

等待

clou

dcode

去 帮

我们 去

生成

一系列

可以

执行 的

一个

任务 下

task

命令

已经

完成 了

然后 帮

我们

生成 了

有 50

多条

就是

任务 可

执行 的

任务

我们

可以

简单

来看

一下 是

分为

五个

阶段

最后 还

记得

干嘛 吗

我们 要

去 执行

我们

刚才 的

一个

任务 去

执行

impl

ement

这个

命令

这个

命令

需要

做明 的

是 如果

是 一个

大 的

需求 你

可以 去

指定 你

想要

执行 哪

一部分

的 内容

比如 它

执行

T001

到

T020

这个

命令 那

它 其实

就 会

把 前

20 个

命令 给

执行

完成

然后 再

接下来

去 执行

其他

任务

当然

如果说

你 的

命令

比较 少

的话 你

也 可以

去 就是

让 它

一次性

的 执行

大家

需要

注意 的

是

有时候

它

一次性

执行 的

时候 它

也 会

只 帮

你 执行

到 某

一个

部分

比方说

执行 到

第 30

多条 的

时候 它

就 停

了 那

你 要

接着

告诉 他

就是 让

他 接着

自行

相应 的

命令 那

这次 呢

我们 来

尝试

执行

这边 呢

其实 和

项目

相关 的

不 考虑

优化 这

一个点

的话

其实

我们

执行 到

T042

就 可以

了 然后

我们 让

他 执行

T001

到

T042

点击

回车

然后 这

一步 的

等待时间

可能 会

很长

估计

要个

20

多分钟

都 是

有 可能

的

就是说

大家

耐心 的

等待

一下 好

了 这

一部

AI

生成 完

了 大概

等 了

有 40

分钟 吧

看到 他

帮 我们

生成 了

很多 的

一份

文件

大概 有

二三十个

文件 吧

然后

刚才

我们

指定 的

生成 到

四四二

部 然后

他 也

是 按照

我们 的

要求

完成 的

那 我们

来 可以

来 司机

的 测试

一下

然后 就

好 去

重启

一下 你

相关 的

一个

服务

一般

这种 有

很多

修改 的

时候 你

默认

运行 的

服务

一般 都

会 被

断掉

我们 来

去

loca

lhost

3000

现在

已经 刷

完 成功

了 有点

丑 但

没关系

我们

来测

一下

功能

我们

这边 用

一个

这个 吧

然后

生成

图表

然后 它

的

API

确实 是

调用 的

然后 这

是 他

写 的

一个

提示 词

成功 了

然后

这个

图表 也

是 可以

交互 的

还有

下载

图表

功能

我们

可以 看

一下 能

下载

成功

还是 挺

完美 的

这个

功能 比

我 想

的 要

顺利

就是

这个

图表

有点

整体 的

UI

有点 丑

我们 来

测试

一个

没有

数据 的

你好 还

记得 吗

如果

没有

数据 他

应该

提示

一个 有

bug

有

bug

它 这边

没有

数据

返回 的

是 一个

错误 的

数据 这

肯定

提示

词是 有

bug

的 我们

可以

来看

一下

提示 词

我们 先

这部分

的 暂存

一下 吧

图表

AI

生成

开发

完成

我们

可以

来看

一下 它

所 给

的 一个

prom

ptroot

应该 是

这个

命令

请求

然后

这里 有

一个

生成

图表

gene

rate

chart

我们 看

一下

提示 词

怎么 写

的 然后

gene

rate

chart

with

llm

这里 有

一个

系统

提示 词

系统

提示 词

在 哪

呢 这

有 个

系统

提示 词

它 写

了 这么

一个

系统

提示 词

哦 来

它 如果

输入 的

描述

无法

解析

或者

提起

数据

生成

一个

简单 的

实力

图表 并

在 标题

中 说明

这是

实力

数据 这

肯定 是

不 对

的 对

吧

如果说

它 的

输入

当中

没有

办法

提取

数据 那

这个

时候

应该

直接

报错 那

这个

提示 词

看起来

还 挺

好 的

说实话

就是

还是

有些 小

问题 有

几 粗

bug

和 需要

优化 的

点

第一个

呢 就是

在 这个

文件

里面

prompt

如果

没有

办法

提取

数据

这个

时候

应该

lm

返回

报错

告诉

用户

必须

提取

数据

必须

输入

数据

然后

第二个

呢 我

希望

他来

优化

一下

这个

UI

就是

第一 有

图表 的

时候

这个

输入框

是 在

最 底部

然后

第二个

点 我们

刷新

一下

首页

标题 和

副标题

在 居中

靠近

输入框

上方

然后

第四个

点 呢

我 觉得

这个

输入框

有点 小

输入框

采用

text

error

也 就是

多行

文本

输入框

默认

三行

我们 来

进行

一个

优化

就是

虽然 说

我们

规划 的

很 好

设计 的

很 好

但是

AI 也

没有

办法

做到

一步到位

那有

bug

还是 要

去 相应

的 进行

一个

修改 的

我们 来

让 AI

进行

一个

修改

这边

Code

Code

帮 我们

把 刚才

的 计划

好 了

我们 来

去 实际

的 测试

一下

首先

我们 来

去 测试

没有

数据 的

那个

场景

直接 给

他 说

一个 下

说 一句

话 他

这边 有

报错 他

说 请

输入

包含

数据

场景

然后

这个

错误 的

弹框

好丑 那

之后

这边

大家 再

去 优化

吧 然后

我们 再

来 刷新

一 下来

输入

一个 有

数据 的

场景

我们 来

这个 吧

多维 则

线图

对比

趋势

深层

图表

这边

却是

生成 了

一个双

则 线图

下载

下载

功能 也

是 没有

任何

问题 的

那 这边

其实

我们 就

采用

spec

kit

去 完成

了 这样

的 一个

AI

理解

自然语言

然后

生成

这样 的

一个 可

交互式

图表

并且

能够

下载 的

这样 的

一个 小

的 产品

那 如果

你 之后

想 去

迭代

的话

比方说

你 去

生成

用户 的

动作

注册

并且

保存

用户 的

提示 词

和 图表

保存 到

自己 的

数据库

当中 你

可以

尝试 去

增加

一个 更

多 的

一个

spec

ify

的 迭代

这边

提醒

一下 你

每次

升成 新

的

spec

ify

的 时候

你 都

会 发现

它会 去

给 你

生成

一个 新

的 分支

不同 的

一个

spec

ify

的话 它

也 会

放在

不同 的

分支 所

对应 的

一个

文件夹

下 大家

可以 在

此句

上去

迭代

功能 这

就是

本期

Github

Spec

Kit

的 一个

完整 的

一个

课程

我们 去

介绍 了

spec

Kit

的 一个

使用

以及

相关 的

命令

并且 去

开发 了

一个

简单 的

AI

生成

图表

的

一个

项目

去

接入

了 终于

千万

maxp

review

这个

模型

能够

通过

自然语言

的 方式

去 生成

对应

那个

推表

大家

如果说

看 我

的 课程

的话

因为 我

把 很多

的 一些

生成

环节

生成 的

时间 给

剪掉 了

你 实际

的 使用

spec

kit

去 开发

一遍

的话 你

会 发现

真的

整个

流程 是

非常 慢

的 你

说 如果

让 我

去 开发

这样 的

一个 小

项目 那

我 自己

写 一个

提示 词

应该

半个

小时

左右 就

能够

开发

出来

但是

如果 是

使用

spec

kit

的话

大概

需要

耗

就是

三到

四倍

的

一个

时间 这

接近 要

两个

小时 的

时间

所以 说

我 个人

使用

体验

下来

的话

其实 它

对于 我

的 一个

帮助

目前 是

不 大

的 我

目前

比较

推荐 的

一个

开发

实践

开发

流程

的话

还是

基于

这套

课程

就是

边写

需求

文档

边写

云图

技术

准备

然后 去

一个

一个 的

开发 那

如果说

你 去

学完

这个

课程 再

去 学

spec

ate

这本

课程

的话 你

会 发现

其实 有

一些

他们 的

流程 是

相通 的

比方说

需求

文档

就是 我

在 写

需求

文档 的

时候

明确

表示 了

就是

需求

文档

应该 有

细节 这

其实

对应 的

是

spec

hit

的

spec

ify

命令

第二点

是 技术

准备 的

工作

类似 于

plan

命令

接下来

其实

开发

项目

相应 的

一些

任务

需求 和

开发 的

一个

阶段

对应 的

是

tasks

加上

impl

ements

这

两个

命令

我 目前

还是

比较

使用

推进

这套 的

开发

流程

大家

可以

多多

尝试

一下

使用

spec

kit

这套

开发

流程

如果说

你 觉得

比较

适合 你

的话 你

可以 有

一套

完整 的

框架 去

编写

相应 的

一些

文档

然后 去

给 到

对应 的

一个

技术

方案 在

同时 让

AI 去

帮 你

采取

任务

的话

有些

同学

可能 会

觉得 是

比较

合适 的

这 可能

需要 你

去 实际

的 开发

几个

项目 才

能够

有所

体会

OK 那

这

就是

本期

的

一个

完整

的

一个

课程