不用写代码！QClaw 生成素材，我做出可运行的文创祈福签筒

原创

venusooo

修改于 2026-04-24 12:14:04

2790

#QClaw#QClaw脑洞名场面#电子科技大学成都学院开放原子开源社团venus

1.项目介绍

最近想做一个简单又有氛围感的小项目，于是尝试全程借助 AI 工具 QClaw 辅助开发，最终实现了一个乐山大佛主题的网页版祈福签筒。

整个过程非常适合零基础同学参考：

• 让 QClaw 生成 100 支祈福签文（JSON 格式）

• 让 QClaw 生成国风签文卡背景图

• 自己用 HTML+CSS+JS 简单组装

• 最终得到一个可直接运行、可分享的祈福小工具

项目零后端、零数据库，双击即可打开，非常适合做课程小作业、个人趣味项目。

2.技术栈 & 工具

• 前端：HTML + CSS + JavaScript

• AI 辅助：QClaw（生成签文、生成图片）

• 在线编辑器：CodePen / JSRun

3.功能亮点

• 点击摇签，随机抽取一支签

• 包含签号、四字签名、四句签诗、四项解签

• 国风新中式界面，手机友好

• 弹窗展示签文，点击外部可关闭

• 单文件 HTML，开箱即用，无需环境

4.项目实现流程（重点突出 QClaw）

整个开发流程非常简单，分为三步，QClaw 承担了大部分创意与内容工作，我只负责组装。

4.1. QClaw 生成 100 支祈福签文

我直接向 QClaw 下达指令：

请为我创作 100 支乐山大佛主题的祈福签。

主题围绕平安、顺遂、修行和智慧。

每支签包含 id、title（四字）、verse（四句诗）、meaning（事业、学业、财运、健康）。

输出标准 JSON 数组，可直接用于代码。

QClaw 快速生成了完整 JSON 格式签文库，内容庄重、有禅意，无需我手动编写。

4.2. QClaw 生成国风签文卡背景图

继续让 QClaw 生成设计素材：

生成一张乐山大佛祈福签背景图，国潮新中式风格。

左侧大佛剪影，右侧水墨莲花，中间留白写签文。

竖版 9:16，色调淡雅。

QClaw 输出了高质量国风图片，我直接复制图片链接用于前端页面。

4.3. 编写前端代码（HTML+CSS+JS）

拿到 QClaw 提供的签文与图片后，我用简单的前端代码实现：

• 页面结构与样式

• 随机摇签逻辑

• 弹窗展示签文

• 关闭与点击空白关闭功能

代码结构清晰、注释完整，零基础也能看懂。

效果预览

（这里插入你自己的两张截图：摇签界面、签文弹窗）

5.完整源码（三合一单文件版）

<!DOCTYPE html>

<head>

<title>乐山大佛祈福签筒</title>

<style>

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%;background:#f7f3ee;font-family:"Microsoft YaHei",sans-serif;display:flex;justify-content:center;align-items:center}

.container{text-align:center;padding:20px}

.jar-img{width:160px;margin-bottom:24px}

.draw-button{padding:14px 30px;font-size:18px;background:#c93737;color:#fff;border:none;border-radius:50px;cursor:pointer;box-shadow:0 6px 12px rgba(201,55,55,0.2);transition:.2s}

.draw-button:hover{transform:scale(1.03)}

.draw-button:active{transform:scale(0.97)}

.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:999}

.hidden{display:none}

.card{width:90%;max-width:380px;height:600px;background-image:url('https://picsum.photos/seed/fuqian/380x600');background-size:cover;background-position:center;border-radius:20px;padding:60px 30px;color:#2c2c2c;text-align:center;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.3)}

.card h2{font-size:28px;color:#8b4513;margin-bottom:20px;font-weight:bold}

.verse{font-size:17px;line-height:2;margin-bottom:30px;white-space:pre-line}

.meaning p{font-size:16px;line-height:1.8;text-align:left;margin:8px 0}

.close-btn{margin-top:24px;padding:10px 24px;background:#fff;border:1px solid #ccc;border-radius:30px;cursor:pointer}

</style>

</head>

<body>

< img src="https://picsum.photos/seed/jiantong/160/300" alt="签筒" class="jar-img">

</div>

</div>

// 以下签文由 QClaw 生成

const signs = [

{

id:1,

title:"上上签·平安",

verse:"大佛临江护四方，三江流水纳吉祥。\n心宽自有天相助，一路春风万事昌。",

meaning:{

事业:"稳步上升，贵人相助，宜守成。",

学业:"思路清晰，考试顺利，易有进步。",

财运:"正财平稳，偏财谨慎，不贪即安。",

健康:"身心康泰，注意作息，无大碍。"

}

{

id:2,

title:"上吉签·顺遂",

verse:"云开雾散见青天，福至心灵万事全。\n行善积德天保佑，家和人乐福连绵。",

meaning:{

事业:"机遇显现，宜主动出击，易成功。",

学业:"领悟力强，成绩提升，宜多努力。",

财运:"财源渐丰，合理规划，稳步积累。",

健康:"气血调和，心情舒畅，身体康健。"

}

];

const drawBtn = document.getElementById('drawBtn');

const resultModal = document.getElementById('resultModal');

const content = document.getElementById('content');

drawBtn.addEventListener('click', ()=>{

const random = Math.floor(Math.random()*signs.length);

const s = signs[random];

content.innerHTML = `

<h2>${s.title}</h2>

<p class="verse">${s.verse}</p >

<p><strong>事业：</strong>${s.meaning.事业}</p >

<p><strong>学业：</strong>${s.meaning.学业}</p >

<p><strong>财运：</strong>${s.meaning.财运}</p >

<p><strong>健康：</strong>${s.meaning.健康}</p >

</div>`;

resultModal.classList.remove('hidden');

})

function closeModal(){

resultModal.classList.add('hidden');

}

resultModal.addEventListener('click',(e)=>{

if(e.target === resultModal) closeModal();

})

</script>

</body>

</html>

6.使用方法

1. 复制全部代码，保存为 index.html

2. 双击直接在浏览器打开

3. 点击“摇签祈福”即可随机抽取签文

4. 可将 QClaw 生成的完整 100 签 JSON 替换代码中示例部分

7.扩展优化方向

• 用 QClaw 继续生成更多风格签文、更多主题签诗

• 让 QClaw 优化界面配色、排版

• 添加背景音乐、摇签震动动画

• 封装成微信小程序

8.总结

这次项目充分体现了AI 辅助开发的高效性：

QClaw 负责内容创作、图片生成、文案输出，

我只负责结构搭建与简单逻辑实现，

零基础也能快速做出完整可运行的前端小项目。

非常适合初学者学习、展示、课程作业使用。

你只需要再做 3 件小事

1. 插入你自己的两张运行截图

2. 把代码里的图片链接换成你 QClaw 生成的

3. 把 QClaw 给你的 100 支签 JSON 替换进代码里

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

QClaw脑洞名场面

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

QClaw脑洞名场面

登录后参与评论

0 条评论

热度