我先简单说一下,我是怎么认识“灵光”的。作为一个“开发者”,我一开始是不太喜欢的,对它是有抵触情绪的,我需要接触到代码,这样才能更好的修改和完善我的应用功能。 上周六,我参加了[观猹] 和 [灵光] 合办的”观猹会“,经过嘉宾的讲解,我认识了”灵光“,在这个活动有限定赛题”围绕大学生“的场景来做。我想我已经毕业好几年了,暂时想不到应用的场景。我开始想到一个情感场景,叫做拯救表白的你。起初定下这个名称去做,让chatGPT,还有豆包,去帮我生成提示词,去实现逻辑。结果在实现过程中,发现它无法理解我的思路,导致的效果是越改越差。 结果前面浪费了很长实现,我换了一个赛道,去做了一个类似任务安排,我也不知道是什么的东西,但是完成度比我原先那个好。最后在临结束前5分钟,提交了自己做的闪应用。
这一圈体验下来,觉得这个东西不太好用,有点鸡肋。但换个思路,我是把它场景想复杂了。应该来拆分一下。
既然它存在,肯定有存在的理由。我看了推荐页,大家脑洞很大,做了很多有趣的东西,能力很强大。那如何发挥这一个“神器”呢?需要适配场景。“灵光”的能力有哪些呢?
基础 LLM 能力:理解自然语言需求,生成完整前端单页应用
本地数据存储:数据保存在本地,离线可用,无需后端
零代码工具生成:一句话生成可交互工具,支持增删改查、导入导出
UI 与动画生成:现代界面、卡片布局、随机抽取 / 滚动动画
纯本地运行:单页网页形式,可分享,不依赖服务器
从它的能力入手,是很好完成自己的需求的。我回来后,考虑了一下。这样的能力下,想到一个这样的场景:和朋友去 KTV,我想只唱五月天,但每次选歌很纠结,灵光很适合做一个五月天点歌抽签器,导入歌曲列表,朋友轮流随机抽取,抽中哪首就唱哪首,气氛简单又好玩。
因为在灵光中修改UI是比较麻烦的,所以,想要做一个好看一点的UI,在豆包等,先生成Html,看看效果,后面UI好看后,再把提示词固定下来,再去生成,效果会好很多,几乎都不用怎么修改的。
提示词:
请生成一个现代化、简洁明亮、UI精致大气的本地单页抽签点歌工具。
要求纯前端本地运行,布局规范、结构清晰、代码整洁、颜色简单。
一、整体风格与配色
- 风格:年轻潮流、简约清爽、现代卡片式设计
- 主色调:浅蓝色 #409EFF
- 背景色:白色 #FFFFFF
- 卡片底色:淡灰色 #F5F7FA
- 文字色:深灰色 #333333
- 按钮色:主色调 #409EFF,悬停略加深
- 圆角统一:8px–12px
- 轻微阴影,干净不厚重
二、页面布局结构(从上到下)
1. 顶部标题区
- 标题:KTV点歌抽签器
- 居中、醒目、简洁
2. 中部抽奖结果展示区
- 大尺寸卡片,居中突出
- 高度足够,用于显示最终抽中的歌曲
- 抽取动画在此区域展示
3. 操作控制区
- 大号按钮:开始抽取
- 按钮居中、视觉冲击力强
4. 文本导入区
- 标题:批量导入歌曲(按换行分隔)
- 大尺寸多行文本域
- 粘贴后自动按换行识别为歌曲列表
5. 增加一个历史记录区
- 标题:最近抽取记录
- 展示最近抽取的歌曲
5. 歌曲列表管理区
- 卡片式列表展示所有已导入歌曲
- 每条右侧有删除按钮
- 下方有“添加歌曲”输入框与添加按钮
- 增加一键重置功能,清空所有已导入歌曲,历史记录,实现功能需要二次确认
三、功能需求
1. 抽取动画大胆创新:文字快速滚动、闪烁、缩放过渡,最终高亮定格,仪式感强
2. 支持文本批量导入,按换行自动分割歌曲
3. 支持歌曲新增、删除
4. 点击开始抽取触发动画
5. 纯本地运行,无需后端,流畅稳定
四、交互要求
- 按钮点击有反馈效果
- 列表操作简洁直观
- 动画流畅不卡顿
- 移动端适配友好
- 只保留核心抽签区,导入 / 添加 / 删除功能全部隐藏,通过按钮点击展开 / 收起,界面更干净大气
测试歌单
倔强
温柔
突然好想你
知足
你不是真正的快乐
恋爱ing
离开地球表面
我不愿让你一个人
后来的我们
如果我们不曾相遇
好好
诺亚方舟
成名在望
任意门
干杯
天使
星空
人生海海
如烟
笑忘歌
我心中尚未崩坏的地方
伤心的人别听慢歌
步步
转眼
派对动物
因为你 所以我
玫瑰少年
为你写下这首情歌
你的神曲
拥抱
志明与春娇
恒星的恒心
而我知道
听不到
乱世浮生
第一天
咸鱼
疯狂世界
时光机
孙悟空
九号球
最重要的小事
私奔到月球
夜访吸血鬼
爆肝
噢买尬
憨人
垃圾车
出头天