一个让 AI 帮你写约会邀请网页的指令

最近社交平台上火起来一种新玩法：把一段精心设计的指令丢给 AI，几秒钟就能生成一个粉色奶油风的「约会邀请」单页网站，带互动按钮、分步选择，还能一键生成分享图。比起发一条干巴巴的微信问「周末有空吗」，这种专属网页邀请浪漫又有趣，拿去表白、约饭都很出片。

这段指令之所以火，是因为它把视觉风格、交互逻辑、无障碍适配全都写得很细，AI 一次生成就能直接用，几乎不用手动改代码。下面分享完整指令，外加一个可在线预览的成品。

完整指令

把下面这段话整体复制给 AI（豆包、WorkBuddy、Claude、ChatGPT、Gemini 等支持生成网页的模型都可以）：

1

请生成一个粉色系奶油风约会邀请单页网站，页面要有粉色爱心插画、虚线圆环、闪光装饰，标题为「可以和我一起约会吗？」；首先进行是否接受邀约的互动界面，「不要」按钮点击后会随机切换按钮位置并轮换再考虑一下的文案比如"再想想"，「愿意」按钮始终居中；分四步设计：Step1背景Emoji+惊喜确认文案+继续按钮，Step2日期默认明天（不早于今天）+时间默认11:30，Step3火锅、烤肉等9种餐食3×3网格、选中变色交互，也可用户手动输入其他餐食。Step4DATE/TIME/MENU摘要+Canvas生成1080×1440PNG分享图；要求过渡动画平滑、粉色/奶油柔美画面、白底渐变42px圆角，顶部44px居中标题、虚线爱心缓慢旋转，悬浮卡片、移入放大效果，移动铺满窗口适配安全区，完整ARIA无障碍交互、键盘焦点、触屏适配、prefers-reduced-motion兼容。

一段指令就把配色、插画元素、标题文案、四步交互流程、动画效果、无障碍适配全部定义清楚，这也是它能直接出成品的关键——留给 AI 自由发挥的模糊地带越少，结果越稳定。

指令亮点拆解

这段指令值得学习的地方，不在于「约会」这个主题，而在于它示范了「怎样给 AI 写一份高质量的前端需求」。逐块拆开看。

邀约互动：拒绝按钮会跑

打开页面第一屏是「可以和我一起约会吗？」的邀约互动。「愿意」按钮始终居中，点「不要」按钮后它会随机跳到别处，文案还会轮换成「再想想」这类撒娇式提醒。这种小心机让页面有了情绪温度，也是它能在社交平台传播开来的原因。

四步流程逐步确认

邀约确认后进入分步填写，每一步只问一件事，降低决策压力：

• Step1：背景 Emoji 动效 + 惊喜确认文案 + 继续按钮，承接邀约成功后的情绪
• Step2：选日期和时间，日期默认明天且不早于今天，时间默认 11:30
• Step3：9 种餐食（火锅、烤肉等）排成 3×3 网格，点选变色，也支持手动输入其他想吃的
• Step4：汇总 DATE / TIME / MENU，用 Canvas 生成 1080×1440 的 PNG 分享图

四步走完，一张能保存、能转发的约会邀请函就出来了。

视觉与交互细节

指令对画面的要求也很具体：粉色奶油柔美配色、白底渐变、42px 圆角卡片、顶部 44px 居中标题、虚线爱心缓慢旋转、卡片悬浮移入放大。这些细节叠加起来，页面才会有「精致感」而不是「模板感」。

更难得的是它把无障碍也写进去了：完整 ARIA 标注、键盘焦点可达、触屏适配、移动端铺满窗口并适配安全区，还兼容 prefers-reduced-motion（给关闭动画偏好的用户自动降级）。很多人手写网页都顾不上这些，指令里却一个不落。

调试与优化

添加约会地点页面，接入高德API，可手动搜索或地图选址、选择好地址后可跳转或唤起高德进行导航

在线预览

我按这段指令做了一版可在线预览的网页，手机和电脑打开效果都不错，可以实际点一点感受交互：

怎么用

实际操作很简单：

1. 复制上面的完整指令，粘贴到支持生成网页的 AI 对话框
2. AI 输出 HTML 代码后，保存为 index.html
3. 双击用浏览器打开即可本地预览
4. 想要在线访问，可以把文件部署到任意静态托管平台

部署平台方面，Vercel、Netlify、Cloudflare Pages、GitHub Pages 都支持上传静态文件，几分钟就能拿到一个公网链接。我的预览站就是托管在静态平台上，绑定自定义域名后访问更顺口。

想个性化也很方便：把标题「可以和我一起约会吗？」换成你想说的话，餐食列表换成对方爱吃的，日期时间改成你们都空的时段，就是一份专属邀请。

小结

这段指令能火，本质是它把「浪漫创意」和「工程细节」都写到位了——既有约会互动的情绪设计，又有无障碍、响应式这些容易被忽略的硬功夫。对想做 Vibe Coding 的人来说，它也是一份很好的指令范本：与其让 AI 自由发挥，不如把配色、交互、流程、适配一次性讲清楚，出活质量天差地别。

拿去试试，祝你约会成功。