​⛳各位DemoDay的小伙伴好，现场是不是也会存在一些之前从来没有coding过的新手小白呢？​不用担心～～​在这里我们也为大家准备了非常详细的保姆级小白coding教程，​有以下四种工具，分别是：KIMI、秒哒、豆包、gemini，都是可以开箱即用的。​大家任选一种感兴趣的就可以上手实操啦🎉​​

各位DemoDay的小伙伴好，现场是不是也会存在一些之前从来没有coding过的新手小白呢？​

不用担心～～​

在这里我们也为大家准备了非常详细的保姆级小白coding教程，​

有以下四种工具，分别是：KIMI、秒哒、豆包、gemini，都是可以开箱即用的。​

大家任选一种感兴趣的就可以上手实操啦🎉​

一、kimi：做地图可视化、数据看板网页​

作者茉茉桃：Kimi K2.5做地图可视化​

本文旨在给大家一些灵感，用于参加线下的比赛，不需要各种复杂编程工具，直接与AI对话即可生成网页。​

打开Kimi官网：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:1Failed 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​​

/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:1Failed 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​

报错了 给我改！​

你看不懂没关系，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 写代码，我只负责说“好/不好，哪里需要再改”。​​

它真正的流程，其实只有 4 步：​

先说清楚你要什么结果​例：​「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」​

例：​「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」​

「我想做一个给小红书/公众号创作者用的封面生成小工具，5 分钟帮我出一个高点击率的封面方案。」​

再说清楚要分几块​例：​「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」​

例：​「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」​

「左边是各种选项按钮：平台、配色、文案风格；右边是预览图，下面有导出按钮。」​

让 AI 先给你一个「第一版」​不用纠结好不好看，只问一句：结构对不对，大方向对不对。​

不用纠结好不好看，只问一句：结构对不对，大方向对不对。​

之后就一直复读：​「这个挪上去」​「标题再大一点」​

「这个挪上去」​

「标题再大一点」​

「按钮改成黑底白字」​

「导出按钮点了要弹出下载框」​

你可以把它想象成：​

你 = 产品 + 运营 + 审稿​

AI = 一整个外包开发团队​

---

第三部分：秒哒对小白来说，长什么样、干什么用？​

如果你把 Vibe Coding 当成「聊天写代码」，那秒哒就是帮你把这场聊天，直接变成能点、能用的网页 / H5 工具的平台。​

对小白来说，秒哒只需要记住 3 个位置：​

对话区​就是你跟「AI 开发团队」说话的地方。​所有“我要做什么”的话，都在这里说。​

就是你跟「AI 开发团队」说话的地方。​

所有“我要做什么”的话，都在这里说。​

预览区​你做出来的小工具长什么样，就在这里看。​按钮在不在、字多不多、布局顺不顺眼，一眼看出来。​​附件不支持打印​

你做出来的小工具长什么样，就在这里看。​

按钮在不在、字多不多、布局顺不顺眼，一眼看出来。​

发布/链接​当你觉得“差不多能用了”，点一下发布，就能拿到一个链接 / 二维码，别人也能打开用。​​附件不支持打印​

当你觉得“差不多能用了”，点一下发布，就能拿到一个链接 / 二维码，别人也能打开用。​

---

第四部分：内容选题​

你刷抖音、小红书、公众号，永远避不开一个东西：封面图 + 标题。​

但是普通创作者的真实困境是：​

不会设计​

不知道什么是「高点击率封面」​

每次做图都要折腾半天,所以本次我们就尝试用秒哒来完成一个大字报封面生成器​

第一步​

首先描述你的需求，尽可能给出完整的需求，把你脑海中工具的外观风格，哪些功能，技术架构等都可以详细写下来给AI充足的信息​

​

将自己的需求发送给Deepseek，豆包等ai工具，让ai先帮我们输出一份更细致的PRD文档，然后查看ai输出的文档内容是否满意，是否需要修改。​

这是我输入的需求内容：​

​我是一个自媒体创作者，想制作一个解决封面设计繁琐的小工具，用于小红书和微信公众号的大字报风格的封面设计，请帮我用「原生 HTML + CSS + 少量原生 JavaScript」实现一个「封面设计生成器」小工具，用于生成小红书和公众号的情绪抓手式封面文案预览，左侧是风格选择，自定义文本等功能的操作面板，右侧是预览面板，具备png格式导出功能。请基于上述需求帮我输出一份prd文档​​​

这是Deepseek返回的PRD文档：​

# 封面设计生成器PRD文档
## 1. 项目概述
### 1.1 产品名称
「封面设计生成器」- 小红书 & 微信公众号大字报风格封面制作工具
### 1.2 产品定位
为自媒体创作者提供快速生成情绪抓手式封面的轻量级在线工具，解决封面设计繁琐问题。
### 1.3 目标用户
- 小红书内容创作者
- 微信公众号运营者
- 需要快速制作视觉封面的自媒体人
### 1.4 核心价值
- 节省封面设计时间，从30分钟缩短至3分钟
- 无需设计基础，一键生成专业级封面
- 支持PNG格式导出，适配各平台尺寸要求

第二步​

打开秒哒​

在对话框中重点粘贴『功能需求』和『技术实现方案』部分，这样 AI 理解最快，风格根据自己的喜好来选择，这里我们选择“森系自然"然后点击提交。​

PS:目前秒哒运行时会先生成需求文档，我们可以直接跳过第一步，直接将需求发送给秒哒，秒哒会自动输出需求文档​

然后确认文档内容和你的需求一致点击立即生成应用，不满意可以点击编辑需求文档进行修改，这里我们​

点击“立即生成应用”​

然后等待页面生成​

第一版的页面此时已经生成，接下来我们开始功能的检查，查看每个功能是否正常，然后提你的修改需求，不满意的地方都可以罗列出来让秒哒来帮我们修改​

这里我遇到了一些不理想的地方例如：​

导出的PNG图片文字挤在一起和预览时不一样​

错误示范：“图片不对，改一下。”​

正确示范：“【具体模块】+【目前问题】+【期望效果】。​

例如：导出按钮在手机端被遮挡了，请将其固定在屏幕底部并加上 20px 的边距。”​

整理我们需要优化的点，清晰罗列出来必要时可以发送截图让ai了解具体的需求点，发送给给秒哒​

​1.预览图片和点击导出PNG封面按钮后输出的图片不一致，输出的图片文字内容较拥挤，这是图片：​2.加入图片导入的功能，同时需要可以控制图片的透明度，大小，位置等功能​3.小红书模式下正常显示的图片预览内容切换到公众号模式后无法正常预览到文字内容，只能看到背景​4.保存预设后，优化弹窗设计，在系统预设下方显示自定义的预设点击后可以复用之前保存的设置模板​​

修改完成后我们再次进行测试，先重点检查之前修改的部分，查看是否完成了修复，否则我们就需要继续处理​

例如这次我们导出PNG图片后发现，tag部分和预览时不一致，预览时是居中的，输出后则是在边框底部，我们就将这个问题继续反馈给秒哒​

然后重复这个过程，将每次新页面中遇到的问题，罗列出来必要时配图或者展开讲解你所期望的功能，发送给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.在秒哒里对 AI 说：​◦「我要做一个给小红书 / 公众号创作者用的封面生成器页面，左边是各种选项，右边是预览，底下可以导出 PNG，你帮我先搭一个骨架出来。」​

• ◦「我要做一个给小红书 / 公众号创作者用的封面生成器页面，左边是各种选项，右边是预览，底下可以导出 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更好地为人类服务。​

为什么我们要懂？​

前者是介绍我们工具是什么，后者则是告诉我们，我们如果想通过工具来制作我们想要的应用/产品/网站该怎么做。​

应该怎么做第一个应用？​

打开豆包​

如果没有登录，请点右上角登录​

我们可以把我们需求（例如我需要建立一个个人网站）输入到对话框里​

点击右下角的按钮，我们就可以生成我们的第一个应用啦！​

提示词优化极速上手技巧​

很好，看到这里，相信你已经是尝试过让豆包帮你做过一些小东西，那么我们进阶版会教你什么呢？​

提示词优化！​

那么恭喜你，你只要这么做了，你就已经踏入了提示词优化的大门！​

例子拆解​

当你已经学会了提示词怎么写之后，我接下来通过一些例子的拆解来让大家快速上手以便制作更精美的内容：​

红楼2048游戏​

提示词：​

红楼2048游戏完整设计规范
美术风格与背景设计
- 整体风格：传统中国水墨画风 + 现代简约UI，营造"古雅而不古板"的游戏氛围
- 色彩体系：黑色和白色
- 背景：水墨山水/翠竹背景（1920像素×1080像素 生成图片）：黑白风格、远山如黛、竹林疏影、水面留白，背景图片上叠加一层透明度为50%白色蒙版
游戏界面布局
- 主标题区（位于游戏顶部）：红楼戏园2048"（毛笔字体） 无底纹，主标题右上方有朱红方印："石记"（毛笔字体）
- 游戏棋盘位于游戏中部：正方形设计、黑色底、黑色边框、白色内边框，棋子边框都为圆角设计（棋子是白色的），内填充人物形象和人物姓名，棋盘左下角显示"当前赢银"（白色字体），右下角显示"最高殊荣"（白色字体）的分数区域
- 游戏棋盘右侧自定义区：（黑白配色、玻璃质感，响应式布局，和棋盘顶部对齐且高度一致）
游戏棋盘右侧自定义区：（黑白配色、玻璃质感，响应式布局，和棋盘顶部对齐且高度一致）
标题："潇湘馆画案"
人物下拉选择（默认菜单收起，展开后可以看到2-2048的所有人物，一次只可选择一位人物） + 被选择任务的预览区域
上传提示："点此研墨作画，建议上传1:1比例图片"
按钮："复原描摹"
Q版人物生成要求：
- "Q版[人物名]，中国古典美人，水墨画风格，简约线条，

以上的内容也可以直接复制到豆包里面运行就可以生成一个小游戏啦，但如果那么如果我们想做点不一样的呢？​

拆解提示词模块：​

我们根据上面的内容可以提炼出来其中的一些核心提示词模块是什么：​

# 红楼2048游戏设计规范模块概述
## 一、美术风格与背景设计模块
**目的与作用**：定义游戏的整体视觉基调，确保画面风格统一且符合《红楼梦》的古典意境。通过黑白水墨画风格营造"古雅而不古板"的氛围，背景叠加白色蒙版既保持画面美感又确保游戏元素的清晰可读性。

星际战机游戏​

提示词：​

请创建一个视觉效果出色的太空战机游戏网页，具有以下特点：
1. 游戏核心机制：
   - 玩家控制太空战机在屏幕上移动，射击来袭的敌机
   - 多种类型敌机（基础型、快速型、重型），具有不同属性和外观
   - 道具系统：三向子弹（增强火力）和能量护盾（防御一次攻击）
   - 关卡升级机制，难度随关卡提升
   - 成就系统，包括"第一滴血"、"生存者"等至少5种成就
2. 视觉与动画要求：
   - 深色太空主题，搭配动态星空背景
   - 战机、敌机和道具需有发光效果和细节设计
   - 爆炸效果要有层次感和粒子飞溅效果
   - 所有UI元素（按钮、提示框）使用玻璃态设计
   - 加入流畅的过渡动画和微交互

拆解提示词模块：​

# 太空战机游戏设计规范模块概述

数独游戏​

提示词：​

请设计一个具有魔法风格的精美数独游戏网页应用，具体要求如下：
1. 核心玩法：标准9x9数独，遵循数独基本规则（每行、每列、每个3x3区块包含1-9的所有数字）
2. 视觉设计：
   - 采用魔法主题风格，包括复古羊皮纸背景、金色（#D4AF37）装饰元素和神秘深色基调
   - 数独棋盘使用半透明纸张效果，搭配精致边框和阴影增强层次感
   - 按钮设计为魔法水晶或卷轴风格，添加悬停动画和微交互效果
   - 文字采用具有魔法感的字体（如Garamond、Georgia等衬线字体），重要标题添加文字阴影

拆解提示词模块：​

# 魔法风格数独游戏设计规范模块概述
## 一、核心玩法模块
**目的与作用**：确立游戏的基本规则框架，确保数独谜题符合标准9×9规格。规则要求每行、每列、每个3×3区块必须包含1-9的所有数字不可重复，为玩家提供清晰的游戏目标和判断标准，奠定整个游戏的逻辑基础。
## 二、视觉设计模块
**目的与作用**：打造独特的魔法主题氛围，通过复古羊皮纸背景、金色装饰和神秘深色基调营造沉浸式体验。水晶或卷轴风格的按钮搭配魔法感字体，使游戏界面本身成为视觉享受，增强玩家的代入感和游戏吸引力。
## 三、数独棋盘网格设计模块
**目的与作用**：优化数独棋盘的视觉层次和可读性，黄色粗边框清晰区分3×3区块。不同颜色区分初始数字与玩家输入，金色高亮选中单元格，帮助玩家快速定位和操作，提升解谜效率。

如果你还想了解更多​

欢迎来到我们的主站进行进一步的学习！​

​⚡​​第四期：Vibe Coding实战训练营​​507：用 AI 做一个对话 AI 记录的日记​​

​​第四期：Vibe Coding实战训练营​

​507：用 AI 做一个对话 AI 记录的日记​

四、GEMINI：做简易的小网页、好看的前端应用​

作者：李奕凡​

​🏆看了这么多，我相信你已经想好了接下来自己要做的方向，快来动手coding起来吧～​​

看了这么多，我相信你已经想好了接下来自己要做的方向，快来动手coding起来吧～​