diff --git a/RuoYi-Vue/docs/superpowers/specs/2026-07-07-easycode-homepage-product-showcase-design.md b/RuoYi-Vue/docs/superpowers/specs/2026-07-07-easycode-homepage-product-showcase-design.md
new file mode 100644
index 0000000..624915a
--- /dev/null
+++ b/RuoYi-Vue/docs/superpowers/specs/2026-07-07-easycode-homepage-product-showcase-design.md
@@ -0,0 +1,139 @@
+# EasyCode 主页产品能力陈列改版设计
+
+## 目标
+
+将 `easycode-web` 的主页从单一生成流程引导，改成“产品能力陈列 + 生成旅程主线”的首页。页面要让用户一眼知道 EasyCode 不只是生成表结构，而是覆盖需求、系统蓝图、数据库、页面、图表、代码文档、运行预览和源码交付的全链路项目生成平台。
+
+已确认方向：
+
+- 首页采用产品能力陈列方向，而不是只做工作台入口或登录后的项目总览。
+- 能力组织方式采用“按生成旅程组织”，避免功能入口墙过于分散。
+- 只改 `easycode-web` 主页内容和样式，不新增接口，不改后端生成链路。
+
+## 当前基础
+
+现有前台已经具备这些业务能力：
+
+- `/generate?mode=one-click`：一键生成完整项目，包含项目名称、项目描述、AI 生成需求、视觉主题、用户前台开关、代码模板、生成进度、业务闭环报告、预览和下载入口。
+- `/generate?mode=expert`：高级调整数据库设计、ER 图和页面设计，并重新同步生成结果。
+- `/projects`：我的项目列表，支持继续编辑、图表中心、论文初稿、代码解读、预览、下载和删除。
+- `/project/:projectId/diagrams`：图表中心，支持 ER、功能模块图、系统架构图、流程图、用例图、时序图、UML 类图等。
+- `/project/:projectId/paper-draft`：论文初稿生成和编辑。
+- `/project/:projectId/code-analysis`：代码解读报告生成和编辑。
+- `/project/:projectId/preview`：项目结构、代码预览、运行预览、源码下载。
+- `/source-store`：源码项目库。
+
+现有主页已有关键词输入、示例业务、流程卡片、交付内容和适用场景，但没有充分展示图表中心、论文初稿、代码解读、源码库、视觉主题和闭环报告等现有业务功能。
+
+## 页面结构
+
+### 1. 首屏
+
+首屏保留关键词生成入口，但文案升级为平台级定位：
+
+- Eyebrow：`EasyCode 全链路项目生成平台`
+- 标题：强调“从业务描述到可运行源码交付”
+- 说明文案：概括 AI 需求、系统蓝图、数据库、页面、图表、运行预览和源码下载
+- 输入框：继续使用业务关键词输入
+- 主按钮：进入 `/generate?mode=one-click`，带上非空 `keyword`
+- 辅助按钮：查看我的项目、进入源码库
+- 示例关键词：客户管理、设备巡检、合同审批、售后工单
+
+首屏右侧展示一个紧凑的能力摘要，而不是只展示 5 步流程：
+
+- 一键模式 / 高级调整
+- AI 生成需求
+- 业务闭环报告
+- 预览与下载
+
+### 2. 生成旅程能力地图
+
+主体用 8 个阶段展示产品能力，每个阶段包含标题、短说明和关联功能：
+
+1. 需求与项目设置：AI 需求、视觉主题、代码模板、用户前台开关
+2. 系统蓝图：角色、菜单、前后台范围、模块设计
+3. 数据库与 ER：表结构、字段、关系、ER 图
+4. 页面与业务块：前台页面、后台页面、查询表单、轮播公告等业务块
+5. 图表中心：ER、流程、架构、用例、时序、UML 类图等图表
+6. 代码与文档：代码解读报告、论文初稿
+7. 运行预览：后端、用户前台、后台前端预览
+8. 源码交付：项目结构预览、源码下载、源码库沉淀
+
+地图应像产品能力导航，而不是过长说明文。每个卡片保持可扫描，重点信息控制在 2 到 3 行。
+
+### 3. 延展能力
+
+在旅程地图下方展示 4 个延展能力：
+
+- 源码库：沉淀可交付、可运行、可二开的企业级源码项目
+- 图表中心：从项目数据生成多类型图表并支持导出
+- 代码解读：生成项目源码分析报告
+- 论文初稿：基于项目生成正文初稿并支持编辑
+
+这些卡片需要有明确入口或提示：
+
+- 源码库跳转 `/source-store`
+- 我的项目跳转 `/projects`，再进入图表中心、代码解读、论文初稿
+
+### 4. 适用场景
+
+保留场景区，但让它服务于产品能力解释：
+
+- 客户与商机管理：CRM 类项目生成
+- 设备巡检与维保：台账、计划、异常、工单流程
+- 合同审批流：拟定、审批、归档、付款状态
+- 源码二开与交付：生成可运行骨架，沉淀到源码库复用
+
+### 5. 快捷入口
+
+页面底部增加轻量快捷入口，避免用户读完能力介绍后没有下一步：
+
+- 立即创建项目：`/generate?mode=one-click`
+- 查看我的项目：`/projects`
+- 浏览源码库：`/source-store`
+
+## 交互与数据流
+
+- `useExample(example)` 继续只填充关键词，不自动跳转。
+- `handleGenerate()` 继续跳转 `/generate`，query 包含 `mode: 'one-click'` 和可选 `keyword`。
+- `goProjects()` 继续跳转 `/projects`。
+- 新增 `goSourceStore()` 跳转 `/source-store`。
+- 不请求新接口，不依赖登录态渲染不同内容。
+- 需要登录的目标页继续由现有路由守卫处理。
+
+## 视觉与响应式
+
+- 沿用当前 `easycode-web` 的 Element Plus、8px 卡片圆角、浅色背景和克制的蓝色主色。
+- 避免全页只使用单一蓝色，能力图标使用蓝、青、琥珀、靛、绿色、紫、红棕、深灰等语义色。
+- 首屏保持信息密度，不做营销式大图 hero。
+- 卡片不嵌套卡片；区块用自然布局和轻边框卡片表达。
+- 桌面端首屏为左右布局，旅程地图为 4 列或自适应多列。
+- 中等屏幕旅程地图降为 2 列。
+- 移动端首屏、能力地图、延展能力和场景区全部单列堆叠。
+- 文字不得溢出按钮、卡片或输入框；长词允许换行。
+
+## 测试
+
+前端现有 `homeView.test.mjs` 是源文件结构测试，需要更新断言，覆盖：
+
+- 主页包含新的平台定位文案。
+- 主页包含 8 个旅程阶段数据。
+- 主页包含延展能力数据。
+- 主页包含源码库入口。
+- `handleGenerate()` 保留 `/generate` 和 `mode: 'one-click'`。
+- 页面仍包含业务关键词示例、场景卡片和项目入口。
+
+还需要运行：
+
+- `node --test src/views/homeView.test.mjs`
+- `npm run build`
+
+如本地依赖或环境阻塞构建，需要记录具体失败原因。
+
+## 非目标
+
+- 不新增后端接口。
+- 不改变登录、注册、项目列表、工作台、预览页、源码库的路由或行为。
+- 不做登录后的动态统计仪表盘。
+- 不新增远程图片、生成图片或新的图标库。
+- 不重构全局布局、导航或主题体系。