Don't waste time on specs: /prototype instead — Transcript

Full transcript

1. 0:00There's something that a lot of people
2. 0:01do when they're working with AI to
3. 0:02create code that totally drives me
4. 0:05crazy. And it's sort of something that
5. 0:08I've been railing against for a while
6. 0:10now. The thing that I've noticed is
7. 0:12people tend to think I need to create a
8. 0:14spec for AI. I need to create a plan,
9. 0:17right? Plan mode, spec-driven
10. 0:19development. I need to put all of my
11. 0:21efforts into making this extremely
12. 0:23detailed spec so that when I get some
13. 0:25outputs from the AI, those outputs are
14. 0:27going to look like the spec. I'm going
15. 0:29to have specified everything up front so
16. 0:31that I can just perfectly nail it. And
17. 0:33in this impulse, what they forget to do
18. 0:35is they forget they can actually write
19. 0:37code. You can write code while you're
20. 0:40working towards a spec. Prototyping and
21. 0:43spikes are things that we've had around
22. 0:45since the days of Agile, right? I mean,
23. 0:47I suppose these are still the days of
24. 0:49Agile. Agile is still extremely popular,
25. 0:51still extremely influential. But people
26. 0:53just aren't prototyping anymore. And so,
27. 0:55as part of my skills repo, I'm trying to
28. 0:57turn this around. I have a prototype
29. 0:59skill. A prototype is throwaway code
30. 1:02that answers a question. Everyone is
31. 1:04saying that code is cheap, and it's
32. 1:05partially true and partially I hate that
33. 1:07phrase. But the thing that is cheap is
34. 1:10the cost of producing code has gone way,
35. 1:12way down. So, producing prototypes,
36. 1:14producing quick kind of throwaway spikes
37. 1:17has never been cheaper and never been a
38. 1:19more effective tool. In this video, I'm
39. 1:21going to introduce this prototype skill.
40. 1:23I'm going to talk about when you should
41. 1:24use it, what it can be used for, and
42. 1:26also how it fits into my new wayfinder
43. 1:29skill. But first, to explain the concept
44. 1:31of fidelity, high fidelity and low
45. 1:34fidelity. Whenever you're talking about
46. 1:35designing something, you're going to
47. 1:37have questions in your mind that need to
48. 1:39be resolved somehow. Some of the
49. 1:41questions are going to be really basic,
50. 1:43like the basic frame of the thing you're
51. 1:45building. When the modal opens up, it
52. 1:47should have a cancel button and a
53. 1:49confirm button, simple stuff. With
54. 1:51simple stuff like that, you don't need a
55. 1:52lot of high fidelity stuff to answer the
56. 1:55question. That can just be resolved in
57. 1:56discussion, really. But let's say that
58. 1:58the modal, when it opens up, under some
59. 2:00circumstances it needs to show some
60. 2:02data, you might need to go a little bit
61. 2:04of higher fidelity on that. How would
62. 2:06you display the data? It's often hard
63. 2:08when you're planning out a spec to
64. 2:09figure out exactly how things should
65. 2:11look, and how things should look, how
66. 2:13they should behave under certain
67. 2:15circumstances, making sure that you've
68. 2:17road tested all of this idea in kind of
69. 2:20semi working code, that means you need a
70. 2:22higher fidelity. Some questions really
71. 2:25can only be answered by prototyping. And
72. 2:28because producing these prototypes is
73. 2:30now cheaper than it ever has been
74. 2:32before, I tend to want more of my
75. 2:35discussions at a higher fidelity.
76. 2:37Obviously, the basic stuff I'm going to
77. 2:38just resolve through discussion. So, the
78. 2:40agent is going to ask me some questions,
79. 2:42probably through a grilling session, and
80. 2:44then I'm going to say, "Okay, yeah, this
81. 2:45sounds good." But then, as soon as we
82. 2:47get anything that I think, "Oh, I really
83. 2:49need to see this in action. I need to
84. 2:51feel it in action, look at it working."
85. 2:53I'm going to ask for a prototype.
86. 2:55Prototyping is a part of my new
87. 2:57Wayfinder skill, which is a skill that
88. 2:59allows you to plan a huge chunk of work.
89. 3:01There's a future video coming on
90. 3:02Wayfinder. Now, Wayfinder, what it does
91. 3:05is it tackles a huge chunk of work, and
92. 3:07it splits it up into different planning
93. 3:10sessions. And all of these planning
94. 3:11sessions get their own ticket, and there
95. 3:13should be somewhere in here ticket
96. 3:15types, just here, that tells it exactly
97. 3:19what different ticket types there are.
98. 3:20The two that we're looking at here are
99. 3:22the grilling type, so it's using the
100. 3:25grilling skills, and the prototype
101. 3:28ticket type. The default case here is
102. 3:30the grilling type, so where you're
103. 3:31chatting with the agent, figuring out
104. 3:33the basic scope of the thing you're
105. 3:34building. But when you need to raise the
106. 3:37fidelity of the discussion, making a
107. 3:38cheap, rough, concrete artifact to react
108. 3:40to, an outline, a rough take a stab at
109. 3:42UI logic code via the prototype skill,
110. 3:44links the prototype as an asset, use
111. 3:46when how should it look or how should it
112. 3:48behave is is key question. Whether
113. 3:51you're using Wayfinder not, this gives
114. 3:53you a really clear criteria for when you
115. 3:55should reach for a prototype. So, I'm
116. 3:57sure you're dying to see it in action,
117. 3:59and here it is. This is what it's done.
118. 4:01I've been using Wayfinder to extend my
119. 4:03diagramming app here, which is built on
120. 4:05TLDraw. And I wanted a way to search
121. 4:07through old diagrams, and the data model
122. 4:10here is quite complicated. There's like
123. 4:12diagrams and then snapshots of the
124. 4:14diagram through time. And so, I wanted
125. 4:16to build a search bar, but I wasn't sure
126. 4:18how it should look or behave. So, I ran
127. 4:20prototype here, and what it did is it
128. 4:22created this little uh
129. 4:25picker at the bottom here. And this
130. 4:26picker, if I go between it, it has three
131. 4:29different options. So, that's option B,
132. 4:31and that's option C. And each one
133. 4:34encodes a few design decisions that I
134. 4:36can then react to and iterate on. So,
135. 4:38let's start by looking at A. I've just
136. 4:40generated this. I've not actually looked
137. 4:41at it yet. So, I get to search the
138. 4:43diagrams and see what comes up. And this
139. 4:46one, okay, it's reflow in place grouped
140. 4:49rows. So, it's grouping the snapshots by
141. 4:51the name of the diagram. I really like
142. 4:54the placing of the search box up here,
143. 4:56but this grouping doesn't feel right to
144. 4:59me. So, let's see what B is. Let's
145. 5:01search again inside model here, and
146. 5:04okay, now on the left, we have grouping
147. 5:07for where it can filter down. Okay,
148. 5:09that's quite nice. What happens if I
149. 5:12search for something else and it's
150. 5:14already Okay, so the filter resets at
151. 5:16that point. Now, that's okay, but I
152. 5:18wonder what C looks like. I really don't
153. 5:20like this search diagrams thing at the
154. 5:22top. That doesn't look nice, but let's
155. 5:24see what this looks like. So, let's
156. 5:25search for model, and ooh, okay, so now
157. 5:27it's everything in line, no filters. So,
158. 5:30I do actually really like this, but
159. 5:31there are a few things that I don't
160. 5:33like. I don't like these current things.
161. 5:35It looks like this is really technical
162. 5:37weird thing, but the the current one is
163. 5:41showing with the diagram snapshot. So,
164. 5:42I've got some kind of feedback that I I
165. 5:45to give to the prototype. This
166. 5:46prototyping session took about 100,000
167. 5:50tokens. So, I'm actually going to
168. 5:51compact and say, "We're going to do some
169. 5:53more QA on this." Compacting at this
170. 5:55point makes sense to me because we kind
171. 5:57of need to retain all of the information
172. 6:00about the prototype, need to retain all
173. 6:01of the design decisions that went into
174. 6:03it, but we just need to give it some
175. 6:04feedback. So, we just need to continue
176. 6:06the conversation in the same place in
177. 6:08the codebase. I should definitely do a
178. 6:09video about the design tree that I use
179. 6:11for when I've got compact versus clear
180. 6:13versus handoff, but, you know, that's
181. 6:15one for another time. Okay, now I'm
182. 6:16going to give some feedback. I really
183. 6:18like the search box of A and I like the
184. 6:21layout of C. Okay, so I've just dictated
185. 6:23in some more feedback and I'm going to
186. 6:25send it off. So, the idea of this
187. 6:27session is that I'm iterating on this
188. 6:29prototype. I'm not just saying, "Okay,
189. 6:31this is the best one." I'm going to
190. 6:32actually create some design decisions
191. 6:34here, create a super rich asset. All of
192. 6:36these design decisions are then going to
193. 6:38be encoded into the prototype and I'm
194. 6:40going to save the prototype probably on
195. 6:42a throwaway branch. That means that when
196. 6:45the thing actually goes to implement it,
197. 6:47it's not only got a spec, it's actually
198. 6:48got real front-end code that it can
199. 6:50usually copy and paste out of it. Now,
200. 6:52creating these prototypes does take some
201. 6:54time, right? The higher fidelity you go,
202. 6:57the more token cost there is. If we were
203. 6:59to try to resolve this in a discussion,
204. 7:01we'd be at a lower fidelity, so the
205. 7:03answers would be less useful, but we'd
206. 7:05also be spending fewer tokens. And we
207. 7:07can see it's now starting to give me a D
208. 7:09version here, which is kind of what I've
209. 7:11been iterating towards. One note here is
210. 7:13that this is actually
211. 7:15integrated with the live page. So, it's
212. 7:18not doing this on a throwaway route. You
213. 7:21can do that if you want to, but I really
214. 7:23like seeing it actually plugged into the
215. 7:26live route because then it just gives
216. 7:28you so much more flexibility. It it like
217. 7:30it's a more honest representation of how
218. 7:32the code is actually going to work. All
219. 7:33right, looks like it is now created D,
220. 7:36so let's see what that looks like. Yes,
221. 7:38we have the box from A and if we search
222. 7:41in here with model, then we can see that
223. 7:43everything I asked for actually got
224. 7:46done. Before we had a duplicate of this
225. 7:48one, but now there's only one. And in
226. 7:51theory, if I click this, I'm not sure if
227. 7:52this will actually work. I don't know
228. 7:53whether this is part of the prototype.
229. 7:55Yes, it works. Oh, beautiful. So, there
230. 7:57we go. Loads of this functionality looks
231. 7:59like it is now just done. And so, you
232. 8:01might ask, what is the next step after
233. 8:03this? Well, now I consider the prototype
234. 8:06to be complete. That was a pretty quick
235. 8:07one. Usually, I'm kind of in here doing
236. 8:09a lot more. Um I would pass this off to
237. 8:12an AFK agent to plug in everything,
238. 8:14delete the old prototype code, and just
239. 8:16make sure that it was uh compliant with
240. 8:19the original spec. And as you can
241. 8:20imagine, the results here are incredible
242. 8:23because we've had such high fidelity
243. 8:25discussion, because we've been able to
244. 8:28look at a live running version of it,
245. 8:30give our feedback based on that. That
246. 8:33feedback is so invaluable, and it's
247. 8:35already baked into a throwaway branch
248. 8:37that our implementer can actually just
249. 8:39go and reference. So many times I see
250. 8:42people saying, well, the thing didn't
251. 8:43build what I wanted. I created this big,
252. 8:45beautiful spec, and it just did
253. 8:47something totally weird. You probably
254. 8:49just weren't having discussions at a
255. 8:51high enough fidelity, and you probably
256. 8:53should have been prototyping. Finally, I
257. 8:54don't want you to walk away thinking
258. 8:55this is only for UI or front-end stuff.
259. 8:58Front-end definitely benefits a lot from
260. 9:00prototypes because how should it look,
261. 9:02what should it look like is a really key
262. 9:05question that's really hard to answer
263. 9:08during the discussion phase. However,
264. 9:10when you're doing more complicated
265. 9:11stuff, especially back-end work, then a
266. 9:13question like, does this logic, does
267. 9:15this state model feel right? If you're
268. 9:17building anything reasonably complex or
269. 9:19that needs to work in the real world,
270. 9:21then you're going to run into these
271. 9:23questions all the time. And often, the
272. 9:25best way to get around these kind of
273. 9:26questions to build something that kind
274. 9:29of serves the needs of your users,
275. 9:31especially on something complex, is to
276. 9:33build a prototype. Now, it doesn't need
277. 9:36to be a UI prototype. And what I've got
278. 9:38here is build a tiny interactive
279. 9:40terminal app that pushes the state
280. 9:42machine through cases that are hard to
281. 9:44reason about on paper. In other words, a
282. 9:46pure logic prototype. And I've had tons
283. 9:50of feedback from folks saying that this
284. 9:51is such a nice little feature. Both of
285. 9:53these branches have their own reference
286. 9:55docs here, which tell it exactly how to
287. 9:58do each one. So, if it's building a
288. 9:59logic prototype, it looks here. If it's
289. 10:01building a UI prototype, it looks like
290. 10:03this. So, I beg of you, have your
291. 10:05discussions at a higher fidelity. As
292. 10:08agents get better at working with
293. 10:09canvases, working with design tools, I'm
294. 10:11sure that wireframes will definitely
295. 10:12make a comeback as well. And the key
296. 10:14point is this, the leap from discussion
297. 10:16and spec to production-ready code is
298. 10:19really big. Whereas, if you have a
299. 10:21working prototype, turning that into
300. 10:22production is pretty simple. I want to
301. 10:25give a quick shout-out to Shape Up by
302. 10:27Ryan Singer, which is an extremely good
303. 10:29book and very, very influential on me. I
304. 10:32read this, I think, in 2019 or
305. 10:35something, and it totally changed the
306. 10:36way that I built applications for
307. 10:38people. It is totally free online, and I
308. 10:40will drop a link in the description. If
309. 10:41you want to keep up-to-date with my
310. 10:42skills, then my skills newsletter is the
311. 10:45place to be. I'm shipping, shipping,
312. 10:47shipping, constantly thinking about
313. 10:48these skills, how I can make them
314. 10:49better, and you can benefit from that
315. 10:51the day that I make the changes. But
316. 10:53folks, thank you so much for watching.
317. 10:54It's been a pleasure, as always,
318. 10:55bringing you one of my skills, and I
319. 10:57will see you very soon.