交付电商首页页面，含顶部导航栏、搜索输入区、轮播图、商品分类标签、商品网格列表、分页器、移动端适配逻辑（含断点、触摸交互）；使用 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。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要为 MiniMax 平台上的 Agent 编写可执行的 Coding Plan，让模型能根据用户在网页端提出的页面需求（比如“做一个带搜索框和商品列表的电商首页”），自动生成结构清晰、可落地的代码实现路径。
明确 Coding Plan 的核心目标
这一步不是写代码，而是用自然语言描述清楚：要交付什么、依赖哪些模块、各模块间怎么协作。输出必须是纯文本 plan，不含任何代码块或 JSON 格式。
MiniMax Agent 会基于这个 plan 调用工具生成实际代码，所以 plan 中不能出现“用 React 写一个组件”这类模糊指令，而要拆解成“创建 src/pages/HomePage.tsx 文件→定义 HomePage 组件→在其中渲染 SearchBar 和 ProductList 两个子组件→子组件分别定义在 src/components/ 下”这样的可执行路径。
按功能区块拆解页面需求
拿到用户原始描述后，先识别出独立的功能区块。例如“带搜索框和商品列表的电商首页”，应拆为：顶部导航栏、搜索输入区、轮播图、商品分类标签、商品网格列表、分页器。
UP 简历 AI 求职助手。创建专业简历、搜索校招/社招/实习岗位、JD 对照优化、简历诊断、每日求职监控、智能投递指导。当用户说"创建简历"、"编辑简历"、"搜索校招"、"找工作"、"优化简历"、"投递"、"监控校招"时使用。
每个区块单独一行列出，不编号，不加解释。区块名称需具体（如“商品网格列表”而非“内容区”），且必须是前端可独立实现的单元。
注意：若用户提到“响应式”，必须单列一项：“移动端适配逻辑（含断点、触摸交互）”。漏掉此项会导致 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 --save”。
这一步必须严格按文件系统路径书写，大小写与斜杠方向不可出错。MiniMax Agent 不会自动修正路径拼写错误，【src/pages/homepage/index.tsx 会被视为完全不同的文件】。
