我以前试过直接让 AI 写“做一个毛玻璃卡片页面”，代码当然能给，但成品经常有点像课堂作业：背景糊得不够，卡片像一层灰蒙蒙的遮罩，文字也没有那种真正的玻璃质感。
后来我发现，这类页面最怕一句话带过。你不把透明度、模糊强度、布局方向、悬浮效果这些条件说清楚，AI 往往只会给你一个“有点透明”的普通卡片。 这条 Prompt 的好处就在这里。它不是泛泛地说“做个高级页面”，而是把技术栈、背景图、模糊参数、卡片质感、交互方式和响应式方向都提前钉住了，最后输出一份可以直接运行的单文件 HTML。
如果你正想做一张知识卡片、一页灵感记录卡，或者想拿毛玻璃风格做展示页，这条提示词会省掉很多来回修样式的时间。
一、这条提示词适合谁
这条提示词比较适合： - 想做知识卡片页面但不会从零写样式的人
- 需要快速做出视觉成品给客户或朋友确认的人
- 想练习玻璃拟态风格的前端新手
- 做内容卡片、概念卡片、语录卡片、笔记卡片的人
- 想让 AI 直接输出前端页面骨架的人
如果你需要的是后台系统、复杂表单页或者多栏管理界面，这条提示词就不算特别对口。
二、它能解决什么问题
普通问法做这类页面，常见会翻车在几个地方： - 背景只是加了一层透明白，看不出毛玻璃层次。
- 模糊参数不明确，结果不是太轻就是糊成一片。
- 卡片宽度和响应式没管，手机上容易挤，桌面上又显得空。
- 只有静态样式，没有悬浮高亮和细节动画。
- AI 输出拆成多个文件，新手复制起来很麻烦。
这条提示词把这些坑提前处理了，目标就是让你拿到一个更接近“能展示”的页面，而不是一堆还要自己拼的零件。
三、提示词特点
这条 Prompt 里最有用的几个点，我觉得是： - 明确写了背景模糊强度 12px，不让 AI 自己乱猜。
- 指定卡片背景为“半透明白色，透明度 8%”，能更稳定做出玻璃质感。
- 要求卡片纵向排列、响应式适配，避免内容一多就散。
- 限定TailwindCSS 3.0+ 和Font Awesome 6.0+ CDN，输出结构更统一。
- 要求页面加载完成后再执行后续操作，可以减少脚本报错。
- 鼓励用户只输入标题和内容，适合做可复用模板。
如果你后续还想继续追问，也比较好改。比如你只想把它改成“灵感摘录卡”“课程重点卡”“产品卖点卡”，基本不用重写整套结构。
四、使用方法
- 先准备你要放进卡片里的标题和正文内容。
- 把下面提示词里的 {卡片标题} 和 {卡片内容} 替换成自己的内容。
- 如果你还想加一句重点提醒，可以顺手把{提示语} 也换掉。
- 把完整提示词发给能生成代码的 AI 工具。
- 拿到结果后，保存为 .html 文件并在浏览器中打开查看。
- 如果你觉得文字太多、卡片太挤，优先缩短内容长度或增大卡片最小宽度。
五、适用场景
这条提示词可以用在： - 知识卡片展示页
- 学习笔记卡片
- 语录卡片页面
- 概念说明页
- 产品亮点介绍卡
- 个人灵感记录页
- 社群打卡卡片
- 简洁单页视觉展示
尤其适合“信息不算很多，但想让它看起来更精致一点”的内容。
六、注意事项和替换变量
建议优先替换这几个变量：
{卡片标题}
{卡片内容}
{提示语}
{按钮文字}
使用时注意这几点： - 这条提示词自带的背景图地址是 https://picsum.photos/1920/1080，如果你本地网络不稳定，可以改成自己的图片地址。
- AI 生成中文页面时，个别工具可能会出现文案过长导致换行不好看，建议正文尽量控制在短段落。
- 如果悬浮高亮太重，可以把阴影和边框发光效果再压低一点。
- 如果你要做的是移动端截图卡片，建议继续追问 AI：请把卡片可视区域控制在首屏内。
- 如果工具生成的 Tailwind CDN 写法有问题，可以让它重新输出一版“纯 HTML + 内联 CSS”。
以下是提示词内容：
# 角色（Role）
- 你是一个毛玻璃特效知识卡片生成专家
## 技术规范
- 使用 HTML5、TailwindCSS 3.0+（通过 CDN 引入）和必要的 JavaScript
- Font Awesome 6.0+（通过 CDN 引入）用于图标库增加视觉冲击
- 代码结构清晰，包含适当注释，便于理解和维护
- 避免 js 报错，确保页面加载完成后才进行后续操作
## 设计风格（Design Style）
- 采用前沿的毛玻璃效果，结合动态背景模糊技术，打造现代感十足的界面视觉效果
- 背景图片使用固定地址 https://picsum.photos/1920/1080
- 整体背景模糊（毛玻璃效果），强度 12px
- 精心调校的模糊参数与色彩搭配，确保内容可读性的同时保持背景的深度感知
- 毛玻璃（磨砂玻璃）效果的卡片设计要求：
1. 半透明白色背景（透明度 8%）
2. 背景模糊（毛玻璃效果），强度 12px
3. 使用柔和的阴影，提升层次感
4. 设置最小宽度，防止内容过窄（响应式适配）
## 交互体验（Interaction Experience）
回复本贴，即可查看完整提示词内容
如果你平时也会用 AI 做这种展示型页面，可以回帖说说你更常做哪一类：知识卡、语录卡、产品卡，还是个人介绍页。我也可以继续按这个方向整理一版更偏“小红书卡片”或者“课程重点卡”的变体提示词。
|
发表于 2026-5-21 10:50:36