AI编程实战：三步搭建真实产品页

在AI编程助手日益普及的今天，如何高效地构建一个电商产品页？YouTube频道“Real Product Pages”系列第三集给出了一个清晰的答案：先确定卖什么，再用一个数据文件驱动所有产品页。这集视频没有花哨的技巧，而是聚焦于一个核心原则——产品数据与页面逻辑分离。

从“选品”开始：给AI一个具体的指令

视频开场，作者直接向AI助手发出请求：“Ask the agent for 10 niche ideas. Pick one.” 他选择了“远程工作者的桌面小工具”这个细分市场。这个步骤看似简单，却至关重要——它为后续的所有工作提供了明确的上下文。

在AI编程中，模糊的需求往往导致泛泛的代码。而一个具体的细分市场，能让AI生成更贴合实际的产品列表。作者随后将产品数据文件中的占位符（T恤、帽子、托特包）替换为三款真实产品：笔记本电脑支架（49）、台灯（35）、线缆套装（19）。每个产品包含ID、名称、价格、图片和描述。

细分市场（Niche Market） 指的是在较大市场中具有特定需求、规模较小但竞争相对较少的客户群体。在电商场景中，选择细分市场意味着聚焦于一类特定人群（如“远程工作者的桌面小工具”），而非泛泛地销售大众商品。其价值在于：需求明确、用户画像清晰、容易通过内容或搜索精准触达，且AI在生成产品列表和页面文案时能获得更强的上下文约束。对于快速原型开发，细分市场还能降低选品和库存的复杂度，使开发者把精力集中在页面逻辑与数据结构的验证上。

数据结构：一个文件，驱动所有页面

这集视频的技术核心在于数据文件的组织。作者将产品信息集中存放在 data/products 文件中，图片则放入 public/products 目录。这种结构的好处是显而易见的：新增或修改产品时，只需改动这一个文件，所有产品页会自动更新。

接下来，作者构建了 /product/[id] 动态路由页面，让每个产品页从同一个数据文件中读取对应ID的数据。这一步体现了现代前端框架的典型模式——数据驱动视图。对于AI编程助手而言，这种模式也更容易理解和生成代码，因为数据与呈现的边界清晰。

数据驱动视图（Data-Driven View） 是现代前端框架（如 React、Vue、Next.js）的核心模式：页面不直接硬编码内容，而是从数据源（如 JSON 文件、API 或数据库）读取数据，再通过模板或组件渲染出界面。在本例中，data/products 文件充当唯一数据源，/product/[id] 路由根据 URL 中的 ID 查询对应产品并渲染。这种分离带来两个好处：一是修改产品信息无需触碰页面代码，二是 AI 编程助手能清晰区分“数据层”和“呈现层”，生成更可预测、更易维护的代码。

移动端检查与提交：小步快跑

完成页面构建后，作者特意在移动端进行了检查。这一步常被开发者忽略，但却是确保用户体验的关键。视频中，作者没有展示复杂的调试过程，而是快速确认了布局在手机上的表现，然后执行了提交（commit）。

这种“小步快跑”的节奏贯穿整个系列：每天完成一个明确的任务，提交代码，并布置“作业”。本集的作业是：选择你的细分市场，替换三个产品，构建产品页并提交。明天的任务是实现可工作的购物车。

动态路由（Dynamic Route） 是指路径中包含可变参数的路由模式，例如 /product/[id] 中的 [id] 可以匹配任意产品 ID。在 Next.js 等框架中，文件系统即路由，创建 pages/product/[id].js 即可自动生成对应页面，并通过路由参数获取 ID。动态路由是实现“一个模板驱动多个产品页”的关键技术：无需为每个产品单独创建页面文件，只需维护一份模板和一份数据文件，新增产品时路由会自动生效。这也让 AI 助手更容易理解页面结构，因为路由规则与数据查询逻辑是解耦的。

为什么这个流程值得关注

对于正在探索AI编程的开发者来说，这个视频提供了一个可复用的工作流模板：

1. 用自然语言向AI描述具体需求（如“给我10个细分市场想法”），而不是笼统地说“做一个电商网站”。
2. 将数据与代码分离，让AI专注于生成逻辑，而不是硬编码内容。
3. 每天一个可交付的增量，通过提交和作业形成学习闭环。

说个细节，作者在视频开头提到“Get save points”，这暗示了AI编程中版本控制的重要性——每个提交都是一个存档点，让开发者可以随时回退。

版本控制与提交（Commit） 在 AI 编程工作流中扮演“存档点”的角色。每次提交都记录了一个可工作的代码状态，当 AI 生成的代码出现问题时，开发者可以快速回退到上一个已知良好的版本。视频中提到的“Get save points”正是强调这一点：在快速迭代中，频繁提交比一次性大改动更安全。对于与 AI 协作的开发者，养成“完成一个小任务就提交”的习惯，能有效降低试错成本，并让学习过程形成可追溯的闭环。

局限与适用场景

这个流程适合快速原型和小型电商项目，但对于需要复杂库存管理、支付集成或高并发的生产环境，仍需更完整的架构。不过，作为学习AI编程的练习，它足够聚焦，也足够实用。如果你正在寻找一个上手项目，不妨按照视频的作业步骤试一试。