第 3 章 · 问题 3:原型能看,但还不能真的操作
怎样让 Code 把选定方案做成双击就能打开、筛选能用、手机不挤坏的真实网页?
这一课照知识库“从视觉方案到可点击 HTML 原型”的做法:先读交接文件,只在目标目录创建文件,完成后真实打开、点击、缩窄窗口、修复,再报告证据。
01先看 Code 应该怎样跑完整个任务
读取交接单和设计选择
确认事实、隐私边界、页面模块、交互和保存位置。
› 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、检查响应式与控制台、保留下一步修改说明”的验收框架。
最后验收