小互 AI 学院
← TRAE Work 实战:从杂乱简历到可运行的招聘工作台 第 3 章 · 3.3
课程地图0/12
TRAE Work 实战:从杂乱简历到可运行的招聘工作台当前:Code 第一单:把选定的原型做成双击能打开的真实网页
跟做课32 分钟

现在要解决

Code 第一单:把选定的原型做成双击能打开的真实网页

打开工具,照着完成这一单。一次只做当前动作。每一步都告诉你在哪里操作、应该看到什么,以及看不到时怎么处理。

做完后,你会留下03_Code成品/招聘运营工作台/index.html + README.md + 修复记录
开始跟做 →3 个学习动作

第 3 章 · 问题 3:原型能看,但还不能真的操作

怎样让 Code 把选定方案做成双击就能打开、筛选能用、手机不挤坏的真实网页?

这一课照知识库“从视觉方案到可点击 HTML 原型”的做法:先读交接文件,只在目标目录创建文件,完成后真实打开、点击、缩窄窗口、修复,再报告证据。

01先看 Code 应该怎样跑完整个任务

STEP 1 / 5

读取交接单和设计选择

确认事实、隐私边界、页面模块、交互和保存位置。

› Reading 三模式交接单.md
› Reading 设计选择说明.md
✓ Requirements loaded

02完整任务同时写清“做什么”和“不要做什么”

CODE · 创建招聘运营工作台

请读取 01_Work成品/三模式交接单.md、候选人总表-复核后.xlsx、招聘漏斗分析.xlsx 和 02_Design成品/设计选择说明.md,在 03_Code成品/招聘运营工作台/ 中创建一个双击 index.html 就能打开的响应式网页。

实现 A“招聘周会”方向:本周待决定事项、漏斗概览、候选人列表、岗位筛选、状态筛选、资料缺失标签、面试待办、来源与更新时间。按钮只做本地演示反馈,不发送邮件或消息。联系方式脱敏;未知薪资和到岗时间显示“待确认”;页面只用练习数据。

所需 CSS/JavaScript 放在本地,不依赖外网。同时创建 README.md,写清打开方式、文件结构、测试结果和未完成项。完成后真实打开页面,在桌面与 390px 宽度检查;点击所有筛选和按钮;检查控制台;发现问题就修复。不要修改上游材料,不要部署。

03_CODE 成品应该长这样
03_Code成品/
└── 招聘运营工作台/
    ├── index.html        ← 双击打开
    ├── README.md         ← 打开方法与测试记录
    └── assets/           ← 如有本地样式或图标

03“能打开”只过了第一关,再按现象精准返修

CODE · 真实检查后的返修

我实际检查发现:390px 宽度候选人卡片横向溢出;点击“只看待确认”后仍显示全部候选人;李娜的薪资被写成了具体数字。

请先分别找到原因,只修改 03_Code成品/招聘运营工作台/ 内文件。修复后重新在桌面和 390px 检查,点击两个筛选和所有按钮,再检查控制台。最后逐条告诉我改了哪里、用什么现象证明修好。

0 / 5 · Code 成品还没通过

知识库依据《从 UI 到可交付前端原型》:HTML Prompt 与交付清单 ↗采用原文“从已确认视觉方案承接、明确交互、交付 HTML/CSS/JS、检查响应式与控制台、保留下一步修改说明”的验收框架。
第 3 章已经交付招聘工作台已经从事实底稿变成可比较原型,再变成能打开、能点击、能检查的真实网页。

下一章把这套成功流程存成 Skill,再让周报自动运行。

下一课:把流程做成 Skill →

最后验收

不要只确认“AI 说做完了”,请打开真实结果检查。

03_Code成品/招聘运营工作台/index.html + README.md + 修复记录