AI 前端能力实测：谁做的城市旅行规划网站最好？

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

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

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

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

投票入口

- 1

- 2

- 3

- 4

- 5

- 6

- 7

- 8

- 9

0
投票人

参评作品

编号 |
模型 |
作品链接 |

1 |
暂时匿名 |
在线体验 |

2 |
暂时匿名 |
在线体验 |

3 |
暂时匿名 |
在线体验 |

4 |
暂时匿名 |
在线体验 |

5 |
暂时匿名 |
在线体验 |

6 |
暂时匿名 |
在线体验 |

7 |
暂时匿名 |
在线体验 |

8 |
暂时匿名 |
在线体验 |

9 |
暂时匿名 |
在线体验 |

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

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

页面包含：

1. 首页
- 顶部导航：目的地、灵感、我的行程
- 大幅城市照片或视频背景
- 搜索框：“你想去哪里？”
- 热门城市卡片
- 精选旅行主题：美食、艺术、自然、夜生活

2. 城市详情页
- 城市封面图、天气、最佳旅行季节
- 可横向滚动的地点卡片
- 地点分类筛选：咖啡馆、餐厅、景点、商店
- 点击地点后打开详情抽屉，显示图片、简介、营业时间和“加入行程”按钮

3. 行程规划页
- 显示两天的时间线
- 用户可以把地点加入“周六上午 / 周六下午 / 周六晚上”等时间段
- 支持拖拽排序、删除地点、修改时间段
- 自动计算预计步行时间和总预算
- 提供“分享行程”和“导出 PDF”按钮

4. 地图区域
- 使用模拟地图或视觉化地图占位
- 地点以彩色标记展示
- 点击标记时联动对应地点卡片
- 不需要真实地图 API，但交互必须可演示

视觉要求：

• 风格：现代旅行杂志，具有探索感和高级感
• 使用大图、圆角卡片、轻微玻璃拟态和细腻阴影
• 配色以米白、深墨绿、橙色为主
• 避免普通 SaaS 风格、后台风格和千篇一律的蓝紫渐变
• 桌面端和移动端都要有良好的响应式布局
• 添加页面切换、卡片悬停、抽屉展开、拖拽反馈等微交互
• 使用真实感较强的示例图片和中文内容

技术要求：

• 使用 React、TypeScript 和 Tailwind CSS
• 使用本地模拟数据，不需要后端
• 所有按钮、筛选、抽屉、拖拽、收藏和行程编辑功能都应能正常演示
• 代码结构清晰，组件可复用
• 最终交付一个可以直接运行的完整前端页面

```写在最后

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

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

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