AI 前端能力评测：48 小时城市周末旅行规划

最近和小伙伴一起做了一个简单的 AI 前端能力评测：统一给不同模型一份提示词，让它们生成一个完整的网站，并部署到 Cloudflare Pages 上。

这次的主题是「城市周末旅行规划」。今天把作品整理出来，欢迎大家一起品鉴。我们还做了一个匿名投票，有时间的朋友可以投一票，看看哪个作品是你心目中的 No.1。

模型暂时匿名，等下周公布……

投票入口

参评作品

统一提示词

请制作一个高保真的「城市周末旅行规划」网页应用，面向普通用户，不要做任何管理后台、数据表格或后台仪表盘。



主题：为用户规划一次 48 小时的城市短途旅行。



页面包含：



1. 首页

- 顶部导航：目的地、灵感、我的行程

- 大幅城市照片或视频背景

- 搜索框：“你想去哪里？”

- 热门城市卡片

- 精选旅行主题：美食、艺术、自然、夜生活



2. 城市详情页

- 城市封面图、天气、最佳旅行季节

- 可横向滚动的地点卡片

- 地点分类筛选：咖啡馆、餐厅、景点、商店

- 点击地点后打开详情抽屉，显示图片、简介、营业时间和“加入行程”按钮



3. 行程规划页

- 显示两天的时间线

- 用户可以把地点加入“周六上午 / 周六下午 / 周六晚上”等时间段

- 支持拖拽排序、删除地点、修改时间段

- 自动计算预计步行时间和总预算

- 提供“分享行程”和“导出 PDF”按钮



4. 地图区域

- 使用模拟地图或视觉化地图占位

- 地点以彩色标记展示

- 点击标记时联动对应地点卡片

- 不需要真实地图 API，但交互必须可演示



视觉要求：



- 风格：现代旅行杂志，具有探索感和高级感

- 使用大图、圆角卡片、轻微玻璃拟态和细腻阴影

- 配色以米白、深墨绿、橙色为主

- 避免普通 SaaS 风格、后台风格和千篇一律的蓝紫渐变

- 桌面端和移动端都要有良好的响应式布局

- 添加页面切换、卡片悬停、抽屉展开、拖拽反馈等微交互

- 使用真实感较强的示例图片和中文内容



技术要求：



- 使用 React、TypeScript 和 Tailwind CSS

- 使用本地模拟数据，不需要后端

- 所有按钮、筛选、抽屉、拖拽、收藏和行程编辑功能都应能正常演示

- 代码结构清晰，组件可复用

- 最终交付一个可以直接运行的完整前端页面

写在最后

这不是一次严肃的模型跑分，更像是一次轻量的前端创作实验。相同提示词下，不同模型在审美、产品理解、交互实现和细节处理上的差异还是挺有意思的。

欢迎大家体验、投票，也欢迎在评论区分享你心目中的 No.1，以及你最喜欢它的地方。

如果后续有更多模型或新的作品，也可以继续补充进来。