DemoDay：新手小白也能做出来的保姆级coding教程

DemoDay：新手小白也能做出来的保姆级coding教程 DemoDay：新手小白也能做出来的保姆级coding教程 Modified February 7 完成后点击屏幕右上角的“发布"按钮 如果这里你有自己的域名可以配置，我们这里直接选择"立即发布" 由于发布应用需要20个积分点数，我们目前只有5个积分点数，我们可以等待到明天积分更新后再完成应用的发布。发布后下次使用或者继续迭代可以点击主页左侧的应用，找到对应的项目后就可以直接使用了。 体验地址： https://app 9e8kr4319rep.appmiaoda.com 当然你也可以借鉴别人优秀的封面： 借鉴 +改造（适合完全没有审美的小白） 1. 先搞清楚什么是“好封面” ◦ 打开你最常看的小红书 / 公众号 ◦ 找 3–5 张你觉得“很想点进去看”的封面截图下来 ◦ 留意：配色是不是高对比、标题是不是占大面积、有没有很强的情绪词。 2. 让ai把这些“好封面”的规则进行分析，然后写进我们的工具里 ◦ 比如： ▪ 小红书用 3:4 竖版，公众号用 2.35:1 横版 ▪ 主标题用粗体大字，占 40–60% 的画面空间 ▪ 配色提供几套：白底黑字、橙底白字、蓝底白字 3. 在秒哒里对 AI 说： ◦ 「我要做一个给小红书 / 公众号创作者用的封面生成器页面，左边是各种选项，右边是预览，底下可以导出 PNG，你帮我先搭一个骨架出来。」 4. 第一版出来后，再说： ◦ 「现在把刚才那几个封面规则写在页面底部，做一个‘封面设计小贴士’模块，告诉用户：比例怎么选、标题要多大、为什么要留白。」 如果你已经有心仪的模板，直接把下面这段话丢给秒哒： 「我有一套自用的封面审美标准：1. 比例 3:4；2. 标题占画面 50% 以上；3. 亮色背景+黑字。请帮我做一个简单的工具，左侧填标题、选配色，右侧实时预览并支持导出 PNG。」 写在最后： 很多人说 AI 会取代人，但其实 AI 只是缩短了“想到”与“做到”之间的距离。 这个封面工具可能只要 1 小时就能打磨出来，但它为你省下的，是未来一年成百上千次的作图时间。这一次性投入，永久性白嫖的自动化思维，才是我们学习秒哒的真正意义。 如果你在制作过程中遇到任何 Bug，欢迎在评论区留言，我们一起调教它！ 三、豆包：做各类小游戏 作者：507 简易科普 大家在接触 vibe coding 之前想象的 coding 是怎样的呢？是满脸胡渣黑框眼镜的程序员坐在电脑前？还是为了修改 bug 不断掉头发？ 其实coding 真的没这么可怕，尤其是现在 AI 已经进化到可以作为你 vibe coding 的助手的情况下 这次我们就用大家相对熟悉的豆包举例，来让大家尝试一下如何vibe coding～ 在开始之前我们需要了解的一些信息： 豆包 • 豆包是字节跳动推出的智能对话助手，基于先进的人工智能技术开发。 • 你可以和豆包聊天交流，分享心情、讨论话题，它会耐心倾听并回应。 • 豆包还能创作文案、编写代码、生成创意内容，是你的智能小帮手。 提示词工程（提示词优化） • 是指通过精心设计和优化输入给AI模型的文本提示，来引导模型生成更准确、更符合需求的输出。 • 简单来说，就是学习如何"问"AI，让它更好地"答"。 • 好的提示词能让AI理解你的意图，减少错误，提高效率。 • 它是连接人类需求和AI能力的重要桥梁，让AI更好地为人类服务。 为什么我们要懂？ 前者是介绍我们工具是什么，后者则是告诉我们，我们如果想通过工具来制作我们想要的应用/产品/网站该怎么做。 应该怎么做第一个应用？ 打开豆包 如果没有登录，请点右上角登录 我们可以把我们需求（例如我需要建立一个个人网站）输入到对话框里 点击右下角的按钮，我们就可以生成我们的第一个应用啦！ 提示词优化极速上手技巧 很好，看到这里，相信你已经是尝试过让豆包帮你做过一些小东西，那么我们进阶版会教你什么呢？ 提示词优化！ 或许你也会发现了，豆包似乎有时候不太理解我们的需求。例如让它做 A 功能，可能做着做着最后发现它做的是 B 功能。这是为什么呢？我认为原因很简单：就是 AI 它没有很好的理解你的需求点。 那么我们可以通过先跟 AI 进行对话来让它先帮你梳理你的需求。例如还是建立一个个人网站。 你好，我想通过 AI 创建一个自己的个人网站，我想要合适的提示词，请问我应该要注意什么内容，我想和你探讨一下，谢谢！ 完成后点击屏幕右上角的“发布"按钮 如果这里你有自己的域名可以配置，我们这里直接选择"立即发布" 由于发布应用需要20个积分点数，我们目前只有5个积分点数，我们可以等待到明天积分更新后再完成应用的发布。发布后下次使用或者继续迭代可以点击主页左侧的应用，找到对应的项目后就可以直接使用了。 体验地址： https://app 9e8kr4319rep.appmiaoda.com 当然你也可以借鉴别人优秀的封面： 借鉴 +改造（适合完全没有审美的小白） 1. 先搞清楚什么是“好封面” ◦ 打开你最常看的小红书 / 公众号 ◦ 找 3–5 张你觉得“很想点进去看”的封面截图下来 ◦ 留意：配色是不是高对比、标题是不是占大面积、有没有很强的情绪词。 ◦ 打开你最常看的小红书 / 公众号 ◦ 找 3–5 张你觉得“很想点进去看”的封面截图下来 ◦ 留意：配色是不是高对比、标题是不是占大面积、有没有很强的情绪词。 2. 让ai把这些“好封面”的规则进行分析，然后写进我们的工具里 ◦ 比如： ▪ 小红书用 3:4 竖版，公众号用 2.35:1 横版 ▪ 主标题用粗体大字，占 40–60% 的画面空间 ▪ 配色提供几套：白底黑字、橙底白字、蓝底白字 ◦ 比如： ▪ 小红书用 3:4 竖版，公众号用 2.35:1 横版 ▪ 主标题用粗体大字，占 40–60% 的画面空间 ▪ 配色提供几套：白底黑字、橙底白字、蓝底白字 ▪ 小红书用 3:4 竖版，公众号用 2.35:1 横版 ▪ 主标题用粗体大字，占 40–60% 的画面空间 ▪ 配色提供几套：白底黑字、橙底白字、蓝底白字 3. 在秒哒里对 AI 说： ◦ 「我要做一个给小红书 / 公众号创作者用的封面生成器页面，左边是各种选项，右边是预览，底下可以导出 PNG，你帮我先搭一个骨架出来。」 ◦ 「我要做一个给小红书 / 公众号创作者用的封面生成器页面，左边是各种选项，右边是预览，底下可以导出 PNG，你帮我先搭一个骨架出来。」 4. 第一版出来后，再说： ◦ 「现在把刚才那几个封面规则写在页面底部，做一个‘封面设计小贴士’模块，告诉用户：比例怎么选、标题要多大、为什么要留白。」 ◦ 「现在把刚才那几个封面规则写在页面底部，做一个‘封面设计小贴士’模块，告诉用户：比例怎么选、标题要多大、为什么要留白。」 如果你已经有心仪的模板，直接把下面这段话丢给秒哒： 「我有一套自用的封面审美标准：1. 比例 3:4；2. 标题占画面 50% 以上；3. 亮色背景+黑字。请帮我做一个简单的工具，左侧填标题、选配色，右侧实时预览并支持导出 PNG。」 「我有一套自用的封面审美标准：1. 比例 3:4；2. 标题占画面 50% 以上；3. 亮色背景+黑字。请帮我做一个简单的工具，左侧填标题、选配色，右侧实时预览并支持导出 PNG。」 写在最后： 很多人说 AI 会取代人，但其实 AI 只是缩短了“想到”与“做到”之间的距离。 这个封面工具可能只要 1 小时就能打磨出来，但它为你省下的，是未来一年成百上千次的作图时间。这一次性投入，永久性白嫖的自动化思维，才是我们学习秒哒的真正意义。 如果你在制作过程中遇到任何 Bug，欢迎在评论区留言，我们一起调教它！ 三、豆包：做各类小游戏 作者：507 简易科普 大家在接触 vibe coding 之前想象的 coding 是怎样的呢？是满脸胡渣黑框眼镜的程序员坐在电脑前？还是为了修改 bug 不断掉头发？ 其实coding 真的没这么可怕，尤其是现在 AI 已经进化到可以作为你 vibe coding 的助手的情况下 这次我们就用大家相对熟悉的豆包举例，来让大家尝试一下如何vibe coding～ 在开始之前我们需要了解的一些信息： 豆包 • 豆包是字节跳动推出的智能对话助手，基于先进的人工智能技术开发。 • 你可以和豆包聊天交流，分享心情、讨论话题，它会耐心倾听并回应。 • 豆包还能创作文案、编写代码、生成创意内容，是你的智能小帮手。 提示词工程（提示词优化） • 是指通过精心设计和优化输入给AI模型的文本提示，来引导模型生成更准确、更符合需求的输出。 • 简单来说，就是学习如何"问"AI，让它更好地"答"。 • 好的提示词能让AI理解你的意图，减少错误，提高效率。 • 它是连接人类需求和AI能力的重要桥梁，让AI更好地为人类服务。 为什么我们要懂？ 前者是介绍我们工具是什么，后者则是告诉我们，我们如果想通过工具来制作我们想要的应用/产品/网站该怎么做。 应该怎么做第一个应用？ 打开豆包 如果没有登录，请点右上角登录 我们可以把我们需求（例如我需要建立一个个人网站）输入到对话框里 点击右下角的按钮，我们就可以生成我们的第一个应用啦！ 提示词优化极速上手技巧 很好，看到这里，相信你已经是尝试过让豆包帮你做过一些小东西，那么我们进阶版会教你什么呢？ 提示词优化！ 或许你也会发现了，豆包似乎有时候不太理解我们的需求。例如让它做 A 功能，可能做着做着最后发现它做的是 B 功能。这是为什么呢？我认为原因很简单：就是 AI 它没有很好的理解你的需求点。 那么我们可以通过先跟 AI 进行对话来让它先帮你梳理你的需求。例如还是建立一个个人网站。 你好，我想通过 AI 创建一个自己的个人网站，我想要合适的提示词，请问我应该要注意什么内容，我想和你探讨一下，谢谢！ 你好，我想通过 AI 创建一个自己的个人网站，我想要合适的提示词，请问我应该要注意什么内容，我想和你探讨一下，谢谢！ 以上的内容也可以直接复制到豆包里面运行就可以生成一个小游戏啦，但如果那么如果我们想做点不一样的呢？ 拆解提示词模块： 我们根据上面的内容可以提炼出来其中的一些核心提示词模块是什么： 星际战机游戏 提示词： 拆解提示词模块： 数独游戏 提示词： 拆解提示词模块： 如果你还想了解更多 欢迎来到我们的主站进行进一步的学习！ ⚡ 第四期：Vibe Coding实战训练营 507：用 AI 做一个对话 AI 记录的日记 ​ 第四期：Vibe Coding实战训练营 507：用 AI 做一个对话 AI 记录的日记 第四期：Vibe Coding实战训练营 ​ 第四期：Vibe Coding实战训练营 507：用 AI 做一个对话 AI 记录的日记 507：用 AI 做一个对话 AI 记录的日记 四、GEMINI：做简易的小网页、好看的前端应用 作者：李奕凡 No access GEMINI使用教程.pdf No access GEMINI使用教程.pdf 🏆 看了这么多，我相信你已经想好了接下来自己要做的方向，快来动手coding起来吧～ 看了这么多，我相信你已经想好了接下来自己要做的方向，快来动手coding起来吧～ ⛳ 各位DemoDay的小伙伴好，现场是不是也会存在一些之前从来没有coding过的新手小白呢？ 不用担心～～ 在这里我们也为大家准备了非常详细的保姆级小白coding教程， 有以下四种工具，分别是：KIMI、秒哒、豆包、gemini，都是可以开箱即用的。 大家任选一种感兴趣的就可以上手实操啦🎉 各位DemoDay的小伙伴好，现场是不是也会存在一些之前从来没有coding过的新手小白呢？ 不用担心～～ 在这里我们也为大家准备了非常详细的保姆级小白coding教程， 有以下四种工具，分别是：KIMI、秒哒、豆包、gemini，都是可以开箱即用的。 大家任选一种感兴趣的就可以上手实操啦🎉 一、kimi：做地图可视化、数据看板网页 作者茉茉桃：Kimi K2.5做地图可视化 本文旨在给大家一些灵感，用于参加线下的比赛，不需要各种复杂编程工具，直接与AI对话即可生成网页。 打开Kimi官网：Kimi AI 官网 K2.5 上线 直接按照案例中的模型与提示词开始对话 Kimi AI 官网 K2.5 上线 案例1：爸爸妈妈我想你们了 模型：K2.5 思考 提示词： 🐵 快过年了，我想爸爸妈妈了，我想制作一个中国地图，标出我与妈妈的距离，然后使用飞线链接两个点，地图使用Echarts的地图组件，然后再加上一段话，表达我对爸爸妈妈的思念，结果输出为一个html页面 快过年了，我想爸爸妈妈了，我想制作一个中国地图，标出我与妈妈的距离，然后使用飞线链接两个点，地图使用Echarts的地图组件，然后再加上一段话，表达我对爸爸妈妈的思念，结果输出为一个html页面 关键词： 👍 中国地图，使用飞线，Echarts的地图组件，输出一个html页面 中国地图，使用飞线，Echarts的地图组件，输出一个html页面 对话链接： 点击链接查看和 Kimi 的对话 https://www.kimi.com/share/19c22948 5472 890b 8000 0000f8c92735 预览网页： 在对话框中点击生成的html代码右上方的预览即可在线查看网页。 最终效果 案例2：我的足迹，点亮地图 模型：K2.5 思考 初始提示词： 🐵 我想做一个地图展示我去过的城市，使用Echarts的地图组件，去过的城市所在省份会变色，这样我去过的地方都会被点亮，输出一个html文件。我去过的城市有，北京 沈阳 邢台 大同 深圳 广州 成都 武汉 我想做一个地图展示我去过的城市，使用Echarts的地图组件，去过的城市所在省份会变色，这样我去过的地方都会被点亮，输出一个html文件。我去过的城市有，北京 沈阳 邢台 大同 深圳 广州 成都 武汉 关键词： 👍 使用Echarts的地图组件，去过的地方都会被点亮，输出一个html文件 使用Echarts的地图组件，去过的地方都会被点亮，输出一个html文件 过程提示词： 有些BUG，发现去过的省份并没有被点亮，于是直接对话让kimi修改！ 👍 这几个点之间不要飞线连接，因为他们没有关系，另外去过的城市所在省份变亮 这几个点之间不要飞线连接，因为他们没有关系，另外去过的城市所在省份变亮 🍰 没有点亮！现在所有板块都是一个颜色！！！给我改！！！ 没有点亮！现在所有板块都是一个颜色！！！给我改！！！ 对话链接： 点击链接查看和 Kimi 的对话 https://www.kimi.com/share/19c22cdd 5232 86b2 8000 0000012e1f18 总结 你会发现，只要你说明白了，不需要自己写代码，AI就可生成你想要的东西。 案例3：公司销售额数据看板 模型：K2.5 Agent K2.5 Agent 对比 K2.5 思考，可以做更复杂的页面以及功能，最后还可以有一个公网链接。不过是有额度的。 初始提示词： ⛱️ 我想做一个关于公司在北京各个区的销售额，通过Echarts的地图组件，销售额越大则区域颜色越深，销售额：东城区 100W 西城区 30W 海淀区 66W 朝阳区 88W 昌平区 35W 大兴区 55W 丰台区 66W 其他区0W，另外左侧需要一个TOP5销售额排名，输出一个html页面 我想做一个关于公司在北京各个区的销售额，通过Echarts的地图组件，销售额越大则区域颜色越深，销售额：东城区 100W 西城区 30W 海淀区 66W 朝阳区 88W 昌平区 35W 大兴区 55W 丰台区 66W 其他区0W，另外左侧需要一个TOP5销售额排名，输出一个html页面 过程提示词： 第一版完成后发现地图没出来 🎼 你在逗我玩吗？我要看的是北京地图，请你认真对待！你使用Echarts了嘛？为什么出来的板块都是方块 你在逗我玩吗？我要看的是北京地图，请你认真对待！你使用Echarts了嘛？为什么出来的板块都是方块 通过上方图片你会发现Agent功能更强，因为他背后会在云端有个虚拟机跑，可以自动排查修改错误。左上方还可以查看各个版本记录，v2版本地图成功加载。 美化 V2版本已经达到了我们的要求，不过我想让他变得更好看点。 📚 太白了，我想要一个科技感的配色，放在我公司的大屏上，让领导一眼就能喜欢 太白了，我想要一个科技感的配色，放在我公司的大屏上，让领导一眼就能喜欢 哈哈哈！这下舒服了！ 发现BUG！ V3版本美化以后，我在访问公网链接的时候，发现地图有时能加载出来有时加载不出来。 这时你需要点击F12打开开发者工具中的控制台(Console),发现有红色报错，看不懂没关系，右键红色区域选择Copy console，然后将报错信息发给AI，让他改就行 ⛱️ /favicon.ico:1 Failed to load resource: the server responded with a status of 404 () raw.githubusercontent.com/yhdjyyzk/GeoJSON data/master/%E7%9C%81%E5%B8%82%E5%9C%B0%E5%9B%BE/beijing.json:1 Failed to load resource: net::ERR CONNECTION CLOSED index BQnjEuLZ.js:50 加载地图数据失败: TypeError: Failed to fetch at index BQnjEuLZ.js:47:102932 at Ic (index BQnjEuLZ.js:8:93227) at JM (index BQnjEuLZ.js:8:108531) at vn (index BQnjEuLZ.js:8:108415) at JM (index BQnjEuLZ.js:8:109297) at vn (index BQnjEuLZ.js:8:108415) at JM (index BQnjEuLZ.js:8:108577) at xD (index BQnjEuLZ.js:8:121753) at index BQnjEuLZ.js:8:119062 at MessagePort.P (index BQnjEuLZ.js:1:10619) (anonymous) @ index BQnjEuLZ.js:50 报错了 给我改！ raw.githubusercontent.com/yhdjyyzk/GeoJSON data/master/%E7%9C%81%E5%B8%82%E5%9C%B0%E5%9B%BE/beijing.json:1 /favicon.ico:1 Failed to load resource: the server responded with a status of 404 () raw.githubusercontent.com/yhdjyyzk/GeoJSON data/master/%E7%9C%81%E5%B8%82%E5%9C%B0%E5%9B%BE/beijing.json:1 Failed to load resource: net::ERR CONNECTION CLOSED raw.githubusercontent.com/yhdjyyzk/GeoJSON data/master/%E7%9C%81%E5%B8%82%E5%9C%B0%E5%9B%BE/beijing.json:1 index BQnjEuLZ.js:50 加载地图数据失败: TypeError: Failed to fetch at index BQnjEuLZ.js:47:102932 at Ic (index BQnjEuLZ.js:8:93227) at JM (index BQnjEuLZ.js:8:108531) at vn (index BQnjEuLZ.js:8:108415) at JM (index BQnjEuLZ.js:8:109297) at vn (index BQnjEuLZ.js:8:108415) at JM (index BQnjEuLZ.js:8:108577) at xD (index BQnjEuLZ.js:8:121753) at index BQnjEuLZ.js:8:119062 at MessagePort.P (index BQnjEuLZ.js:1:10619) (anonymous) @ index BQnjEuLZ.js:50 报错了 给我改！ 你看不懂没关系，AI能看懂，他会根据这些报错信息进行修改。 最终在V6版本修改完成，可查看下方对话链接了解详情。注意每次对话会消耗一个Agent额度。 对话链接： 点击链接查看和 Kimi 的对话 https://www.kimi.com/share/19c23120 1342 8f1a 8000 000068fa69d1 体验链接： https://qusdmhui6n6c2.ok.kimi.link 总结： 以上三个案例都是通过Kimi官网直接生成，前两个使用K2.5 思考模式生成简单页面，第三个使用Agent模式生成可公网访问的网页，你可以发现我都是通过自然语言去描述我的需求，Vibe Coding就是这样，说着说着东西就出来了（也可能会生点小气）,祝你顺利做出自己想要的东西。 二、秒哒：通过对话式开发，制作第一个网页小工具！ 作者：一辉 官方文档： 详解：百度秒哒 ​ 详解：百度秒哒 第一部分：平台与理念介绍 什么是秒哒？ 秒哒（MIAODA） 是百度推出的国内首个对话式生成式应用开发平台，主打"零门槛"应用开发。 核心特点： 适用场景： • ✅ 个人作品集、名片页 • ✅ 活动报名H5、宣传页 • ✅ 小工具（计算器、生成器、导航页） • ✅ 简单的企业展示站 • ✅ 内容创作辅助工具（今天我们做的封面生成器） 官方文档：https://cloud.baidu.com/doc/MIAODA/s/Sm88db6er 第二部分：今天到底在学什么？ 很多人一听到「做网站、做工具」就紧张： 我不会代码 我不懂前端 我只会刷抖音和小红书 这节课我们不教你写代码，教你一件事：怎么用嘴 + 鼠标，就把一个想法变成能用的小工具。 你可以把这套方式理解成： 和一个很听话、很懂技术的同事聊天，让他帮你干活。 这个聊天式做产品的方式，就叫 Vibe Coding。 先搞清楚：Vibe Coding 是怎么“干活”的？ 可以理解为： 传统编程：我写代码，电脑执行。 Vibe Coding：我讲需求，AI 写代码，我只负责说“好/不好，哪里需要再改”。 传统编程：我写代码，电脑执行。 Vibe Coding：我讲需求，AI 写代码，我只负责说“好/不好，哪里需要再改”。 它真正的流程，其实只有 4 步： 先说清楚你要什么结果 例： 「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」 例： 「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」 「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」 再说清楚要分几块 例： 「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」 例： 「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」 「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」 让 AI 先给你一个「第一版」 不用纠结好不好看，只问一句：结构对不对，大方向对不对。 不用纠结好不好看，只问一句：结构对不对，大方向对不对。 之后就一直复读： 「这个挪上去」 「标题再大一点」 「按钮改成黑底白字」 「导出按钮点了要弹出下载框」 「这个挪上去」 「标题再大一点」 「按钮改成黑底白字」 「导出按钮点了要弹出下载框」 你可以把它想象成： 你 = 产品 + 运营 + 审稿 AI = 一整个外包开发团队 第三部分：秒哒对小白来说，长什么样、干什么用？ 如果你把 Vibe Coding 当成「聊天写代码」，那 秒哒 就是帮你把这场聊天，直接变成能点、能用的网页 / H5 工具的平台。 对小白来说，秒哒只需要记住 3 个位置： 对话区 就是你跟「AI 开发团队」说话的地方。 所有“我要做什么”的话，都在这里说。 预览区 你做出来的小工具长什么样，就在这里看。 按钮在不在、字多不多、布局顺不顺眼，一眼看出来。 你做出来的小工具长什么样，就在这里看。 按钮在不在、字多不多、布局顺不顺眼，一眼看出来。 发布/链接 当你觉得“差不多能用了”，点一下发布，就能拿到一个链接 / 二维码，别人也能打开用。 当你觉得“差不多能用了”，点一下发布，就能拿到一个链接 / 二维码，别人也能打开用。 第四部分：内容选题 你刷抖音、小红书、公众号，永远避不开一个东西：封面图 + 标题。 但是普通创作者的真实困境是： 不会设计 不知道什么是「高点击率封面」 每次做图都要折腾半天,所以本次我们就尝试用秒哒来完成一个大字报封面生成器 第一步 首先描述你的需求，尽可能给出完整的需求，把你脑海中工具的外观风格，哪些功能，技术架构等都可以详细写下来给AI充足的信息 将自己的需求发送给Deepseek，豆包等ai工具，让ai先帮我们输出一份更细致的PRD文档，然后查看ai输出的文档内容是否满意，是否需要修改。 这是我输入的需求内容： 我是一个自媒体创作者，想制作一个解决封面设计繁琐的小工具，用于小红书和微信公众号的大字报风格的封面设计，请帮我用「原生 HTML + CSS + 少量原生 JavaScript」实现一个「封面设计生成器」小工具，用于生成小红书和公众号的情绪抓手式封面文案预览，左侧是风格选择，自定义文本等功能的操作面板，右侧是预览面板，具备png格式导出功能。请基于上述需求帮我输出一份prd文档 我是一个自媒体创作者，想制作一个解决封面设计繁琐的小工具，用于小红书和微信公众号的大字报风格的封面设计，请帮我用「原生 HTML + CSS + 少量原生 JavaScript」实现一个「封面设计生成器」小工具，用于生成小红书和公众号的情绪抓手式封面文案预览，左侧是风格选择，自定义文本等功能的操作面板，右侧是预览面板，具备png格式导出功能。请基于上述需求帮我输出一份prd文档 这是Deepseek返回的PRD文档： cover generator/ ├── index.html 主页面 ├── style.css 样式文件 ├── script.js 主逻辑文件 ├── fonts/ 字体文件 │ ├── font1.woff2 │ ├── font2.woff2 │ └── font3.woff2 ├── icons/ 图标资源 │ ├── arrow.svg │ ├── star.svg │ └── heart.svg └── textures/ 纹理背景 ├── texture1.png ├── texture2.png └── texture3.png 第二步 打开秒哒 秒哒 在对话框中重点粘贴『功能需求』和『技术实现方案』部分，这样 AI 理解最快，风格根据自己的喜好来选择，这里我们选择“森系自然"然后点击提交。 那么恭喜你，你只要这么做了，你就已经踏入了提示词优化的大门！ 例子拆解 当你已经学会了提示词怎么写之后，我接下来通过一些例子的拆解来让大家快速上手以便制作更精美的内容： 红楼2048游戏 提示词： PS:目前秒哒运行时会先生成需求文档，我们可以直接跳过第一步，直接将需求发送给秒哒，秒哒会自动输出需求文档 秒哒 然后确认文档内容和你的需求一致点击立即生成应用，不满意可以点击编辑需求文档进行修改，这里我们 点击“立即生成应用” 然后等待页面生成 第一版的页面此时已经生成，接下来我们开始功能的检查，查看每个功能是否正常，然后提你的修改需求，不满意的地方都可以罗列出来让秒哒来帮我们修改 这里我遇到了一些不理想的地方例如： 导出的PNG图片文字挤在一起和预览时不一样 错误示范： “图片不对，改一下。” 正确示范： “【具体模块】+【目前问题】+【期望效果】。 例如：导出按钮在手机端被遮挡了，请将其固定在屏幕底部并加上 20px 的边距。” 整理我们需要优化的点，清晰罗列出来必要时可以发送截图让ai了解具体的需求点，发送给给秒哒 1.预览图片和点击导出PNG封面按钮后输出的图片不一致，输出的图片文字内容较拥挤，这是图片： 2.加入图片导入的功能，同时需要可以控制图片的透明度，大小，位置等功能 3.小红