T learn.traeai

第 2 节 · 本站原创中文课程 · 建议 25 分钟

用规格说明与 AI 协作

学完能做:把需求转换成界面行为与验收条件。

描述行为而非只描述外观

“美观”不能说明点按钮后发生什么。每个控件要说明标签、限制、默认值、结果和错误提示。先给完整规格,让AI说明实施步骤,再生成代码。

可执行的规格

指定单HTML、原生CSS与JavaScript、不联网,降低配置成本。为字段加label,结果加aria-live。这是与当前范围匹配的选择,不是所有应用的固定方案。

单HTML,不依赖外部脚本。
人数:0到10000整数;预算:非负、两位小数。
合法提交显示总额,非法输入显示原因。
可用Tab/Enter操作;结果区aria-live。
先列步骤,再给完整文件和三条手工测试。

记录每次变更

每次只改一个需求,描述当前、期望行为和旧测试。保留上个可工作版本。新增依赖要解释必要性;不用因为AI生成了一个复杂方案就默认它适合当前任务。

这是本站独立编写的讲解与示例,并非官方课程逐字翻译。理解之后,请完成下面的练习、自测和笔记。

参考来源:Build with Andrew

动手,把理解变成成果

本节练习

正在读取本机草稿…

把上一节需求改成完整规格,补上字段限制、错误提示、键盘操作与三条测试。

30 / 6000 字。本页不执行代码;可下载后在本地运行,或用 Agent 获取定性建议。

给我一个提示

按输入什么、点什么、看到什么写。

查看参考思路(本站预写,非实时 Agent)

单HTML,人数非负整数,预算两位小数,错误显示在字段旁,合法提交更新可朗读总额。

人工自评:逐项核对自己的作品

这些勾选由你确认,不是自动测试结果。遇到待测项,请在作品里明确注明。

理解自测

修改正常应用时应?

自己的学习笔记

0 / 3000 字 · 仅保存在此浏览器

围绕当前章节学习

Agent 答疑与作品评价

正在检查连接…

本站讲解、提示、参考思路和自测可独立使用。连接模型服务后,才能实时提问或评价;这里不会把预写内容伪装为 Agent 回答。

走完学习闭环

完成本节

保留练习、勾选人工自评并通过自测后,可记录完成。修改作品或答案会重新打开本节。

课程进度:0 / 6 · 本机记录,不是外部官方证书

下一节:读懂最小网页结构 →
← 上一节:把想法缩成可交付作品