Sparkles Editor让想象成为现实。账户与充值
所有创作指南
交互网页教程

AI 交互清单怎么做:生成 HTML、测试勾选,再下载或分享

当读者需要逐项标记进度时,交互清单比一张静态图更合适。Sparkles 可以在对话中创建 HTML 页面,预览后继续修改。先从容易验证的小清单开始:三个分组、六项行动,以及刷新后归零的完成计数。

在 Sparkles 对话里把任务表做成 HTML 交互清单,检查计数、键盘操作和重置行为,再下载文件或分享快照。附完整提示词与修正示例。
放大查看图片
复用本站「从对话到视觉创作」原创 AI 概念插图。它不是清单界面截图,也不是进度持久保存的演示。

1. 先定义勾选代表什么

打开创作助手,明确要求制作可交互 HTML 页面。本例用于检查社媒轮播的发布准备:确认来源、检查文件、准备上传。

把任务写成能观察结果的短句。「检查质量」过于宽泛,「打开全部五张导出文件」则有清楚的完成条件。计划分享的页面不放私人资料。本练习只在当前打开期间保留勾选状态,不提供账号同步或团队共享进度。

2. 写清内容和预期行为

分组 两项行动
来源 确认可改编权限;核对最终文案
文件 打开全部五张导出图;检查页序
发布 预览目标平台裁切;补充来源链接

总数始终是六项,包括被筛选隐藏的项目。「仅看未完成」只改变显示,不改变完成状态;「重置」清空全部勾选。有了这些规则,才能检查页面是否真的可用。

3. 请求完整交互页面

text
创建一个名为「轮播发布检查」的 HTML 交互清单。
恰好三个分组,每组两个复选框:
来源:确认可改编权限;核对最终文案。
文件:打开全部五张导出图;检查页序。
发布:预览目标平台裁切;补充来源链接。
显示已完成数量/6 和进度条,增加「仅看未完成」「重置」按钮。筛选不能改变总数;重置要清空六项并恢复完整列表。
复选框有明确标签,按钮可用键盘操作,焦点清晰,对比度易读,手机窄屏不出现横向滚动。
使用奶油色背景、紫色点缀和简洁自适应布局,不需要装饰图片。
状态只存于当前页面内存,显示「刷新页面后,勾选进度会重置」。
不要使用浏览器存储、表单、外部请求、登录、支付字段、页面内下载链接或外部库。
在本对话中创建完整 HTML 交互产物,不要只返回代码块或截图。

等网页卡片出现后,实际检查预览。保存产物成功不代表控件能正常工作;如果卡片显示错误,将错误和触发动作一起发给助手修复。

4. 测试计数,并修正一个具体失败

勾选两项,计数应为 2/6。开启未完成筛选,应剩四项,但计数仍是 2/6。恢复完整列表,取消一项,再点重置,应回到 0/6。刷新页面,确认符合提示中的归零行为。用 Tab 和空格检查复选框与按钮。

text
修复现有清单:完成两项后,「仅看未完成」错误地把分母变成了 4。
分母必须始终采用原始六项,不能随筛选变化。被隐藏的已完成项目仍要保留在当前状态中。
保留现有文案、布局,以及刷新后重置的内存状态方式。返回修订后的交互页面。

在新版本中重复失败步骤,并检查窄屏。提示词描述的是验收目标,不保证第一次生成就全部通过。

5. 选择下载文件或分享快照

通过产物卡片下载 HTML,再打开文件检查。本例要求不依赖外部资源;使用在线库的其他页面可能需要联网。

需要给他人查看时,检查内容后点击分享网页。分享需经过审核,得到的是页面快照,不是实时协作清单。当前默认链接有效期为七天,以产品显示的到期时间为准,不需要后可撤销。修改后应重新检查并分享,不要默认旧快照会更新。

持有链接的人在到期或撤销前都能访问;不被搜索收录不等于访问权限控制。公开分享不允许浏览器存储、表单提交和外部服务请求,因此本教程不承诺永久保存进度、收集邮箱或连接后端。

6. 判断是否需要其他形式

同事能看到我的勾选吗? 不能。本例状态属于各自打开的页面,刷新即清空。需要负责人、长期记录和协作时,应使用专门的任务系统。

可以作为永久网站吗? 临时分享链接不是永久站点或 SEO 落地页,分享产物会排除搜索收录。

下载后清单还在吗? 页面和代码会保留,但本例刻意不保存已勾选状态。下载副本需要单独检查。助手生成和修订按现有规则计费。

只需要概览可做信息图,需要逐页阅读可做五张社媒卡片。三种流程都可以从创作助手开始。

来源与延伸阅读

打开创作助手

粘贴本篇提示词,并替换为自己的材料。助手处理和图片生成按对应规则使用 Credits。