生成 UI 原型图：Tokeny 实操案例

准备这次任务的输入

在 Tokeny 中新建工作空间，将下载的样例解压到工作空间，选择支持工具调用的模型。本例使用合成演示数据或文中列出的公开资料。

product-brief.md

把任务交给 Tokeny

制作任务板可交互 HTML 原型：添加任务、完成/取消完成、过滤待办/已完成，支持桌面和手机布局。数据只保存在当前浏览器内存。

交付文件：prototype.html。
验收要点：
- 添加与过滤可交互
- 390px 无横向溢出
- 表单有可访问标签
这是使用合成演示输入或指定公开资料的真实操作案例。请先读取工作空间输入，再实际生成文件并自检。所有写入、脚本与临时服务限于当前工作空间；临时服务只监听 127.0.0.1，执行后关闭；不触达外部收件人、不发布、不付款、不更改系统设置，不调用子智能体。需要公开资料时可读取给定 URL。只启用完成任务必需的工具。另写 report.md（中文）和 report.en.md（英文），简洁、完整，包含输入、处理步骤、真实结果、检查方式和局限；失败或未验证部分如实记录，不能宣称成功。最终回复用中文列出产物、关键结果与待核实项。

本次使用独立演示工作空间。复现时，请根据自己的文件与权限设置检查操作，确认后继续。

实际执行过程

任务从 Tokeny 输入框提交，由在线模型读取资料并调用工具实际执行。本例核对本地演示任务与实际生成的文件，结果和检查方法见下文。

Tokeny 1.7.8 中「生成 UI 原型图」的真实执行会话与生成文件。点击可查看原图。

产物、结果与复核

输入

读取 product-brief.md：虚构产品“松果任务板”，品牌色 #176B52，面向 3–10 人小团队。
读取 ENVIRONMENT.md：Windows、独立演示目录；可使用本地 Python 与 Playwright 浏览器运行时。
用户要求：交付 prototype.html，支持添加任务、完成/取消完成、过滤待办/已完成，适配桌面与手机，数据仅保存在当前浏览器内存，并交付中英文报告。

处理步骤

创建单文件 prototype.html，包含 HTML、CSS 和 JavaScript，无外部依赖、无后端存储。
加入任务名称、负责人、截止日期表单；表单控件使用显式 label 关联。
加入完成勾选切换、全部/待办/已完成过滤、待办计数和空状态。
使用 CSS 媒体查询适配桌面与移动端；在 420px 以下调整任务行和过滤控件布局。
启动仅监听 127.0.0.1:4173 的临时服务并进行浏览器验收。

真实结果

桌面交互：初始显示 3 项任务，其中 2 项待办；新增“验证移动端布局”后显示 4 项、3 项待办。
完成切换：新增任务勾选后状态变为“已完成”，待办计数从 3 降到 2；再次切换可恢复。
过滤：在上述测试状态下，“待办”过滤显示 2 项，“已完成”过滤显示 2 项，“全部”显示 4 项。
390×844 浏览器视口：document.documentElement.scrollWidth = 390，document.body.scrollWidth = 390，未发现横向溢出。
可访问标签：检查到 task-title、task-owner、task-due 三个输入均有对应显式标签；Playwright 也能通过可访问名称定位并填写表单。
数据行为：任务状态存放在当前页面 JavaScript 内存变量中，刷新页面后恢复为演示初始数据，不写入后端或浏览器持久化存储。

检查方式

使用本地 Playwright 浏览器运行时，设置 390×844 视口，访问 http://127.0.0.1:4173/prototype.html。
通过浏览器自动化填写表单、提交任务、点击过滤按钮，并读取任务数量、待办计数与页面滚动宽度。
通过页面脚本检查 label.htmlFor 与输入控件 id 的对应关系。

局限

当前是静态演示原型，没有账号、协作同步、后端数据库、CSV 导出或真正的团队权限。
初始示例任务写在页面脚本中；新增任务只存在当前页面内存，刷新或关闭页面即丢失。
本次未做真实设备上的触摸手势、屏幕阅读器和多浏览器兼容性测试。

下载产物，自己核对

压缩包保存本次执行生成的文件。替换成自己的资料后，可以按下面的检查点验收。

添加与过滤可交互
390px 无横向溢出
表单有可访问标签

prototype.html · 12 KBreport.md · 3 KBreport.en.md · 3 KB

下载本次实际产物