交付电商首页页面时，需完整包含顶部导航栏、搜索输入区、轮播图、商品分类标签、商品网格列表、分页器，并补充移动端适配逻辑，包括断点配置与触摸交互支持。搜索框使用 Input.Search 实现，并自定义放大镜 SVG 图标。商品网格列表仅需实现3列等宽卡片布局，每张卡片包含图片占位符、标题文本和价格数字。商品数据来源于 GET /api/v1/products?limit=12，其中 title 用于渲染商品标题，price 需保留两位小数并添加¥前缀。页面文件放置于 src/pages/HomePage/ 目录下，创建 index.tsx 和 styles.module.scss；同时需创建 src/components/SearchBar/ 与 src/components/ProductCard/。另外，还需确认项目中已安装 @minimaxi/ui@^2.4.0。

你需要为 MiniMax 平台上的 Agent 编写可直接执行的 Coding Plan，让模型能够根据用户在网页端提出的页面需求（例如“做一个带搜索框和商品列表的电商首页”），自动生成结构清晰、步骤明确且可落地的前端代码实现路径。

明确 Coding Plan 的核心目标

这一步不是直接写代码，而是使用自然语言把需求描述清楚：最终要交付什么页面、依赖哪些模块、各模块之间如何协同。输出必须为纯文本 plan，不包含任何代码块或 JSON 格式。

MiniMax Agent会依据这份 plan 调用工具并生成实际代码，因此plan 中不能出现“用 React 写一个组件”这类表达宽泛、执行边界不明确的指令，而应进一步拆解成可直接执行的步骤，例如：创建 src/pages/HomePage.tsx 文件 → 定义 HomePage 组件 → 在组件内部渲染 SearchBar 和 ProductList 两个子组件 → 两个子组件分别定义在 src/components/ 目录下。只有这样，代码生成流程才会更清晰，产出的页面结构也会更加稳定。

按功能区块拆解页面需求

拿到用户的原始页面描述后，先识别出独立的功能区块。例如“带搜索框和商品列表的电商首页”，应拆解为：顶部导航栏、搜索输入区、轮播图、商品分类标签、商品网格列表、分页器。

每个区块单独一行列出，不编号、不加额外说明。区块名称要尽量具体（如“商品网格列表”而不是“内容区”），并且必须是前端页面中可独立实现的功能单元。

注意：如果用户明确提到“响应式”或“移动端适配”，必须单独列出一项：“移动端适配逻辑（含断点、触摸交互）”。如果遗漏这一项，Agent 生成的电商首页代码很容易在手机端出现布局错位、点击区域异常或触摸交互失效的问题。

为每个区块指定技术实现方式

方法一：复用已有组件库
若项目已接入 Ant Design 或 Arco Design，可直接写明“使用 【Input.Search】 实现搜索框，禁用默认搜索图标，右侧挂载自定义放大镜 SVG”，以便快速生成统一风格的搜索区域。

方法二：手写轻量组件
若没有现成组件可复用，则需要写清最小实现边界。例如“商品网格列表：仅实现 3 列等宽卡片布局，每张卡片包含图片占位符 + 标题文本 + 价格数字，不实现图片懒加载、骨架屏或复杂交互动效”。

方法三：调用外部服务接口
如果页面需要动态数据，必须明确写出接口路径与字段映射规则。例如“商品列表数据来自 GET /api/v1/products?limit=12，响应中的 title 字段渲染为商品卡片标题，price 字段保留两位小数并加¥前缀”，这样可以保证商品列表的数据展示逻辑准确无误。

定义文件组织与依赖关系

第一步：在 src/ 目录下新建 pages/HomePage/ 子目录。
第二步：在该目录中创建 index.tsx（主页面入口）和 styles.module.scss（仅存放当前页面独有样式）。
第三步：检查 src/components/ 下是否存在 SearchBar 和 ProductCard；若不存在，则在 plan 中追加“需同步创建 src/components/SearchBar/ 和 src/components/ProductCard/ 两个目录”。
第四步：确认 package.json 中已安装 @minimaxi/ui@^2.4.0，否则 plan 开头需加入“执行 npm install @minimaxi/ui@^2.4.0 --sa ve”。

这一步必须严格按照文件系统路径书写，大小写和斜杠方向都不能出错。MiniMax Agent 不会自动修正路径拼写错误，【src/pages/homepage/index.tsx 会被视为完全不同的文件】。