Manus AI实战：零代码搭建手机拍照盲测网站全过程

真实需求：为什么要做手机拍照盲测网站

做手机评测的科技博主都遇到过一个问题：视频里展示样张对比，观众只能被动观看，没法自己缩放、拖动照片去比较细节。一位YouTuber一直想做一个专门的盲测网站，让用户自己操作照片，找到真正喜欢的拍照风格。

这次他用 Manus AI 1.5 把这个想法落了地——全程没写一行代码，完全通过自然语言对话，搭出了一个包含前端、后端、数据库的完整网站。

零代码开发的技术背景：零代码（No-Code）开发平台是近年来软件工程领域的重要趋势。传统意义上，构建一个包含前端、后端和数据库的完整Web应用需要掌握HTML/CSS/JavaScript、服务器端语言（如Python、Node.js）、数据库管理（如MySQL、PostgreSQL）以及API设计等多项技能，学习曲线陡峭。而以Manus AI为代表的AI驱动零代码工具，将自然语言处理（NLP）与代码生成模型结合，能够将用户的文字描述直接转化为可运行的代码和部署配置。这类工具的底层通常依赖大型语言模型（LLM）的代码生成能力，配合自动化测试和部署流水线，实现从需求描述到上线产品的全链路自动化。

网站功能拆解：前台、后台与数据仪表板

前台盲测体验

网站首页设计简洁，用户进入后直接看到当前进行中的盲测项目。这次测试包含了 OPPO Find X9 Pro、iPhone 17 Pro 和 Galaxy S25 Ultra 三款手机的样张对比。

核心体验流程相当流畅：

• 照片缩放：点击缩放按钮后带有平滑动画，可以放大到像素级别做"数毛"对比
• 自由移动：放大后可以拖动到任意位置，聚焦到看板文字、树叶纹理等关键区域
• 智能排名：选择第一名后，原来的排名自动调整，不会出现冲突
• 评论功能：每张照片下方可以留注解，比如"这台AI味道比较淡"，其他用户也能看到

盲测完成后，系统自动计算总分（第一名3分、第二名2分、第三名1分），生成个人结果报告。还能查看所有网友的统计数据，了解大众偏好趋势。

后台管理系统

后台的完善程度超出预期。管理员可以创建新测试项目，设置2到5台手机对比，上传1到15组样张。

几个值得注意的设计：

• 批量上传：支持一次性上传15张照片，每台手机只需操作一次
• HEIC格式自动转换：识别iPhone拍摄的HEIC格式并转档，省去手动转换
• 状态管理：测试可在"草稿""进行中""关闭"三种状态间切换，关闭后数据保留但用户不可见
• 数据重置：测试数据需要重来，一键重置即可

HEIC格式与移动端图像处理：HEIC（High Efficiency Image Container）是苹果公司自iOS 11起默认采用的图像格式，基于HEVC（H.265）视频编码标准的静态图像版本。相比传统JPEG，HEIC在相同画质下文件体积可减少约50%，同时支持12位色深、HDR、Live Photo等高级特性。然而，HEIC的跨平台兼容性一直是痛点——Windows系统需要额外安装编解码器，许多Web浏览器和图像处理库也不原生支持。在Web应用中处理HEIC通常需要服务器端调用libheif、ImageMagick等转换库，将其转为JPEG或WebP格式后再提供给前端展示。Manus AI能够自动识别并处理这一技术细节，体现了AI代码生成工具对真实使用场景的理解深度。

自动生成的数据仪表板

Manus AI 还额外生成了一个完整的数据仪表板，涵盖每小时浏览次数、访客数量、停留时长、跳出率、最热门页面、流量来源、地理位置分布，以及用户使用的设备类型。这些数据对后续优化网站体验很有参考价值。

Manus AI 1.5三大关键升级

升级一：更强的上下文理解能力

创作者给出的初始指令其实很简短：

"我想做一个手机相片盲测网站，可能会上传15张照片，有2到5台手机不等，需要上传和命名的地方，用户不需要登录就能直接测试，每组显示所有手机照片并可以缩放。"

就这一段描述，Manus AI 就生成了包含前端界面、后台管理、数据库存储的完整网站。

后续迭代沟通中，Manus 1.5 的上下文处理能力明显更强——能维持更长的对话一致性，不会在中途"忘记"之前讨论过的需求。对于需要持续迭代的复杂项目，这一点至关重要。

上下文窗口与长对话一致性：大型语言模型的「上下文窗口」（Context Window）决定了模型在单次对话中能够记住和处理的信息量，通常以Token数量衡量（1个Token约等于0.75个英文单词或0.5个中文字符）。早期模型的上下文窗口仅有4K-8K Token，在复杂项目的多轮迭代中极易「遗忘」前期需求，导致后续修改与初始设计产生矛盾。Manus AI 1.5所强调的「更强上下文理解能力」，意味着模型不仅扩大了窗口容量，还优化了对长程依赖关系的建模——能够在数十轮对话后仍准确关联早期提出的设计约束。这对于需要持续迭代的产品开发尤为关键，避免了开发者反复重申需求的低效问题。

升级二：自动修复与版本回溯

构建过程中，Manus 1.5 会自动打开内置浏览器进行测试，发现问题后自动修复。这种"自我检测