凌晨4点，我把‘考研自习室座位预约’网页发到校内论坛——6小时后，3个学院学生会问‘能加人脸识别签到吗？’

大家好，我是RD社区的@小陈，上个月还在帮室友修电脑，这个月已经给3所高校学生会改了4版自习室系统。今天不讲原理，只带你亲手做出一个能立刻被同学抢着用的网站——不用注册域名、不用买服务器、连GitHub账号都不用登录（真·免登录）。

> 💡核心提示：这不是“演示项目”，而是我上周五凌晨4点随手发到本校‘树洞’论坛的真实案例。发出去6小时，收到27条私信、3份学生会盖章的合作意向，甚至有老师直接甩来一张教室平面图：“按这个排座位，明天就要试用。”

---

✅ 第一步：一句话Prompt，让Claude Code生成完整HTML+CSS+JS

打开 [claude.ai](https://claude.ai)（免费账号即可），粘贴以下Prompt（一字不改，含注释）：

请生成一个单页响应式网页，用于高校考研自习室座位预约。要求：
页面顶部显示校徽+「XX大学考研自习中心」标题；

中间是3×4网格座位图，每个座位为圆角矩形按钮，初始状态为绿色（空闲），点击后变为橙色（已选），再点变红色（锁定）；

底部显示实时统计：「当前空闲：X个｜已预约：Y个｜已锁定：Z个」；

所有交互纯前端实现，不依赖后端或数据库；

使用现代CSS（Flex/Grid），适配手机竖屏；

输出完整HTML文件，包含内联CSS和JS，可直接双击打开运行。

✅ 等待5秒，Claude Code会返回一个带完整标签的单文件。复制全部内容，保存为 seat-booking.html。

⚠️ 注意：别删掉