我用「扣子空间」做了个AI穿搭毒舌网站，快被自己骂哭了～

在公众号原文观看或收听这段内容

👆这是我把文章丢给扣子空间后，一键生成的短播客，你可以试听感受下

没写一行代码，我用「扣子空间」搭了个用AI进行穿搭锐评的网站。下面这效果，快把我骂哭了😂

一边是为网站效果还不错高兴，另外也是觉得我对自己够狠的。

而这个AI网站的生成过程，我其实就发了几句提示词而已，没有写任何的代码，也不需要我自己经历繁琐的项目打包、部署、买域名之类的操作。我觉得很适合不会写代码的同学开始尝试实现自己脑中的想法，去试试创造一个小产品一个小网站的快乐。

效率奇高，过程还毫无障碍。

接下来，给大家介绍下我用「扣子空间」开发这个网站的过程。

如果你还没用过「扣子空间」的话，他们的官网地址在这：https://space.coze.cn/?from=landingpage&skill=website

第一步：选择「网页」模式

目前扣子空间提供通用agent的能力，你完全可以不做选择直接布置一个任务。但是除了通用能力外，我觉得扣子空间比较有特点的是他们在「写作」「PPT」「播客」「网页」这四个场景下做了专项优化。所以，当你的需求很明确，就是要开发一个小网站的时候，可以先选择「网页」，再表述需求，会获得更专业化的体验。

第二步：表述想法/初步测试

因为我想做的是AI网站，涉及到AI能力的调用，现在很多agent产品所使用的网页开发技术框架是html/css/js，不容易实现API的调用，所以我想先试试扣子空间调用API的能力，所以，我先输入了一个简单的需求做测试：

帮我开发一个可以进行图像AI理解的网站，用户上传图片后，返回关于这个图片的所有信息。图片理解模型的调用方式如下：curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \-H "Content-Type: application/json" \-H "Authorization: Bearer 你自己的API-KEY" \-d $'{"model": "doubao-1-5-thinking-vision-pro-250428","messages": [{"content": [{"text": "图片主要讲了什么?","type": "text"},{"image_url": {"url": "https://ark-project.tos-cn-beijing.ivolces.com/images/view.jpeg"},"type": "image_url"}],"role": "user"}]}'

这里我要调用的AI模型是Doubao-1.5-thinking-vision-pro这个视觉理解模型（后来我发现豆包1.6模型其实也有图像理解能力），你可以通过字节的火山方舟平台获取这个API调用方式的信息：https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-1-5-thinking-vision-pro

点击「立即体验」，然后按着指引，获取到以下这段API调用代码并复制使用即可（你自己的API KEY注意做好保密）。

接下来，通过这段提示词，我一次性就获得了下面这个可以进行图像理解的网站👇

试着上传一张图片测试，发现成功了。

第三步：网站优化、测试&改造

想实现的核心能力没问题后，我开始尝试要求扣子空间对网站进行改造，这一步我的提示词是：

非常棒，接下来我想调整这个网站的定位，请保留现在的图像理解API的调用逻辑，为我开发一个名为「花叔穿搭锐评」的网站，用户上传自己的穿搭照片后，系统将调用图像理解模型返回Roast店铺。## 功能结构：1. 网站首页：- 展示标题标语：“上传穿搭照，让AI告诉你有多离谱”。- 提供上传按钮，支持拖拽或点击上传，照片上传限制为每日最多3张。- 显示上传缩略图，并在后台自动启动AI分析流程。- 使用Apple Inc风格的设计，并包含完整的header和footer信息2. 锐评结果展示页：- 显示用户上传照片。- 使用分区式排版清晰呈现评分、排名、点评内容。- 提供“再来一张”按钮，提示剩余上传次数。- 提供结果截图下载或一键生成分享图。3. 上传频率控制：- 限制每位用户每天上传照片不超过3张。- 若超额上传，应弹出提示“今日毒舌额度已满，请明天再来受虐”。4. 交互体验与页面风格：- 网站整体风格现代、俏皮、有趣，融合漫画吐槽感与轻量化审美风。- 上传后进入等待状态时显示文案提示：“AI正在分析你的穿搭，这一身真不容易处理。”- 所有界面支持移动端访问，操作直观清晰。

扣子空间帮我完成了网站风格的改造，除了核心调用AI的逻辑没变之外，可以说完全不是一个网站了。接下来下一步就是尝试继续体验，测试。

比如我发现AI生成的锐评很长，虽然评价效果还不错，但返回的内容是markdown格式的，这么多#和*不太符合我的预期。

但是没关系，你依然可以让AI去调整，我要求如下：

AI返回的评价是markdown格式的，请支持和优化markdown文本的展示效果

以及，我发现扣子空间为AI调用做了个超时取消的机制，导致有时候上传图片等待一段时间后，会出现没有结果就取消了任务的情况。但其实这种情况你也可以简单的用自然语言做如下要求：

去掉超时取消机制，尽可能多等待。

以及，其实除了用自然语言的方式要求AI去修复bug或者更改设计之外，如果你要改的内容就在界面元素上，你也完全可以点击右上角的「编辑」功能，然后选择任何你想要调整的元素进行修改。这种方式下你对细节调整的掌控度会高不少。

如你所见，这么个AI网站就这么水灵灵的在几句自然语言的要求之下完成了。

而且，完成之后，它不止你自己可用，也是可以通过右上角的分享按钮，直接在浏览器中打开这个已经完成部署上线，公网可以访问的链接🔗

比如我这个「花叔穿搭锐评」网站，你就可以现在尝试下...

👉https://space.coze.cn/coding-expert-runtime/136000180482

简单总结下我这个过程的体验，如果你是个新手的话，我确实不建议你想通过一段「魔法」提示词就一次性生成一个超绝的网站。你也不需要这么做，你只需要一步步清晰阐述你的想法，先让「扣子空间」跑一跑代码，等你看到了它为你提供的雏形之后，你再在雏形基础上完善自己的想法， 进一步提要求即可。

我自己做了几次测试后，发现「扣子空间」这个编程搭子的特点是很克制和严谨，它会尽量实现，同时仅实现你表述的需求，可控性很强。但同时这也是要求你要对自己想要实现的网站功能、结构、界面风格等有比较清晰的想法和表达能力。对于设计师和产品经理来说，有扣子空间的帮助去实现自己的设计初稿或产品原型会是如虎添翼的。

不过，如果你不太擅长表达自己对网站界面的要求怎么办？

这又要来说一个「扣子空间」我觉得很绝的功能，就是截图复刻。

在网站开发模式下，你完全可以找一个你想模仿搭建或者学习的网站界面，然后截图让「扣子空间」帮你复刻即可。

比如我截了个图片比较多，很考验AI能力的YouTube首页来给AI上点强度。

而提示词，我只是简单发了个：请帮我生成一个和截图一样的网站

然后，「扣子空间」就帮我把YouTube首页给复刻出来了，实现程度大概80%吧。

让我觉得比较惊讶的是，「扣子空间」甚至把我提供的截图里的视频封面的截图再次给截取下来，作为模仿网站的素材了，真就有点6...

而且，我发现这个上传图片的功能不止可以用来让AI模仿，你也可以把它作为提供素材的方式，比如我给扣子空间传了张我的照片作为头图，它就这么给放上去了

说实话，这个能力可太重要了。

比如，你需要做一个自己的简历页面，或者你要帮公司做一个企业品牌官方、活动官网等等，你总不能让AI随意生图，或者从开源网站找跟你完全无关的照片吧？

通过这种方式，你完全可以控制你要生成的网站上的图片素材资源了，而且，还真就是所见即所得，如此的简单，不需要碰一点代码，纯自然语言实现。

以及，顺便提一嘴，除了使用图片外，设计师完全可以导入Figma设计稿，让扣子空间一次性复刻你的设计。

通过上面两个任务，你大概对「扣子空间」的0代码开发网站的能力有了初步理解，你可以通过自然语言表达你的需求，也可以通过截图，自己画图等方式表达你对网站设计的要求和想法。扣子空间相比很多别的AI编程工具来说，它帮你省了很多工具学习和代码学习的过程，很适合新手上路。

最后再给大家提供个小彩蛋🥚

前几天写的文章里我提到也演示过我自己开发的「打字练习」的网站，但，我确实是有点懒，一直都今天都没把这个本地html网页部署上线。

我觉得让「扣子空间」帮我，从头开始做一个，省去我部署的麻烦，提示词如下：

请为我开发一个支持打字练习与游戏化功能的现代网页应用，网站主题为「打字闯关王」。用户可以通过输入英文句子进行打字练习，并在闯关中逐步提升难度、获得分数、升级角色，提升打字速度与准确率。---📌 网站目标：通过互动练习和游戏化激励机制，帮助用户提升英文打字的速度与准确率。适合学生、职场人士、程序员等使用，具有成就感与沉浸式体验。---🧩 核心功能模块：1. 打字训练主界面：- 页面中间显示一句待打的英文句子，支持从内置句库中随机抽取。- 下方是打字输入框，用户边输入边实时检测是否正确。- 支持高亮当前输入字符、已正确输入字符、错误字符。2. 分数与计时机制：- 每局开始后自动计时（默认时间限制为60秒，或打完即止）。- 每句打完后立即计算得分：速度 + 准确率；- 显示：打字速度（WPM）、正确率（%）、当前分数。3. 游戏化闯关机制：- 设定多个“关卡”，每关词句难度逐渐提升（例如单词长度、标点复杂度、编程术语等）。- 每成功完成一关，将解锁下一关，并显示等级晋升动画（如“Lv.3 打字浪人”）。- 可设置 Boss 关：长句或代码片段挑战，奖励倍增。4. 用户排行榜（可选）：- 本地或在线排行榜，记录用户的最高 WPM、通关等级、总得分；- 排行榜可按“日榜 / 周榜 / 总榜”显示前10名。5. 设置与自定义：- 用户可选择训练模式：- 练习模式（无限时间，计分但无闯关）- 挑战模式（60秒内尽量打更多）- 闯关模式（逐关解锁，得分晋级）- 可切换不同句库类型：- 常用英语- 诗歌/文学名句- 编程术语- 自定义文本6. 音效与视觉反馈：- 正确打字播放轻微键音或提示音；- 错误字符以红色闪烁提示；- 每通关有简单升级动画（如火焰、金币、徽章浮现）。---🎨 UI设计风格建议：- 现代极简风格，整体以深色背景（如夜蓝或碳黑）+ 亮色文字为主；- 字体使用等宽字体（如 JetBrains Mono / Fira Code）增强打字感；- 页面应使用响应式设计，适配桌面和大屏平板；- 提供轻量暗黑模式 + 成就系统图标（如小皇冠、闪电等）。---📈 成就系统（可扩展）：- 设定多个“打字成就”：- 「打完100句」成就- 「WPM超过80」成就- 「0错误通关」成就- 成就系统带图标与文案，鼓励用户持续训练。---请为我完成这个打字练习游戏化网站的完整页面结构设计、核心逻辑与打字交互实现。优先考虑用户体验与反馈节奏。

你可以通过这个链接去试试：https://space.coze.cn/coding-expert-runtime/63682560514

所以，如果你最近脑子里也冒出一个“想做个小网站玩玩”的想法，但又因为不会写代码而打住，不如先试试这个AI搭子。

你可以从一个很轻很简单的想法开始，也可以像我一样，搞点离谱的创意先试试它的极限。

别担心写不来代码，别焦虑从哪开始。

现在是想法落地最容易的时代之一，你要做的，就是开个口，让AI来帮你把那扇门推开🚪

接下来我还打算用「扣子空间」做点别的实验：

比如用它搭一个工具类网站，再比如试试看它能不能搞点更复杂的AI交互流程……等我玩明白了再来更新进度。

如果你也试出来什么好玩的，评论区见～👀🪄

都看到这了，还不关注、点赞、转发一波😉～