Design OS核心功能解析四大阶段助力高效产品开发【免费下载链接】design-osThe missing design process between your product idea and your codebase.项目地址: https://gitcode.com/gh_mirrors/de/design-osDesign OS是一款强大的产品规划与设计工具它能帮助你在产品创意与代码实现之间搭建起缺失的设计流程。通过四个核心阶段Design OS引导你完成从产品愿景定义到数据模型构建再到UI设计和最终代码导出的全过程让产品开发更加高效有序。一、产品规划阶段奠定产品基础的关键步骤产品规划是Design OS的第一个阶段也是整个产品开发的基础。在开始设计任何屏幕之前你需要完成以下关键步骤1. 产品愿景定义通过/product-vision命令你可以与AI进行对话确立产品的核心身份。这包括定义产品名称、1-3句话的产品描述、要解决的问题与解决方案以及主要功能。最终会生成product/product-overview.md文件为整个产品开发提供清晰的方向。2. 产品路线图规划使用/product-roadmap命令将产品分解为3-5个部分。每个部分代表应用UI中的一个导航项、一个可独立设计和构建的功能区域以及开发路线图中的一个逻辑阶段。AI会根据产品概述提出建议并讨论排序生成product/product-roadmap.md文件。3. 数据模型设计通过/data-model命令定义产品中的核心实体。重点在于概念层面包括实体名称、简单描述和实体间的关系而不是技术细节。AI会生成product/data-model/data-model.md文件为后续开发提供数据基础。4. 设计标记选择使用/design-tokens命令选择产品的视觉标识。包括从Tailwind的内置调色板中选择主色调、辅助色和中性色以及从Google Fonts中选择标题、正文和等宽字体。这一步会创建product/design-system/colors.json和product/design-system/typography.json文件。5. 应用外壳设计通过/design-shell命令设计包裹所有部分的持久导航和布局。可以选择侧边栏导航、顶部导航或最小标题栏等常见模式并定义用户菜单位置、响应式行为和其他导航项。这一步会生成多个React组件文件如src/shell/components/AppShell.tsx和src/shell/components/MainNav.tsx等。二、设计部分阶段打造产品功能的核心环节完成产品规划后就可以进入设计部分阶段。你需要为路线图中的每个部分完成以下步骤1. 部分塑造使用/shape-section命令定义该部分的功能。这是一个对话过程确立概述、用户流程、UI要求和范围边界。AI会创建product/sections/[section-id]/spec.md文件为后续设计提供指导。2. 样本数据创建通过/sample-data命令基于规范生成真实的样本数据。AI会分析部分规范并提出数据结构包括实体、关系和5-10条真实的样本记录。同时会自动生成TypeScript类型创建product/sections/[section-id]/data.json和product/sections/[section-id]/types.ts文件。3. 屏幕设计使用/design-screen命令为部分构建实际的React组件。这一步会创建可导出的组件通过props接收数据和回调和预览包装器仅用于Design OS。所有屏幕设计都包括移动响应式设计、明暗模式支持、设计标记应用和所有规范要求的实现。生成的文件包括src/sections/[section-id]/components/[ViewName].tsx和src/sections/[section-id]/[ViewName].tsx等。4. 截图捕获可选通过/screenshot-design命令可以为屏幕设计捕获截图用于文档。该命令会自动启动开发服务器导航到屏幕设计隐藏Design OS导航栏并捕获全页截图。截图会保存为product/sections/[section-id]/[screen-name].png文件。三、代码库实现阶段将设计转化为实际产品从Design OS导出设计后你将获得一个完整的交付包准备进行实现。以下是与AI编码代理合作构建产品的关键步骤1. 实现方法选择有两种主要的实现方法可供选择增量实现推荐对于较大的产品或希望逐步审查进度的情况按照instructions/incremental/目录下的指导依次完成基础、外壳和各个部分的实现。一次性实现对于较简单的产品或希望在一个会话中构建所有内容的情况使用product-plan/prompts/one-shot-prompt.md文件添加额外说明后复制到编码代理中。2. 测试驱动开发每个部分都包含一个tests.md文件提供详细的测试编写说明。建议采用TDD方法阅读测试说明、编写失败测试、实现功能、重构代码。测试说明包括用户流程测试、空状态测试、组件交互测试和边缘情况测试且与框架无关。3. 规范驱动开发同时推荐采用规范驱动的方法审查设计、提出澄清问题、编写技术规范、先编写测试、实现功能、验证结果。这种方法可以防止因误解而浪费工作并确保后端正确支持前端设计。4. 需要构建的内容Design OS导出提供了完成的UI设计实现代理还需要创建后端数据库模式、API端点、业务逻辑、身份验证、数据层状态管理、数据获取和缓存、集成路由配置、回调实现、错误处理以及测试单元测试和集成测试。四、导出阶段准备完整的产品交付包当设计完成后可以导出实现代理或团队构建产品所需的一切。以下是导出阶段的关键信息1. 何时导出当产品愿景和路线图已定义、至少一个部分有屏幕设计、并且你对设计方向满意时就可以导出了。你可以随时导出它会生成当前设计的快照以后可以随着添加更多部分再次导出。2. 运行导出使用/export-product命令运行导出。该命令会检查先决条件、收集所有设计资产、生成实现说明、生成测试说明、创建导出包并创建一个zip文件以便轻松下载。3. 导出内容导出包product-plan/目录包含多种关键文件现成可用的提示如one-shot-prompt.md和section-prompt.md可直接复制到编码代理中。说明文档包括product-overview.md、one-shot-instructions.md和增量实现说明。设计系统包含CSS自定义属性、Tailwind配置指南和Google Fonts设置。数据模型包括实体描述、TypeScript接口和样本数据。外壳组件包括设计意图、各种组件文件和视觉参考截图。部分组件每个部分都有功能概述、测试说明、可导出组件、TypeScript接口、样本数据和截图。4. 组件特点导出的组件具有基于props、可移植、完整和生产就绪等特点。实现代理的工作是连接回调、替换样本数据、实现错误处理、构建后端API和编写测试。通过这四个核心阶段Design OS为产品开发提供了一个完整而高效的流程从初始规划到最终实现帮助你将产品创意转化为实际代码。无论是新手还是有经验的开发者都能通过Design OS的引导更轻松地构建出高质量的产品。要开始使用Design OS只需克隆仓库https://gitcode.com/gh_mirrors/de/design-os按照提供的文档开始你的产品开发之旅。【免费下载链接】design-osThe missing design process between your product idea and your codebase.项目地址: https://gitcode.com/gh_mirrors/de/design-os创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考