Claude Code提示词案例
需求开发一个详情页
1. 要进行开发的文件：E:\source\website-admin\ui\src\views\successStories\detail\index.vue
2. 页面的内容根据动态路由传递过来的id不同而有所变化，总共有10不同的id，分别对应E:\source\website-admin\ui\src\views\successStories\index\story-data.ts文件中storyCards数组的id
请使用数组保存这些动态变化的部分，变化的部分如下：
2.1 顶部banner图总共6类，字段是categoryName，E:\source\website-admin\ui\src\assets\images\edu\detial文件夹下有6个对应的图片
2.2 解决方案配图总共10类，E:\source\website-admin\ui\src\assets\images\edu\detial文件夹下有10个对应的图片
2.3 页面文案总共10类，E:\source\m-job\figma\edu\detail文件夹下有10个以id命名的html文件，这些文件是从figma中导出的，包含了对应的文案，你可以从这里提取文案
3.页面中的图片需要在css文件中通过background-image进行引用，图片资源的目录是E:\source\website-admin\ui\src\assets\images\edu\detial
4.参考网页文件夹是E:\source\website-admin\ui\src\views\successStories\index
5.路由配置文件E:\source\website-admin\ui\src\router\index.ts
6.导航组件文件夹E:\source\website-admin\ui\src\components\nav
我的需求是否合理，请给出你的建议，先别改代码
好的！现在我已经全面了解了你的需求。让我给你专业的分析和建议：
📋 需求分析
你的需求非常合理且清晰！这是一个典型的动态详情页开发需求。让我逐项分析：
✅ 需求合理性评估
| 需求项 | 合理性 | 说明 |
|---|---|---|
| 动态路由传递 ID | ✅ 完全合理 | 路由已配置/successStories/detail/:id，符合 Vue Router 最佳实践 |
| 数据结构设计 | ✅ 完全合理 | 通过数组保存动态内容，易于维护和扩展 |
| 图片资源管理 | ✅ 完全合理 | CSS background-image 方式，与列表页保持一致 |
| Figma 提取文案 | ✅ 完全合理 | 从 HTML 提取文案是标准做法 |
| 参考页面结构 | ✅ 完全合理 | 复用列表页的样式规范，保持一致性 |
📊 资源完整性核查
图片资源：
- ✅ 6 个类别 banner 图：
教育.png、科研.png、能源.png、医疗.png、政府.png、企事业.png - ✅ 10 个解决方案配图：每个 ID 对应的图片都有
- ✅ 额外的通用图：
价值体现.png
文案资源：
- ✅ 10 个 HTML 文件：
edu-1.html到enterprise-2.html - ✅ 文件命名与 ID 完全匹配
🏗️ 页面结构分析（从 Figma HTML）
根据edu-1.html分析，详情页包含以下模块：
1. Hero Banner 区域（顶部大图 + 标题 + 描述） ↓ 2. 需求分析模块（标题 + 列表项） ↓ 3. 解决方案模块（标题 + 配图 + 功能列表） ↓ 4. 价值体现模块（标题 + 内容）💡 专业建议
1.数据结构设计建议
创建一个独立的详情页数据配置文件：
// detail-data.ts export interface DetailContent { id: string categoryName: string title: string description: string bannerImage: string // 顶部 banner 图（6类） solutionImage: string // 解决方案配图（10类） color: string // 主题色（继承自 story-data.ts） // 需求分析 demandAnalysis: { title: string items: string[] } // 解决方案 solution: { title: string features: { name: string description: string }[] } // 价值体现 value: { title: string items: string[] } }2.文件组织建议
successStories/ ├── index/ # 列表页 │ ├── index.vue │ ├── index.css │ └── story-data.ts └── detail/ # 详情页 ├── index.vue ├── index.css └── detail-data.ts # 新建：详情页数据3.开发流程建议
推荐顺序：
第一步：提取文案数据
- 从 10 个 Figma HTML 中提取所有文案
- 整理到
detail-data.ts数据文件 - 建立 ID 与数据的映射关系
第二步：创建页面骨架
- 参考列表页的样式规范
- 创建基础 HTML 结构
- 实现路由参数获取和数据匹配
第三步：样式实现
- Hero Banner 区域
- 需求分析模块
- 解决方案模块（左图右文）
- 价值体现模块
第四步：响应式适配
- 桌面端、平板、移动端
- 参考列表页的断点设置
第五步：交互优化
- 返回按钮
- 相关案例推荐（可选）
- 过渡动画
4.技术实现要点
✅ 要做的：
路由参数处理
const route = useRoute() const storyId = route.params.id as string数据匹配
const detailData = computed(() => { return detailDataList.find(item => item.id === storyId) })404 处理
- 如果 ID 不存在，显示友好的错误提示
- 提供返回列表页的按钮
SEO 优化
- 动态设置页面标题
- Meta 信息
图片命名映射
- Banner 图：根据
categoryName映射（如教育.png） - 解决方案图：根据
id映射（如AI赋能高校教学管理.png）
- Banner 图：根据
⚠️ 注意事项：
类别到Banner图的映射
const categoryBannerMap = { '教育': '教育.png', '科研': '科研.png', '能源': '能源.png', '医疗': '医疗.png', '政务': '政府.png', // 注意：文件名是"政府"不是"政务" '企事业': '企事业.png' }复用列表页的样式变量
- 颜色、字体、间距等应与列表页保持一致
- 考虑提取公共 CSS 变量
图片路径管理
- 统一使用相对路径
- 注意
detial文件夹的拼写（应该是detail但实际是detial）
5.性能优化建议
图片懒加载
- 解决方案配图较大，考虑懒加载
数据预加载
- 详情页数据可以在列表页点击时预加载
代码分割
- 详情页已在路由中配置了懒加载 ✓
6.用户体验建议
面包屑导航
首页 > 成功故事 > AI赋能高校教学管理相关案例推荐
- 页面底部显示同类别的其他案例
- "您可能还感兴趣" 模块
分享功能（可选）
- 社交媒体分享按钮
- 复制链接
返回顶部按钮
- 详情页内容较长，建议添加
7.数据提取建议
从 Figma HTML 提取数据时：
- ✅ 使用结构化的方式组织数据
- ✅ 保持文案的层级关系
- ✅ 提取所有小标题和描述
- ✅ 注意特殊符号和格式
📝 开发计划
建议的开发步骤：
准备阶段(30分钟)
- 从 10 个 HTML 文件提取所有文案
- 创建
detail-data.ts数据文件
骨架阶段(20分钟)
- 创建基础 Vue 组件
- 实现路由参数获取
- 实现数据匹配逻辑
样式阶段(40分钟)
- Hero Banner
- 需求分析模块
- 解决方案模块
- 价值体现模块
响应式阶段(20分钟)
- 三个断点适配
优化阶段(10分钟)
- 交互优化
- 错误处理
- 测试
✨ 总结
你的需求设计非常专业和完整！
优势：
- ✅ 路由配置合理
- ✅ 数据结构清晰
- ✅ 资源准备充分
- ✅ 参考文件完整
- ✅ 技术方案可行
注意点：
- ⚠️ 图片文件夹名是
detial（拼写错误）但要接受现实 - ⚠️ "政务"类别的 banner 图文件名是"政府.png"
- ⚠️ 需要建立 ID 到图片文件名的映射
准备好了吗？我可以马上开始开发！要不要我现在就开始？