Full Tutorial: From Idea to App with Claude Design and Claude Code in 25 Minutes

频道: Peter Yang
视频: https://www.youtube.com/watch?v=G9o8eoHzpxc
原文语言: en
统计: 共 20 轮

[0:00]

Hey everyone, today I want to show you how to design a beautiful app with AI in six steps. This is the app that we're going to design. It's called Tastemaker and it's a website to curate everything you love from movies to TV shows to video games and more. Here's the landing page. And here is the profile that we're going to design together as well with my actual favorite movies, reviews, and lists. So the way that we're going to design this app is instead of using Figma, we're going to follow my AI native design process in six steps. Define the user problem, create a design.md, explore prototypes in Cloud Design, create an HTML spec with product design and tech requirements, design all the core screens, and finally build the app. I'm going to show you this process end to end. Let's get into it. Okay, so step one is to define the user problem. Like any good product manager, you have to start by defining what the problem is that you're trying to solve. And I always like to build products that solve my own problems. Especially with AI, you can build so many great personal apps. So personally, I've watched thousands of movies and TV shows and played hundreds of games. And I've been using IMDb to track everything, but this interface leaves a lot to be desired, right? It's just like a straight up list.

大家好，今天我想给你们演示怎么用 AI 分六步设计出一款好看的应用。这就是我们要设计的这款应用，叫 Tastemaker，是一个网站，可以把你喜欢的一切都收藏起来——电影、剧集、游戏等等。这是它的 landing page。这是我们等下要一起设计的个人主页，上面放的是我真实喜欢的电影、写的影评和整理的片单。设计这款应用的方式是：我们不用 Figma，而是走我自己那套 AI-native 的设计流程，一共六步。第一，定义用户问题；第二，写一份 design.md；第三，在 Claude Design 里探索 prototype；第四，写一份 HTML 格式的 spec，把产品设计和技术要求都写进去；第五，把所有核心页面都设计出来；最后，把应用真正做出来。整个流程我会从头到尾演示一遍。我们开始吧。好，第一步是定义用户问题。就像任何一个合格的产品经理一样，你得先想清楚自己到底要解决什么问题。而我一直喜欢做那种能解决我自己问题的产品。尤其是有了 AI，你可以做出特别多好用的个人应用。就我个人来说，我看过成千上万部电影和剧集，玩过几百款游戏。我一直用 IMDb 来记录这些，但它的界面实在是差强人意，对吧？就是一个干巴巴的列表而已。

[1:21]

So that's why I want to build my own taste page that showcases all the different types of media that I love. Okay, so let's come to Cloud Goal here and my initial prompt to start this whole project is, I'm a huge fan of movies, TV shows, and games and I want one page that shows what I love across all three. Can you help me define the customer problem, who this is for, and any evidence online that the problem exists? Start with the customer problem, write up to two short paragraphs on this topic. Now notice that I used the spec skill here and I'll cover more what that is in step four, but right now let's just take a look at AI's output. So, basically, it found a bunch of research online and and it found that there's three different websites for curating your taste for film, TV, and games. And that's why we're trying to build this product here. We want to showcase our taste across all three mediums on a single page. So, if I were building this app as a business, I would spend a lot more time just trying to research and understand the problem and trying to figure out if this thing can actually make money or get users or not. But, right now, I'm just building it for myself. So, let's move on to the next step.

所以我才想做一个属于自己的品味主页，把我喜欢的各类内容都展示出来。好，我们切到 Claude 这边来。启动整个项目的第一条 prompt 是这样的：我是个不折不扣的电影、剧集和游戏爱好者，我想要一个页面，能把这三类里我喜欢的东西统统展示出来。你能帮我定义一下客户问题、目标用户是谁，以及网上有没有证据表明这个问题真实存在吗？先从客户问题写起，这部分写两小段就行。注意我这里用到了 spec 这个 skill，具体是什么我会在第四步细讲，现在我们先看看 AI 输出了什么。基本上，它在网上找了一批资料，发现电影、剧集、游戏这三类各有各的品味收藏网站，各不相通。这也正是我们要做这个产品的原因——我们想在一个页面上同时呈现自己在三个领域的品味。如果我是把这个应用当生意来做，我会花多得多的时间去调研、去吃透这个问题，去判断它到底能不能赚钱、能不能拉到用户。但现在我只是做给自己用，所以我们直接进下一步。

[2:28]

Okay, step two is to get inspired and create a design.md. Now, we all know that AI, by default, creates either generic-looking purple slop or designs that really have that recognizable Claude look. To make something unique, we need to find inspiration. And, you know, you can check out websites like Mobbin, which has UI screenshots of everything, and Dribbble, which has designer portfolios, to find inspiration. But, recently, I came across this app called Monogram. Now, Monogram is a visual-first way to work with AI, and the app is pretty fun, but what I really like is the design aesthetic here. It looks extremely clean, and I love how they use color to focus people on the content instead of the UI. All right, so let's go back to Claude now. And what I did is I basically copy and pasted a few screenshots from Monogram into Claude Code, and I gave it this prompt: Here are a few screenshots from Monogram. Can you create a design.md for Tastemaker based on this visual direction? The product helps people share their favorite movies, TV shows, and games on one page. Keep the interface quiet and let the cover art carry the color. And, basically, Claude went to work. And let me kind of show you exactly what a design.md is, right? So, let's open this.

好，第二步是找灵感，然后写一份 design.md。我们都知道，AI 默认生成的要么是那种一眼假的紫色垃圾风，要么就是一眼能认出来的 Claude 味设计。想做出有辨识度的东西，就得先找灵感。你可以去看看 Mobbin 这类网站，上面全是各种 App 的 UI 截图；也可以看 Dribbble，上面是设计师的作品集。不过我最近发现了一个叫 Monogram 的应用。Monogram 是一种视觉优先的方式来跟 AI 协作，这个应用本身挺好玩的，但我真正喜欢的是它的设计美学。它看起来极其干净，而且我特别喜欢它用色的方式——用颜色把注意力引到内容上，而不是引到 UI 上。好，我们回到 Claude 这边。我做的事情很简单：把 Monogram 的几张截图复制粘贴进 Claude Code，然后给了它这么一条 prompt：这里是 Monogram 的几张截图，你能按这个视觉方向给 Tastemaker 写一份 design.md 吗？这个产品是帮人们在一个页面上分享自己最爱的电影、剧集和游戏。界面要保持安静，让封面海报去承担色彩。然后 Claude 就开始干活了。我给大家具体看看 design.md 到底长什么样，我们打开它。

[3:50]

All right, so design.md is basically a markdown file with simple design principles for the app that we're going to build. And also, just like very simple recommendations for color, typography, and spacing, and more. Because we gave Claude a few screenshots of this app that we like, it's able to hopefully produce color and style guidelines that actually reflect the design that we want. Now, real quick, another great resource for design.md, if you don't want to generate one, is the z.sh, and I'll link this in the description. So, basically what it has is design.mds for popular websites like Nike, SpaceX, Apple, Vercel, Notion, and more, right? If you click into one of these, it basically has all the colors and typography that these popular websites uses. Now, I do want to caveat and say that there's a difference between inspiration and just straight-up copying another app. In this case, we're building an app in a completely different category from Monogram, so I feel okay borrowing a little bit from their design. All right. Now that we have our design.md, let's move to Claude design to prototype our product. So, going back to our six steps, we're now at step three, which is explore prototypes in Claude design. Now, before I talk about Claude design, there are actually a lot of really great AI-native design tools that I've tried. A few of them are Paper, which basically looks like Figma, but has AI-native features, and pen.dev, which lets a bunch of agents work on your design at once. I have an interview with the founder that I'll link in the description as well.

好，design.md 本质上就是一个 markdown 文件，里面写着我们要做的这个应用的基本设计原则，还有关于配色、字体、间距等等的一些非常简单的建议。因为我们给了 Claude 几张我们喜欢的应用的截图，它就有机会产出真正贴合我们想要的那种视觉风格的配色和样式规范。另外插一句，如果你不想自己生成 design.md，还有一个很棒的资源叫 z.sh，我会放在简介里。它上面收录了一堆知名网站的 design.md，比如 Nike、SpaceX、Apple、Vercel、Notion 等等。你点进其中任何一个，里面就有这些网站用的全部配色和字体规范。不过我得加一句免责说明：找灵感和直接照抄别人的应用，这两者是有区别的。我们这个案例里，我们做的产品和 Monogram 完全不是一个品类，所以从它的设计里借鉴一点，我心里是过得去的。好，design.md 有了，我们进 Claude Design 去做产品的 prototype。回到我们那六步，现在我们走到第三步：在 Claude Design 里探索 prototype。在讲 Claude Design 之前，我得说市面上其实有不少很不错的 AI-native 设计工具，我都试过。比如 Paper，它看起来跟 Figma 很像，但带了 AI-native 的能力；还有 pen.dev，它能让一堆 agent 同时在你的设计稿上干活。我采访过它的创始人，链接我也放简介里。

[5:34]

And Figma itself, by the way, also has a lot of really great AI features now. But, for this project, we're going to use Claude design because I already have a Claude subscription, and Claude design has a bunch of stuff that I really like that I'll show you guys. All right, so this is my initial prompt for Claude design. I'm building TasteMaker, a shareable profile for movies, TV shows, and games. Use the attached design.md. Notice how I attached the file here. And by the way, you can just find the file by just telling it to export the file, or you can right-click this and say open in finder to find the file. Going back to Claude design, I gave it some basic requirements, right? So, I want to use design.md as the visual system, and I want to create our two main screens. One is the public taste profile with favorites, recent reviews, and lists. And the other one is just a logged-out landing page that hopefully showcases a real taste profile as an example. And I want two variations of this because with AI, it can create multiple variations, and we can pick our favorite one. All right, and then we asked it to lay on a single page so we can compare and refine them. And for this product, I want to build it on the website first, so I'm going to say, let's build the web version first.

顺带一提，Figma 自己现在也有很多很不错的 AI 功能。但这个项目我们要用 Claude Design，一是我本来就订了 Claude，二是 Claude Design 有一堆我特别喜欢的东西，等下会一一演示。好，这是我给 Claude Design 的第一条 prompt：我在做 Tastemaker，一个可以分享的电影、剧集和游戏品味主页。请使用附件里的 design.md。注意我把文件直接附上去了。顺便说，你可以直接让它把文件导出来找到这个文件，或者右键点这里选「在 Finder 中打开」也能找到。回到 Claude Design，我给了它一些基本要求：把 design.md 当成视觉系统来用；然后做出两个主页面——一个是公开的品味主页，包含最爱、最近影评和片单；另一个是未登录状态的 landing page，最好能拿一个真实的品味主页当范例展示出来。而且我要每个页面两个变体，因为 AI 本来就能一次生成多个版本，我们可以从里面挑最喜欢的。然后我让它把这些都摆在同一个页面上，方便我们对比和打磨。这个产品我想先做网页版，所以我加了一句：先做 web 版本。

[6:47]

Just to make it clear that it's not making mobile designs. And by the way, as much as I love Fable, I think for these tasks, Opus is totally capable of making great designs. So, if you want to save on tokens, you can use Opus. And let's go ahead and submit. So, one thing that I really love about Claude design that I don't know why other AI design tools don't copy is that it always asks clarifying questions that really help me flesh out what the design requirements actually are. So, let's go through this and answer the questions now. So, whose taste profile should the example show? Why don't we do a balanced movie, TV, and games generalist? What should the two variations of each screen explore? I think layout is the most important, right? Row-heavy versus grid editorial. Let's keep going down. What sections go on the public profile? Yeah, we definitely want favorites, recent reviews, and custom lists. I think this other stuff is maybe unnecessary. And I don't really what a media detail sheet is, so let's say two screens for now. And let's say we want both light and dark mock-ups. And how real should the copy be? I mean, we want real copy, right? So, fully fresh out real copy. All right. So, now that we answer these questions, we can hit continue.

就是为了明确告诉它别去做移动端的设计。另外说一句，虽然我很喜欢 Fable，但我觉得这类任务 Opus 完全有能力做出很好的设计。所以如果你想省 token，用 Opus 就行。好，我们提交。Claude Design 有一点我特别喜欢，我一直想不通为什么别的 AI 设计工具不抄——它每次都会问澄清性问题，这些问题真的能帮我把设计要求想透。我们把这些问题过一遍，逐个回答。第一个：范例主页该展示谁的品味？我们就选一个电影、剧集、游戏都均衡涉猎的通吃型用户吧。第二个：每个页面的两个变体应该探索什么方向？我觉得布局是最关键的，那就选「横排为主」对比「网格编辑风」。继续往下。公开主页上要放哪些板块？最爱、最近影评、自定义片单肯定要，其他这些我觉得没必要。还有这个「媒体详情页」我不太清楚是什么，那就先定两个页面。然后我们选浅色和深色两版 mockup 都要。最后一个：文案要多真实？当然要真实文案，对吧？那就选「完全写成真实文案」。好，问题都回答完了，我们点继续。

[8:02]

And Claude design is going to go ahead and start working on the mock-ups that we want. So, we'll skip ahead and see what it comes up with. All right, we're back and Claude has created two variations. Let's take a look. So, this is the real heavy version of the taste profile page. Right? We got favorites up top. We got recent reviews. We got lists. And here is the grid dark version that's more information dense. And the lists are shown as these kind of like three pills instead. And down here we have the landing page, too. So, we have uh profile as a demo landing page. And then we have a more editorial poster wall landing page. Okay? So, now is where we need to apply our taste to actually make this design better, right? And there's different ways to actually give Claude design feedback to make it better. So, the most direct way is to just edit the file directly. So, click edit here. And for example, I really don't like these pithy statements that Claude likes to make, like the ones that define the argument. So, let's go ahead and click this and delete this. I also don't really like all these like little pills here. So, let's go ahead delete that. Make it simple. I think the follow button, we haven't really built that feature yet, so I don't think we need that.

然后 Claude Design 就开始做我们要的 mockup 了。我们快进一下，看看它做出什么来。好，我们回来了，Claude 做出了两个变体，我们看看。这是品味主页的横排为主版本：上面是最爱，然后是最近影评，再往下是片单。这是网格深色版，信息密度更高一些，片单被压成了这种三个胶囊标签的样子。再往下是 landing page，一个是拿个人主页当 demo 的 landing page，另一个是更偏编辑风的海报墙 landing page。好，接下来就轮到我们用自己的品味把这个设计改得更好了。给 Claude Design 反馈有好几种方式，最直接的一种是直接改文件。点这里的编辑。举个例子，我特别不喜欢 Claude 爱写的这种自以为妙语连珠的句子，比如这种「定义了这场争论」什么的。那就点上去，删掉。我也不太喜欢这里这一堆小胶囊标签，删掉，让它简单点。还有关注按钮，这个功能我们压根还没做，我觉得不需要。

[9:21]

Delete. And let's keep going down here. Yeah, the reviews. I don't like how they're all in a grid. I prefer just a single row per review for more space. So, this one we're going to give it some feedback later. And similarly for the lists, I prefer to see all six movie and TV show cards instead of it just condensed format. And I think this stuff is also unnecessary, so let's leave this, too. All right. So, this is all misaligned, so I I think I definitely prefer the first one. And let's go down to the landing page. For the landing page, I think I prefer to have the preview of the product actually like below the hero section, so that people can see the full taste profile as an example. And yeah, I think the dark one here is pretty good, but I think just for consistency, I like the light one, too. All right, so we finished editing here, so let's hit save. And now, let's edit the other way, which is we're going to give AI some feedback. All right, so let's open a side panel here, and this is the feedback that I'm going to give it, okay? So, basically, I'm going to tell it that I prefer 1A and 2A, the light version, with a few changes. So, favorites, I think should be six across with arrows like Netflix for navigation.

删。继续往下看。影评这块，我不喜欢它们全挤在一个网格里，我更想要每条影评单独占一整行，这样空间更宽裕。这条我们等下用反馈的方式告诉它。片单也一样，我希望六张电影和剧集卡片全都能看到，而不是压缩成这种紧凑格式。这些东西我觉得也是多余的，也删掉。好，这一版整体对不齐，所以我明显更喜欢第一版。我们往下看 landing page。landing page 这块，我更希望产品预览图放在 hero 区块的下面，这样人们能看到一个完整的品味主页当范例。深色这版其实挺好看的，但为了保持一致，我还是选浅色版。好，编辑就到这，我们点保存。接下来换另一种方式——给 AI 反馈。我们打开侧边栏，我要给的反馈是这样的：我更喜欢 1A 和 2A，也就是浅色版，但要改几个地方。最爱那块，我觉得应该一行六个，配上左右箭头做翻页，像 Netflix 那样。

[10:34]

Recent reviews should be full width with a cover art, a five-star rating, and a review. And lists should also be five across like the favorites. Let's also add a left nav on this page for quick links to favorites, recent reviews, and lists. Right? So, that's my feedback, and let's go ahead and submit this. And now, let's see what Cloud Design comes back with. All right, we're back, and if I'm honest, this took a few more iterations to get this state, but now we have a taste profile that I think looks pretty good. We have the user profile up top. We can pick where we want to show movies, TV shows, or video games. The favorites are six cards across, and then the recent reviews have more space. We even added some additional details like spoiler tags and a review. And scrolling down here, the lists also look like they have a lot of space. They look like the favorites, and so on and so forth. So, that was the taste profile page. Now, let's take a look at the landing page. Overall, it looks a lot better, too. We have enough space for the title and the subtitle and a clear CTA. We have a very clear card preview here. And we have a bunch of sections here that showcase the value prop. And once again, we can continue to iterate. So, for example, show who you are through what you love. I think that's interesting, but I don't think it's as good as just saying one taste profile for everything you love. I feel like it's more straightforward.

最近影评应该是通栏的，带封面图、五星评分和影评正文。片单也要像最爱那样一行五个。另外在这个页面加一个左侧导航，方便快速跳到最爱、最近影评和片单。这就是我的反馈，我们提交。看看 Claude Design 会给出什么。好，我们回来了。说实话，做到现在这个状态又多迭代了好几轮，但现在这个品味主页我觉得挺不错了。上面是用户资料，可以切换想看电影、剧集还是游戏。最爱是一行六张卡片，最近影评的留白也更充裕了，我们还加了些额外细节，比如剧透标签和影评正文。往下滑，片单的空间也很足，看起来跟最爱那块是一致的，以此类推。这就是品味主页。现在我们看看 landing page。整体也好看多了。标题和副标题有了足够的空间，还有一个明确的 CTA。这里有一个非常清楚的卡片预览。下面还有一堆板块用来展示产品价值主张。当然我们还可以继续迭代。比如这句「用你的所爱定义你是谁」，我觉得挺有意思，但我觉得还不如直接说「一个品味主页，装下你爱的一切」，感觉更直白。

[12:00]

And let's say let's put the show who you are over here. So, show who you are through the movies, TV shows, and games that you love. All right. And let's hit save here to save our changes. And yeah, like I think the difference between Slap and something that's actually good is just having attention to detail. Claude isn't going to generate the perfect design in one shot. So, you really have to apply your taste to make these two core screens, the landing page and the taste profile page. Great. All right. So, now we are pretty happy with these designs, and we just need to hit share here. And there's a way to get it directly to Claude code, but what I like to do is I just like to put it into a .zip file or HTML file. So, just hit this option here. And we just say export. And it should export a zip file with all the designs that we can import into Claude code or Code X or any other harness that we want to use. Now, let's move on to the next step, which is creating a spec in HTML with the product design and tech requirements. So, we made a design.md in step two. We made our two key screens in step three for the taste profile and the landing page. And now, we're ready to make the full spec.

那我们把「用你的所爱定义你是谁」挪到这边来——「用你爱的电影、剧集和游戏，定义你是谁」。好，点保存，把改动存下来。我觉得吧，垃圾设计和真正好的设计之间的差距，无非就是有没有在细节上下功夫。Claude 不可能一次就给你生成完美的设计，你必须把自己的品味用上去，才能把这两个核心页面——landing page 和品味主页——做到位。好，现在我们对这些设计比较满意了，接下来只要点这里的分享。它有一个直接推给 Claude Code 的方式，但我习惯的做法是导出成 .zip 或者 HTML 文件。点这个选项，然后选导出。它就会导出一个包含所有设计稿的 zip 文件，我们可以把它导进 Claude Code、Codex 或者任何你想用的 harness。下面进入下一步：用 HTML 写一份 spec，把产品设计和技术要求都写进去。回顾一下，第二步我们写了 design.md，第三步我们做出了品味主页和 landing page 这两个关键页面，现在我们可以来写完整的 spec 了。

[13:19]

So, this is a little bit different from a traditional development process, right? I like to generate the key screens before actually writing the spec because I find it much easier to understand what the product is from a few key visuals before producing a document to iron out all the default states and edge cases. And this is quite the opposite of the traditional product development process if you think about it where a PM like me would first write the spec, hand it off to designer to make the Figma, and then we'll hand both off to the engineer to write a text spec. And personally I don't like having separate files for everything so I prefer to have the product requirements design and text spec all in one file. And that is what my spec skill does. So let's go ahead and go back to Cloud Code. And what I've done is I've uploaded the zip file with two key screens that we just mocked up in Cloud Design. And now I'm going to say turn these requirements and designs into a concise spec with product design and tech tabs, okay? And let's see what is the spec that it comes up with. Okay, so this is the actual spec that I'm using for the TasteMaker app. And I want to show you all three tabs.

所以你看，这套流程跟传统的开发流程不太一样。我习惯先把几个关键界面生成出来，再去写 spec。因为我发现，与其先憋一份文档、把所有默认状态和边界情况都抠一遍，不如先看几张关键视觉稿——那样更容易搞清楚这个产品到底是什么。而这跟传统的产品开发流程几乎是反着来的：传统做法是我这种 PM 先写 spec，交给设计师去出 Figma，然后两份东西一起丢给工程师，让他再写一份技术方案。我个人也不喜欢东西散在一堆文件里，所以我更愿意把产品需求、设计和技术方案全塞进同一个文件。我的 spec skill 干的就是这件事。那我们回到 Claude Code。我已经把刚才在 Claude Design 里做的那两个关键界面打包成 zip 上传上去了。现在我就跟它说：把这些需求和设计整理成一份简洁的 spec，分成 product、design、tech 三个 tab。好，我们看看它写出来的 spec 长什么样。这就是我给 Tastemaker 这个 app 实际在用的 spec，三个 tab 我都给你们过一遍。

[14:34]

So the first tab is PRD which covers the user problem that we came up with before, some high-level goals for the product, and a list of requirements. And I asked AI to write the requirements in a very concise way that's easy scannable, and also split into different surfaces of the app. Now let's move on to the design. So in this case it's basically a HTML version of the design.md that we came up with before that's just easier to read. So there's a few principles here and of course we have our style guide for color and typography here. But most importantly my spec skill actually asks it to also make a component library that you see here. I built apps before without using this component library and what usually happens is AI starts making all kinds of crazy components and the app starts looking like a mess. So, it's very important to get it to generate a component library and also keep this component library updated as we create more screens. All right, and let's go to the tech tab and here we have the tech stack that we're going to use. And I also asked AI to generate a data schema because databases are very difficult to change once in production. So, exactly how it's organized and the trade-offs that it makes and most hilariously it thinks that it's going to take 3 weeks to build this whole app when in reality it's probably going to take maybe 30 minutes.

第一个 tab 是 PRD，里面写了我们前面定下来的用户问题、产品的几条高层目标，还有一份需求清单。我让 AI 把需求写得非常精炼、扫一眼就能读完，而且按 app 的不同界面模块分开列。接下来看 design 这一栏。这块基本上就是我们之前那份 design.md 的 HTML 版，读起来更舒服。这里有几条设计原则，当然也有颜色和字体的 style guide。但最关键的是，我的 spec skill 还会让它做一份 component library，就是你现在看到的这块。我以前不带 component library 直接做 app，结果通常是 AI 开始自由发挥、造出一堆奇奇怪怪的组件，整个 app 越看越乱。所以一定要让它生成一份 component library，而且随着界面越做越多，要一直把这份 component library 更新到最新。好，我们再看 tech 这一栏，这里是我们要用的技术栈。我还让 AI 出了一份数据表结构，因为数据库一旦上了生产环境就特别难改。所以它会写清楚数据怎么组织、做了哪些取舍。最搞笑的是，它觉得这整个 app 要做三周，而实际上大概三十分钟就搞定了。

[15:58]

So, again, I designed this whole /spec scale to make all this really easy for a human to actually read because it's very important to actually read through this and give it feedback and make it good. All right, so a quick plug. If you want my /spec scale, check out behindthecraft.com where I have it right here along with a bunch of other skills that I've curated and made for myself that are extremely useful. Full disclosure, these skills are available to members of my paid Substack and you also get free AI tool coupons, courses, and more. So, personally I think it's a really great deal. Check out behindthecraft.com. Of course, you can also just get AI to create a spec scale for you for free and just give it direction to generate these three tabs the way I just walk you through. Okay, so now we have a spec.html that is the source of truth for what we're trying to build here and it has a bunch of requirements down here for screens that we haven't actually designed. So now, let's actually save the spec. It's an HTML. Let's upload it to Cloud Design and let's get Cloud Design to make all the core screens. All right, we're back in Cloud Design and the prompt that I gave it is create all the core screens in the requirements, and here is the spec that HTML that we have here, and just submit that prompt.

再说一遍，我把整个 /spec skill 设计成这样，就是为了让人真的读得进去——因为你必须逐条读完、给它反馈、把它打磨好，这一步非常重要。这里插播一下：如果你想要我的 /spec skill，可以去 behindthecraft.com，就在这儿，旁边还有一堆我自己挑的、自己做的技能，都特别好用。利益相关先讲清楚：这些技能是给我付费 Substack 订阅者的，同时还送 AI 工具优惠券、课程等等，我自己觉得挺划算的，可以去 behindthecraft.com 看看。当然你也完全可以让 AI 免费给你写一个 spec skill，只要按我刚才演示的思路，让它输出这三个 tab 就行。好，现在我们有了一份 spec.html，它就是我们要做的这个东西的唯一事实来源，而且下面还列了一堆我们还没设计的界面需求。那我们先把这份 spec 存下来，它是个 HTML。把它上传到 Claude Design，让 Claude Design 把所有核心界面都做出来。好，我们回到 Claude Design。我给它的 prompt 是：把需求里的所有核心界面都做出来，然后附上我们这份 spec 的 HTML，把 prompt 发出去。

[17:22]

Now, I want to emphasize again that it's really important to actually read through the spec that AI generates, give it feedback to improve it, and make sure all these requirements actually make sense, like all these services, before getting it to generate designs, right? Otherwise, you're just burning through a lot of tokens. But anyway, let's go ahead and submit this and see what Cloud Design comes up with. Okay, Cloud Design is done, and we have our landing page that we saw before, and let's keep scrolling down. We have our taste profile page, and hopefully there's going to be some more screens now. And here we go. So, we have a creator version, your own taste profile page, and it has this edit functionality here. It has add buttons and the ability to edit my reviews. Let's keep scrolling down. It's also important to actually get Cloud to design the default states, the empty states, and also any edge cases, right? So, for example, when I make a fresh taste profile page, everything's empty. There needs to be a clear call to action to actually add something that Cloud Design has added here. There's also pages to see the full list of games that may be cry here, right? And let's keep going down. There's a item sheet that appears. We can save it.

我想再强调一次：AI 生成的这份 spec，你一定要真的读一遍，给它反馈去改，确认所有需求——比如这些页面模块——都说得通，然后再让它去出设计稿。不然你就是在白烧 token。好，那我们把这个发出去，看看 Claude Design 做出什么来。好，Claude Design 跑完了。这是我们之前看过的落地页，继续往下滚。这是 taste profile 页面，接下来应该会有更多界面出来。来了。这是创作者视角、你自己的 taste profile 页面，带编辑功能，有添加按钮，也能改自己写过的评价。继续往下滚。让 Claude 把默认状态、空状态还有各种边界情况都设计出来，这一点也很重要。比如说，我刚建好一个 taste profile 页面的时候，里面什么都没有，那就需要一个明确的行动引导让用户去添加内容，Claude Design 在这儿就加上了。还有能看到完整游戏列表的页面。继续往下。点开会弹出一个条目详情卡片，可以收藏。

[18:37]

We can rate to try. The onboarding flow is also really important. You know, if you're building a product trying to get users, you have to give them a really great onboarding experience. So, here we have claim our handle, pick six things that you love, and also it designed a share your page thing, too. So, basically, you have to carefully review all these screens and go back and forth with Cloud Design to fix stuff. You can add comments here for it to fix stuff, change this, or you can give feedback directly in the chat, or you can also edit directly like we showed before. But for now, let's assume that the thing is perfect the way we exactly want it to be. And let's again hit share and export and download it as a zip file. And then we're going to upload it into Cloud Code to get it to build the app. Okay, so now we have two artifacts that are hopefully in sync. We have the spec. HTML with the product design and tech requirements. And we also have a design.html that we exported from Cloud Design with the actual mockups for all the core screens here. And we haven't even started building the app yet, right? So this is a point that I really want to reinforce. When you're building with AI, you have to spend at least 50% of your time on planning up front. The build part has become easy, but you need to have a robust plan for AI to get to what you want to build in the right way.

也可以打分，或者标记成「想试试」。onboarding 流程也非常重要。如果你做的产品是真想拉到用户的，就必须给他们一个足够好的新手引导体验。所以这里有：认领你的用户名、挑六个你喜欢的东西，它还顺手设计了一个「分享你的主页」的步骤。总之，你得把这些界面一张张仔细看过去，跟 Claude Design 来回改。你可以在界面上加评论让它改这儿改那儿，也可以直接在对话里给反馈，或者像我们前面演示的那样直接手动编辑。不过现在我们就假设它已经完全符合我们的预期了。那就再点 share、export，导出成 zip 下载下来，然后把它传进 Claude Code，让它去把 app 建出来。好，现在我们有了两份互相对齐的产物：一份 spec.html，里面是产品、设计和技术需求；还有一份从 Claude Design 导出的 design.html，里面是所有核心界面的实际设计稿。而我们到现在连 app 都还没开始建，对吧？这一点我特别想强调：用 AI 做东西，你至少要把一半的时间花在前期规划上。写代码这件事已经变简单了，但你得有一份足够扎实的计划，AI 才能按你想要的方式做出你想要的东西。

[20:09]

And I think this is so important. You have to spend up front time planning. So in some ways it actually kind of is like waterfall development, but just sped up with AI. You know, if I just tell AI, "Hey, go ahead and build me an app to curate my movies, TV shows, and games." It's not going to do it in the way that I want, right? And once it actually builds things like databases and other parts of the stack, it's going to become much more complicated and costly to change things than right now when we can just update these two HTML files that we prototyped. All right, so now that we have our spec and design, we can start building with a prompt like this. We attach both the spec and design.html. Then we say, "Review the spec and design and let me know if any questions before you start building or any ambiguities that I should clarify." Always assume that there's going to be ambiguities that you haven't quite figured out yet. And get AI to ask you questions to try to resolve as much of this as possible before it starts writing code. And here's the actual thread that I'm using to build with AI. So, I asked it to build everything it claims it did. I told it to run localhost so I can take a look at the app. It has localhost running. And you can see here that I gave it a ton more feedback. I pasted some screenshots in of the stuff that I don't like.

我觉得这一点太重要了——你必须把时间花在前期规划上。所以某种意义上，这其实有点像瀑布式开发，只不过被 AI 加速了。你想，如果我只是跟 AI 说一句：「来，帮我做个 app，用来整理我看过的电影、剧和游戏」，它做出来的肯定不是我想要的样子。而一旦它真的把数据库和技术栈的其他部分都建起来了，再想改就比现在麻烦得多、贵得多——而现在我们只要改这两个原型出来的 HTML 文件就行。好，spec 和设计都有了，我们就可以开始动手建了，prompt 大概长这样：把 spec 和 design.html 都附上，然后说「先看一遍 spec 和设计，动手之前告诉我你有什么疑问、有哪些含糊的地方需要我澄清」。你要默认一定存在你自己还没想清楚的模糊地带，让 AI 在写代码之前先向你提问，尽可能把这些问题解决掉。这就是我实际用来建这个 app 的对话线程。我让它把东西建出来，它说建好了；我让它跑起 localhost，这样我能看看 app 长什么样，它就把 localhost 起起来了。然后你能看到，我给了它一大堆反馈，把我不满意的地方截图贴了进去。

[21:25]

And I basically just listed all the feedback here. Favorites and hearts should only show up when I hover over the card. On profile page, you're not quite matching design. Where's the review section? And so on and so forth. Right? So, it's not like just magically you upload the design to HTML and the spec to HTML and it's going to one shot everything that you want. You still have to give it a ton of feedback. There's more back and forth here. And then I told it to add the Netflix-style left and right arrows that I forgot. And more feedback and even more feedback. And so on and so forth. And and also, uh this is important, when it starts making a product updates directly in code, it's very important to ask it to keep the the plan and design file updated so that everything is in sync. Okay? So, yeah, there's still a long thread to actually build this thing. It's not like you can just one shot build it. But now let's take a look at the finished product. So, here it is. It's actually live and I'll include a link to the finished product in the description as well. And here we have our landing page. We can see an example of a taste profile. And we can also log in, as you see here, and start setting up our own taste profile.

我基本上就是把所有反馈一条条列出来：收藏和爱心图标只该在鼠标悬停在卡片上时出现；profile 页面跟设计稿对不上；评价那一块去哪儿了；等等等等。所以并不是说你把 design 的 HTML 和 spec 的 HTML 一传，它就能一把梭把你想要的全做出来。你还是得给它大量反馈，这里还有更多来回。然后我让它加上我之前忘了的 Netflix 那种左右切换箭头。又是反馈，还是反馈，如此反复。还有一点很重要：当它开始直接在代码里改产品的时候，你一定要让它同步更新 plan 和 design 文件，保证所有东西都是对齐的。所以是的，真要把这东西做出来，对话还是很长的，不可能一把梭就成。不过我们现在来看看成品。就是它，已经上线了，我会把成品链接也放在简介里。这是我们的落地页，可以看一个 taste profile 的示例，也可以登录，就像这样，然后开始搭自己的 taste profile。

[22:38]

I got some reviews here. I can add some movies. I can sort. And so on and so forth. So, it probably took uh a few hours to get to this state. And I'm sure there's still bugs. But basically, it involved setting up a Superbase database. It involved asking AI to add authentication. But it would have taken more back and forth if I didn't cover some of the key requirements in the spec and the design. All right, let's recap the AI native design process that I follow. So, first it's very important to just define the user problem. Get clear on who the product is for and what problem you want to solve. And if you're trying to build a product that you actually want to get real users and maybe make money from, you also have to get clear on is there's a revenue opportunity here, right? Because I think it's actually harder than ever to make money from software now with everyone being able to write code their own thing. Step two is to get inspired, check out Mobbin, check out other apps, and ask it to create a design.md with the visual direction that you want. Step three is to prototype some key screens for your product using Claude design or another AI native product. It can be Figma, paper, or pen, or products, right?

我这儿已经有一些评价了，我可以加电影，可以排序，等等。做到这个程度大概花了几个小时吧，我相信里面肯定还有 bug。整个过程包括搭一个 Supabase 数据库，还让 AI 加了登录鉴权。但如果我没在 spec 和设计里把那些关键需求先定下来，来回折腾会多得多。好，我们把我用的这套 AI 原生设计流程回顾一遍。第一步，一定要先把用户问题定义清楚：这个产品是给谁用的、你想解决什么问题。而且如果你想做的是一个真能拉到用户、甚至能赚钱的产品，你还得想清楚这里到底有没有商业机会。因为我觉得现在靠软件赚钱比以往任何时候都难——人人都能自己写代码做东西了。第二步是找灵感，去看看 Mobbin，看看别的 app，然后让 AI 写一份 design.md，把你想要的视觉方向定下来。第三步是把产品的几个关键界面做成原型，可以用 Claude Design，也可以用别的 AI 原生工具，Figma、纸和笔或者别的产品都行。

[23:51]

And also, you can ask for variations to get AI to explore and iterate on the strongest one that you like. Like, I'm not a designer, but I think great designers like to diverge and explore before converging on one direction. All right, so once you have the key screens, then you have enough to create an interactive HTML spec. And personally, I use my Spec Scale to create a spec with product design and tech requirements all in one place so that I can easily review them. Once you have the spec go back to Claude design, tell her to actually design all the core screens. It's just much easier to change stuff at this stage than later on where you have a database and everything else. And finally, after you have everything, then you can tell Claude or whatever harness you're using to build the app. And even then, this is not a one-shot build, right? There's a lot of back and forth to make sure that Claude actually follows your directions. Again, I think the big takeaway from all this is to do the planning up front. You may be eager to be like, "Hey, let's get AI to start building something and let's play with it." But I think the more planning that you do, the more high taste and the more high craft, and the more likely you're able to build something that's actually useful that you actually like.

另外，你还可以让它出几个变体，让 AI 多探索几种方向，再挑你最喜欢的那版接着迭代。我不是设计师，但我理解好的设计师都喜欢先发散、多探索，最后再收敛到一个方向。好，关键界面有了之后，你手上的东西就足够写一份可交互的 HTML spec 了。我个人是用我的 spec skill 来生成，把产品、设计和技术需求全放在一份文档里，方便我一次性过完。有了 spec 之后再回到 Claude Design，让它把所有核心界面都设计出来。在这个阶段改东西，比后面数据库那些都建好了再改要容易太多。最后，等这些都齐了，你再让 Claude、或者你在用的任何工具去把 app 建出来。而且就算到这一步也不是一把梭就成，还得来回很多轮，才能确保 Claude 真的按你的要求来。再说一遍，我觉得这一整套流程最大的收获就是：把功夫下在前期规划上。你可能很想赶紧让 AI 开始做点什么、先玩起来，但我认为你前期规划做得越多，做出来的东西品味越好、完成度越高，也越有可能是一个真正有用、你自己也真心喜欢的产品。

[25:04]

All right, so that's it. If you enjoyed this practical tutorial, please like and subscribe for more videos about building useful products with AI. And let me know in the comments, by the way, if you want me to make more videos that show my real process of building with AI instead of just a bunch of hype videos about the latest model. Anyway, thank you so much, and I'll see you next time.

好，今天就到这儿。如果你觉得这期实操教程有用，请点赞订阅，我会继续做「用 AI 做出真正有用的产品」这类视频。另外也欢迎在评论区告诉我，你是不是希望我多做一些展示我真实 AI 工作流程的视频，而不是那种追着最新模型吹的视频。总之，非常感谢，我们下期见。