Spec Kit: Github's NEW tool That FINALLY Fixes AI Coding — Transcript

Full transcript

1. 0:00Think about the last time you asked an
2. 0:02AI tool to write code. It probably gave
3. 0:05you something that looked correct but
4. 0:07didn't quite work. That's where vibe
5. 0:09coding falls short. But it might not be
6. 0:12a problem with the particular model
7. 0:13you're using. It's most likely because
8. 0:16of lack of specification clarity. That
9. 0:18is where specdriven development comes to
10. 0:21rescue. GitHub just released a new
11. 0:23open-source toolkit called SpecKit,
12. 0:26which completely changes the game. Today
13. 0:28we're going to look at SpecKit, see how
14. 0:30it works, and I will show you a little
15. 0:32demo how to use it, and we'll find out
16. 0:35if this is really the future of coding.
17. 0:40In traditional development, you write
18. 0:41code, then document what it does. In
19. 0:44specdriven development, you do the
20. 0:47opposite. You write a specification, a
21. 0:49living executable artifact, and that
22. 0:52spec defines what you intend to build.
23. 0:54From there, all stakeholders and AI
24. 0:57tools align around the same source of
25. 0:59truth. This approach closes the gaps
26. 1:01between intent and implementation and
27. 1:04leads to cleaner, safer, and more
28. 1:06reliable code. The main idea is that
29. 1:09language models are great at patterns,
30. 1:11but not so great at reading your mind.
31. 1:14Broad prompts like, "Add photo sharing
32. 1:16to my app," leaves the AI guessing
33. 1:19thousands of details, most of which
34. 1:21never match your real intent. Specdriven
35. 1:24development eliminates that guesswork.
36. 1:26It gives AI clear structured guidance so
37. 1:29it builds exactly what you want. Few
38. 1:31months ago, Amazon launched Kira, which
39. 1:34was the first framework to really focus
40. 1:36on specdriven development. And James did
41. 1:38an excellent deep dive on that in a
42. 1:40separate video if you want to check it
43. 1:41out here. But now there's a new player
44. 1:43in town, SpecKit. It is GitHub's
45. 1:46open-source toolkit for specd driven
46. 1:48development with AI coding agents. It
47. 1:51features a CLI tool, templates, and
48. 1:55steering prompts designed to work with
49. 1:57tools like GitHub Code Pilot, Claude
50. 1:59Code, and Gemini CLI. It aims to
51. 2:02transform your ad hoc prompting into a
52. 2:05structured, verifiable development
53. 2:06workflow. Here's how it works. Specit
54. 2:09organizes your development into four
55. 2:11gated phases, each with a validation
56. 2:14checkpoint before moving forward. The
57. 2:16first phase is specify. This is where
58. 2:18you describe what you want to build and
59. 2:20why focusing on user journeys and
60. 2:23outcomes. The AI agent uses that to
61. 2:26generate a detailed spec which also
62. 2:28evolves as your understanding grows. The
63. 2:31second phase is plan. This phase defines
64. 2:33the stack and architectural constraints.
65. 2:36You tell the agent your specifications
66. 2:38and it constructs a technical plan that
67. 2:40honors those constraints. Third phase is
68. 2:43tasks. This is where the spec and plan
69. 2:46is broken down into small actionable
70. 2:48tasks. This gives you manageable
71. 2:50testable units that AI can implement one
72. 2:52by one. And the fourth phase is
73. 2:54implement. This is where AI tackles
74. 2:57tasks incrementally. You can review each
75. 3:00change before implementation instead of
76. 3:02running bulky code dumps. That way the
77. 3:04model knows what to build, how to build
78. 3:07it, and where to focus. You can verify
79. 3:09and refine this at each step. It gives
80. 3:12you total granular control over
81. 3:14execution. This toolkit was born out of
82. 3:16frustration with the coding models
83. 3:18behaving like a search engine instead of
84. 3:20a literal-minded pair programmer. At its
85. 3:23core, it's a shift towards intent as the
86. 3:26source of truth. Instead of code, the
87. 3:29spec becomes the authorative artifact
88. 3:31and the models constantly circle back to
89. 3:34the spec document for guidance on how to
90. 3:36proceed. So now I'm going to show you
91. 3:38with a little project how we can use
92. 3:40specit in our own projects. To kick
93. 3:42things off, you just need to run this
94. 3:44command in your terminal specifying your
95. 3:46project name and then choose which
96. 3:49agentic framework to use. In this demo,
97. 3:51I will be using GitHub copilot. The kit
98. 3:54will initialize all the necessary files
99. 3:56for your project and then you can
100. 3:57proceed to open the workspace in your
101. 4:00code editor. The first thing you will
102. 4:01see when you open the code editor is
103. 4:03that specit has created this script
104. 4:05folder and templates folder. And these
105. 4:08are just boilerplate spec templates
106. 4:10which are used to generate your actual
107. 4:12spec files. And the scripts are the ones
108. 4:14that execute and prepare those
109. 4:16documents. We don't have to change
110. 4:17anything here. We can just go ahead and
111. 4:19prepare our project by typing specify
112. 4:22followed by our prompt. This initial
113. 4:24prompt should be an overall description
114. 4:26of your project. what the goal is, what
115. 4:28the basic features are, and maybe even
116. 4:30describe what a simple user journey
117. 4:32looks like. In this example, I will be
118. 4:34creating a simple Pokedex team builder
119. 4:37where I can search for Pokemon and add
120. 4:39them to my team. I will also be using
121. 4:41Gro Code Fast one as the base model for
122. 4:44this project. So, let's go ahead and run
123. 4:46the command. And once that's done, you
124. 4:48will see that specit has created a new
125. 4:51branch for this development and it has
126. 4:53also created a spec markdown file. In
127. 4:56this file, we see that the model has
128. 4:58successfully understood the assignment
129. 5:00and created a primary user story along
130. 5:03with acceptance scenarios. I also like
131. 5:06that it thinks about edge cases as well
132. 5:08and other potential roadblocks. And
133. 5:10whenever the model comes to a situation
134. 5:12where it can't decide on a path forward,
135. 5:15it will add this block titled needs
136. 5:17clarification. So you can specify the
137. 5:20requirements yourself. And we can also
138. 5:22see here that it has crafted some
139. 5:23functional requirements and key entities
140. 5:26as well. Honestly, this is super cool
141. 5:28because I would be too lazy to write out
142. 5:30all these specifics for the model to
143. 5:32follow. So, it's good that spec kit is
144. 5:35able to guide the model to craft all of
145. 5:37this for us. And remember, if you ever
146. 5:40need to change something here or decide
147. 5:42on a totally different direction to
148. 5:44take, this is the file where you can
149. 5:46make those edits. But if we're happy
150. 5:48with the spec file, next we can proceed
151. 5:50to the plan phase. And here we should
152. 5:52more concretely describe the tech stack
153. 5:54of our application along with other
154. 5:56details that we deem necessary. Here I
155. 5:59just pasted in some basic technical
156. 6:01requirements for the project along with
157. 6:03some other helpful commands like using a
158. 6:06debounce on the Pokemon search endpoint
159. 6:08so we don't overwhelm the API. And once
160. 6:10you're happy with all of that, let's
161. 6:12execute the plan command. And you can
162. 6:14see here that specit gets more detailed.
163. 6:17It adds a data model and a research
164. 6:19document as well as contracts for the
165. 6:22object types which is super cool. And in
166. 6:25the data model file, it even crafted a
167. 6:28zod schema object. But I really love the
168. 6:30research document because here we can
169. 6:32see the ration behind the model choosing
170. 6:35specific frameworks and it also gives us
171. 6:38explanations about its reasoning along
172. 6:40with other considerations for
173. 6:42alternative solutions and it also
174. 6:44respects the text stack choices you give
175. 6:47it plus it tries to think of other
176. 6:49necessities which you might not have
177. 6:51considered as well. So that is really
178. 6:54powerful. So then we move on to the plan
179. 6:56file which has laid out all the
180. 6:58development phases in concrete steps and
181. 7:00it has also ticked the ones that are
182. 7:03already completed. This all looks very
183. 7:05good to me. So now we can move on to the
184. 7:07next phase, the task execution phase.
185. 7:10Now we already have the spec and plan in
186. 7:12place. So for the tasks command, we can
187. 7:14just start by asking the model to create
188. 7:16an MVP version of our project. And this
189. 7:19is where the magic happens. SpecKit will
190. 7:22now create a very detailed tasks list
191. 7:25which outlines step by step what we need
192. 7:27to do to get to our development goal.
193. 7:30Let's open up the tasks list. And we can
194. 7:32see here that it has given every task a
195. 7:34unique number. And that keeps everything
196. 7:37well and organized. So you can execute
197. 7:39tasks in order and review them as you
198. 7:42go. I see here that tasks one to four
199. 7:44are dedicated to setting up the
200. 7:46environment. So let's go ahead and ask
201. 7:48the model to execute those. There is no
202. 7:51slash command for this phase, but as I
203. 7:53understand the recommended way to
204. 7:55proceed is to write implement followed
205. 7:58by the task numbers to tell the model
206. 8:00which tasks to execute at the specific
207. 8:02given command. So first let's run the
208. 8:04setup tasks so you can also keep track
209. 8:06of the progress. So from here on out
210. 8:08it's a very free flow approach of just
211. 8:11asking the model which tasks to
212. 8:13implement and then just following along,
213. 8:15seeing the progress and iterating on the
214. 8:17process. And once they're done, we can
215. 8:20see that the model has also ticked them
216. 8:22as completed. I noticed that in this
217. 8:24particular template that they have, it
218. 8:26very much likes the test-driven
219. 8:28development approach where it writes the
220. 8:30tests first and then implements the
221. 8:32features. You can probably change that
222. 8:33in the spec or the plan if you want to
223. 8:36go for a different development approach.
224. 8:38So after a few commands and iterations,
225. 8:40my model has finished implementing all
226. 8:42of the tasks. And here's the result. As
227. 8:45you can see, we have a nice little
228. 8:47functioning Pokedex where I can search
229. 8:49for any Pokemon and add them to my team.
230. 8:52The API seems to be working perfectly.
231. 8:54And the project also looks very clean.
232. 8:57It uses Chats and UI elements as I
233. 9:00prompted it to do. And by the looks of
234. 9:02everything, it's very well and
235. 9:04functional. So, there you have it. We
236. 9:06just vibecoded a nice little web project
237. 9:08using SpecKit. I hope by now you see how
238. 9:11this meticulous specdriven development
239. 9:14approach can help improve the AI model's
240. 9:16ability to craft a cleaner, more refined
241. 9:19code. It also gives you more precision
242. 9:21to steer the model in the direction you
243. 9:24want to go. And I do have to mention
244. 9:26that although SpecKit is designed to
245. 9:28work with most of the coding models, the
246. 9:30choice of the coding model still makes a
247. 9:33difference. While testing out this tool,
248. 9:35I also tried scaffolding a project using
249. 9:37GPT4.1
250. 9:39and it didn't give me as good of a
251. 9:41result as when I used the Grock model.
252. 9:43So, choosing the right coding model is
253. 9:45still necessary to achieve the best
254. 9:47results. It's clear that specdriven
255. 9:49development is a paradigm we'll be
256. 9:51seeing much more of in the future of
257. 9:53coding. But what are your thoughts about
258. 9:55specit? Are you using specdriven
259. 9:58development in your coding practices?
260. 10:00Let us know in the comments down below.
261. 10:02And folks, if you like these types of
262. 10:04technical breakdowns, let us know by
263. 10:06smashing that like button underneath the
264. 10:08video. And also, don't forget to
265. 10:10subscribe to our channel for more videos
266. 10:12like this one. This has been Andress
267. 10:14from Better Stack, and I will see you in
268. 10:16the next videos.
269. 10:20[Music]