本项目是一个围绕“订餐系统”展开的完整产品实践项目，覆盖了从产品需求构思、竞品研究、产品方案设计、PRD 编写、原型生成输入稿整理、Stitch 原型图生成，到前端项目开发与界面还原实现的完整流程。

项目目标不是单纯完成一个页面 Demo，而是模拟真实产品从 0 到 1 的落地过程：先明确业务场景和用户角色，再沉淀可执行的产品文档与原型输入材料，随后将设计稿转化为可运行的前端系统，最终形成一个可在线访问的订餐系统项目。

在线体验地址：

https://food.19547452220.xyz/

订餐系统常见于企业内部午餐、团餐预订、食堂订餐、商家备餐以及订单管理等场景。相比普通外卖平台，本项目更关注“规则清晰、流程闭环、状态透明、操作高效”的业务目标。

在产品设计阶段，本项目围绕企业内部订餐场景进行拆解，重点考虑员工下单、商家接单与出餐、后台管理与数据核对等核心流程，并通过文档化方式逐步将需求转化为可设计、可开发、可验收的项目材料。

本项目按照“产品设计 → 原型产出 → 代码实现 → 界面还原开发”的顺序推进，整体流程如下。

在产品设计阶段，项目首先明确了订餐系统的一期定位、目标用户、核心场景和功能边界。

这一阶段主要完成了以下工作：

• 明确项目定位：面向企业内部订餐场景的一期订餐系统。
• 梳理用户角色：员工、商家操作人员、运营/管理员、财务等。
• 拆解业务流程：菜单浏览、加入购物车、提交订单、支付、商家接单、备餐、出餐、订单查询、取消与退款等。
• 明确一期范围：优先完成订餐主流程、商家处理流程、后台查询与配置能力。
• 控制非目标范围：暂不展开复杂营销、会员积分、骑手调度、多城市平台化运营等能力。
• 输出产品设计相关文档，为后续 PRD、原型和开发提供依据。

在这一阶段，项目借助 skill 辅助完成需求梳理、竞品分析、产品方案组织和 PRD 结构化输出，提高了产品设计文档的完整度和一致性。

在需求沉淀阶段，项目参考了外卖平台、企业团餐、餐饮 SaaS 等相关产品形态，对订餐流程、订单状态、商家处理、售后退款、后台管理等能力进行了对比分析。

该阶段的目标是从成熟产品中提炼可复用的体验经验，同时避免把外卖平台的复杂能力不加筛选地引入到一期项目中。

本阶段产出了：

• 文档产出/竞品分析与体验研究.md
• 文档产出/订餐系统产品方案.md
• 文档产出/订餐系统PRD.md

在完成产品方案和 PRD 后，项目进一步整理出《订餐系统原型生成输入稿.md》。

这份文档的作用是将产品需求转化为更适合原型工具理解和执行的输入材料，重点描述页面结构、端形态、关键组件、业务状态、异常场景、默认文案和交互规则。

该阶段明确了：

• 员工端以移动端体验为主，覆盖菜单、菜品详情、购物车、结算、支付、订单列表、订单详情等页面。
• 商家端以移动端高效处理订单为主，覆盖新订单、备餐、出餐、退款处理等页面。
• 管理后台以 PC 端管理效率为主，覆盖数据概览、餐次配置、菜单库存、订单查询、导出、退款管理等能力。
• 原型需要体现默认态、空状态、加载态、异常态以及关键按钮的可用/禁用逻辑。

本阶段核心产出为：

• 文档产出/订餐系统原型生成输入稿.md

完成《订餐系统原型生成输入稿.md》后，项目将该输入稿提交到 Stitch 中，用于生成订餐系统的设计图/原型图。

Stitch 生成的原型图为后续界面还原提供了视觉参考和页面结构依据，使开发阶段不再只依赖抽象需求文档，而是可以基于更具体的设计稿进行页面拆解、组件实现和交互还原。

本阶段产出内容包括：

• Stitch 生成的页面设计图/原型图。
• 原型页面对应的截图资源。
• 部分页面的 HTML 原型代码。

相关文件位于：

• 原型图/

在开发阶段，项目基于前面产出的产品文档、原型输入稿和 Stitch 设计图继续推进前端实现。

前端工程位于：

• FoodOrderingSystem/

当前前端项目以 Vue 3 为主要开发框架，并结合 TypeScript、Vite、Vue Router、Pinia 等工具完成页面结构、路由组织、状态管理和业务数据模拟。

开发阶段主要完成了：

• 员工端订餐流程页面实现。
• 商家端订单处理流程页面实现。
• 管理后台相关页面实现。
• 登录与角色路由控制。
• Mock 数据与业务状态流转模拟。
• 基于原型图进行界面结构、视觉层级和交互流程还原。
• 形成可构建、可部署、可在线访问的前端项目。

经过产品设计、原型生成和前端开发后，项目最终完成在线部署，形成可访问的订餐系统。

在线访问地址：

https://food.19547452220.xyz/

本项目在产品设计与文档产出过程中使用了来自 Fokkyp/claude-skills 项目的 skill 能力支持，用于辅助完成竞品分析、PRD 生成、产品方案整理以及原型输入稿组织等工作。

Skill 来源地址：

https://github.com/Fokkyp/claude-skills

本项目中重点使用或参考的 skill 能力包括：

• competitive-analysis：用于辅助梳理竞品范围、对比维度、体验研究结论和产品启发。
• prd-generator：用于辅助组织产品背景、目标用户、功能范围、业务流程、页面说明、验收标准等 PRD 内容。
• 产品文档与原型输入整理相关能力：用于将产品方案进一步转化为可输入到原型生成工具的结构化说明。

这些 skill 帮助项目在早期阶段更快形成结构清晰、逻辑完整、可继续传递给设计和开发环节的文档材料。

本项目完整产出了从产品到开发的多类材料。

位于 文档产出/ 目录，主要包括：

• 竞品分析与体验研究.md
• 订餐系统产品方案.md
• 订餐系统PRD.md
• 开发前评审与交付清单.md
• 订餐系统系统制作说明.md

这些文档用于说明项目背景、用户角色、核心流程、功能范围、业务规则、页面结构、交付标准和开发边界。

核心文件：

• 文档产出/订餐系统原型生成输入稿.md

该文档承接 PRD 和产品方案，用于向 Stitch 输入更明确的页面、组件、状态和交互要求，是从产品文档走向设计图的重要中间产物。

相关文件位于：

• 原型图/

该目录保存了 Stitch 生成的原型页面、截图和页面代码，为后续前端界面还原提供参考。

前端工程位于：

• FoodOrderingSystem/

主要包含：

• Vue 3 前端项目代码。
• 页面组件与布局。
• 路由配置。
• 状态管理。
• Mock 数据和业务服务。
• 构建与测试相关配置。

项目已完成部署，可通过以下地址访问：

https://food.19547452220.xyz/

项目不是直接从代码开始，而是完整经历了产品设计、竞品分析、PRD 输出、原型输入、设计图生成和前端开发实现，形成了一条清晰的产品落地链路。

项目先输出《订餐系统原型生成输入稿.md》，再将其输入 Stitch 生成设计图/原型图，随后基于设计稿继续开发。这种方式降低了需求理解偏差，也让页面实现更有依据。

开发阶段围绕已生成的原型图进行页面拆解和界面还原，使最终系统既保留产品设计意图，也具备可访问、可交互的前端实现。

项目覆盖员工端、商家端和管理后台三个角色视角，围绕订餐业务主流程建立页面和状态流转，而不是只停留在单一页面展示。

通过使用 Fokkyp/claude-skills 中的相关 skill，项目在竞品分析、PRD 生成和原型输入稿整理阶段获得了结构化辅助，提高了文档产出效率和流程规范性。

项目保留了产品文档、原型输入稿、Stitch 原型图、前端代码和在线访问地址，便于复盘整个系统从构思到上线的过程。

.
├── FoodOrderingSystem/          # 前端工程代码
├── 原型图/                       # Stitch 生成的设计图、截图与原型代码
├── 文档产出/                     # 产品设计、PRD、竞品分析、原型输入稿等文档
├── 订餐系统-资料/                # 项目资料
└── README.md                    # 项目说明文档

进入前端项目目录：

cd FoodOrderingSystem

安装依赖：

npm install

启动本地开发服务：

npm run dev

生产环境构建：

npm run build

预览构建产物：

npm run preview

前端项目主要使用以下技术和工具：

• Vue 3
• TypeScript
• Vite
• Vue Router
• Pinia
• Vitest
• Playwright
• ESLint / Oxlint / Prettier

项目当前以 Mock 数据支撑业务流程演示，重点放在订餐业务流程、界面还原和前端交互实现上。

项目在线访问地址：

https://food.19547452220.xyz/

特别感谢 Fokkyp/claude-skills 项目作者提供的 skill 支持。

在本项目的产品设计、竞品分析、PRD 生成、原型输入稿整理等环节中，相关 skill 为文档结构化、流程梳理和产出效率提供了重要帮助，使项目能够更顺畅地从产品构思推进到原型产出和代码实现。

仓库地址：

https://github.com/Fokkyp/claude-skills