即刻App年轻人的同好社区
下载
AI 驱动的主题设计新模式，比传统方式快 3x
传统主题设计：
耗时：设计师 + 前端 2 人协作，需要 2-3 天反复沟通、校稿、调整。
痛点：耗时费力，沟通成本高，容易出现返工。
AI 主题设计：
耗时：仅需 2-4 小时即可完成。
优势：
高效智能： AI 提供多组不同风格的配色方案，快速满足你的需求。
灵活定制： 你可以基于初始色值（如 slate, sky, green 等）生成配色，也可以加入元素组合，进一步定制化。
快速转换： AI 可以将配色方案转化为 tailwindcss HSL 颜色数值，方便快速集成。
迭代优化： 不满意？没关系，让 AI 继续生成新的配色，或者加入新的元素，直到找到完美方案。
重要提示：
配色首选 Claude 3.5 Sonnet： 在众多 AI 中，我发现 Claude 3.5 Sonnet 在配色方案生成方面表现最为友好，它能更准确理解你的需求，无需反复调整提示词，就能为你提供令人满意的配色方案。如果你尝试其他 AI，可能需要耗费更多时间进行提示词调整。
举个例子：
之前的版本可能色彩过于鲜亮，现在这个新版本，你觉得怎么样？你更喜欢哪种主题色？
传统主题设计：
耗时：设计师 + 前端 2 人协作，需要 2-3 天反复沟通、校稿、调整。
痛点：耗时费力，沟通成本高，容易出现返工。
AI 主题设计：
耗时：仅需 2-4 小时即可完成。
优势：
高效智能： AI 提供多组不同风格的配色方案，快速满足你的需求。
灵活定制： 你可以基于初始色值（如 slate, sky, green 等）生成配色，也可以加入元素组合，进一步定制化。
快速转换： AI 可以将配色方案转化为 tailwindcss HSL 颜色数值，方便快速集成。
迭代优化： 不满意？没关系，让 AI 继续生成新的配色，或者加入新的元素，直到找到完美方案。
重要提示：
配色首选 Claude 3.5 Sonnet： 在众多 AI 中，我发现 Claude 3.5 Sonnet 在配色方案生成方面表现最为友好，它能更准确理解你的需求，无需反复调整提示词，就能为你提供令人满意的配色方案。如果你尝试其他 AI，可能需要耗费更多时间进行提示词调整。
举个例子：
之前的版本可能色彩过于鲜亮，现在这个新版本，你觉得怎么样？你更喜欢哪种主题色？
00:48
4 12
传统编程范式 和 AI 编程范式做产品的最大区别在于，当你不知道一个页面需要做什么，让AI给你提供选项，让它告诉你功能如何设计、布局如何排版、最佳的编程开发。还可以让你的产品功能变得更丰富，比如可以有很多主题配色方案，AI 一键生成，你们喜欢哪种主题色
00:30
6 40
出海独立开发者，如同孤身漂洋，一个人寻觅关键词，一个人洞察需求，一个人在静谧的浪涛中，敲击着改变世界的代码。
出海独立开发者，困于一方透明气泡，隔绝尘嚣，一个人凝视屏幕，寻找远方的回响。
出海独立开发者，扬帆数字海洋，一个人掌舵，一个人瞭望，一个人在无垠的蓝图中，绘制未来的模样。
出海独立开发者，身处碧海孤岛，内心却连接着世界的脉搏，一个人构思，一个人实践，一个人用代码，打破地域的隔阂。
出海独立开发者，从需求萌芽到产品上线，从一行代码到万千用户，所有环节，皆是一人孤军奋战。
出海独立开发者，困于一方透明气泡，隔绝尘嚣，一个人凝视屏幕，寻找远方的回响。
出海独立开发者，扬帆数字海洋，一个人掌舵，一个人瞭望，一个人在无垠的蓝图中，绘制未来的模样。
出海独立开发者，身处碧海孤岛，内心却连接着世界的脉搏，一个人构思，一个人实践，一个人用代码，打破地域的隔阂。
出海独立开发者，从需求萌芽到产品上线，从一行代码到万千用户，所有环节，皆是一人孤军奋战。
00:05
7 10
后悔药来了！ Cline v3.1 让你的工作永不返工！
- 不小心改错了？ 没关系，像游戏读档一样，一秒回到上一步！ (就像玩游戏存了个档，错了就能读档重来)
- 任务做完，它会给你看看你都改了哪些地方，清清楚楚。 (让你知道自己都做了啥，心里有数)
- 就算电脑自己帮你完成任务，你也能看到每一步的改变，不用担心出问题。 (就算软件自动完成，你也知道它做了什么，更放心)
- 不小心改错了？ 没关系，像游戏读档一样，一秒回到上一步！ (就像玩游戏存了个档，错了就能读档重来)
- 任务做完，它会给你看看你都改了哪些地方，清清楚楚。 (让你知道自己都做了啥，心里有数)
- 就算电脑自己帮你完成任务，你也能看到每一步的改变，不用担心出问题。 (就算软件自动完成，你也知道它做了什么，更放心)
01:58
1 21
Hailuo AI 视频创作迎来“私人订制”时代
Hailuo AI 新增了 Subject Reference 功能，告别过去仅凭文本描述角色特征的模糊性，现在只需上传目标角色图片，Hailuo AI就能精准捕捉其面部轮廓、发型、服饰等关键视觉信息。结合文本指令，你可以更精细地控制角色的表情、动作，甚至特定姿势，实现高度还原。
传统的i2v（Image-to-Video）功能往往受限于固有的生成模式，难以跳脱既有框架。Subject Reference 功能的引入，允许用户以外部图像作为创作的“锚点”，赋予AI更明确的风格参考，从而产出与i2v截然不同的、更具个性化的视频内容。
当你希望视频风格更贴合特定艺术风格（如水彩、油画）、模仿特定动画角色的画风，或融入特定文化元素时，上传相应的参考图片就能引导AI进行创作，实现风格的突破和创新。这为追求差异化表达的用户提供了强大的工具。
Hailuo AI 新增了 Subject Reference 功能，告别过去仅凭文本描述角色特征的模糊性，现在只需上传目标角色图片，Hailuo AI就能精准捕捉其面部轮廓、发型、服饰等关键视觉信息。结合文本指令，你可以更精细地控制角色的表情、动作，甚至特定姿势，实现高度还原。
传统的i2v（Image-to-Video）功能往往受限于固有的生成模式，难以跳脱既有框架。Subject Reference 功能的引入，允许用户以外部图像作为创作的“锚点”，赋予AI更明确的风格参考，从而产出与i2v截然不同的、更具个性化的视频内容。
当你希望视频风格更贴合特定艺术风格（如水彩、油画）、模仿特定动画角色的画风，或融入特定文化元素时，上传相应的参考图片就能引导AI进行创作，实现风格的突破和创新。这为追求差异化表达的用户提供了强大的工具。
00:42
6 63
Cursor SOP 技巧 、操作步骤、示例和文档生成，这方法能够提升生成效率和代码质量：
1. 准备工作 (Documentation & Tracking)：
文档化： 虽然 AI 不能物理地创建文件夹，但你可以告诉 AI 你已经将文档放在哪里，并让它知道这些文档的存在和用途。
指令示例： "请注意，项目的关键文档，包括 PRD、流程图和技术规范，都保存在 Documentation 文件夹中。" 或 "所有设计规范都在 @design_specs 文档中。"
进度追踪： 你需要手动创建这两个文件，然后指示 AI 如何使用它们。
指令示例： "我创建了 progress.md 文件来记录我们的每日进展、遇到的问题和解决方案。请在完成每个主要任务后，更新该文件。"
指令示例： "我们使用 project-status.md 文件来记录每个工作会话的总结和下一步计划。在本次会话结束时，请更新该文件。"
2. 日常 Prompting 核心步骤：
A. 清晰指令：
修复错误： 直接告诉 AI 你要修复错误，并提供相关信息。
指令示例： "代码编译时出现错误：'...'。请分析导致当前错误的根本原因，并提供修复步骤。"
新增功能： 明确说明你要添加什么功能，并引导 AI 参考相关文档。
指令示例： "我们需要添加用户注册功能，参考 @user_auth.md 文档，请说明实现此功能所需的步骤。"
结构化指令： 使用编号或其他明确的分隔符来组织你的指令。
指令示例： "请按照以下步骤操作： 1. 完成侧边栏菜单的样式调整。 2. 为主页添加一个轮播图组件。 3. 参考 @carousel_design.md 文档，说明轮播图的实现方式。"
B. 提供背景 (Context)：
任务更新： 明确地告诉 AI 任务已经完成。
指令示例： "我已经完成了侧边栏菜单的样式调整。" 或 "正如你之前所建议的，菜单对齐已完成。"
进度同步： 指示 AI 更新 progress.md 文件。
指令示例： "@progress 请更新进度文件。我们已完成用户注册功能，但遇到了数据库连接问题，通过更新数据库驱动程序解决了。"
会话总结： 指示 AI 在会话结束时更新 project-status.md。
指令示例： "@project-status 请更新会话总结。回顾我们今天完成的工作，并为下次会话制定初步计划。"
C. 控制执行 (Agent Control & Verification)：
限定范围： 要求 AI 在执行任何代码更改之前，先提供详细的计划。
指令示例： "在开始集成支付功能之前，请先阅读 @payment_integration.md 文档，并使用思维链推理，详细列出支付集成的所有步骤，包括宏观和微观层面的细节。"
计划审查： 仔细阅读 AI 提供的计划，并提出问题或要求修改。
指令示例： "你提供的支付集成计划中，第 3 步似乎缺少了身份验证环节。请补充这部分内容。" 或 "这个计划看起来不错，可以开始执行了。"
3. 特殊情况：
使用 Model 01： 在 Prompt 中明确指出你需要更精确的输出，并提醒 AI 避免无关信息。
指令示例： "使用 Model 01，请提供关于用户登录流程的具体代码实现，重点关注安全方面，避免包含不必要的解释。"
关键策略：
明确地告诉 AI 你要它做什么。 不要假设 AI 知道你的意图。
引用文档时使用 @ 符号。 Cursor 可以识别并读取这些文档。
使用特定的指令词语。 例如 "请分析"，"请说明"，"请更新"，"请列出"。
将 SOP 的步骤转化为对 AI 的任务。 例如，SOP 说要 "记录每日进展"，你就指示 AI "@progress 请记录今天的进展..."
审查 AI 的输出。 不要盲目信任 AI，要检查它的计划和代码是否符合你的预期。
提供反馈。 如果 AI 的表现不佳，要告诉它为什么，并提供更明确的指导。
示例对话流程：
你： "我们今天要开发用户登录功能。相关的设计文档在 @login_design.md。请阅读该文档并告诉我你对登录流程的理解。"
AI： (总结文档内容)
你： "很好。现在，请根据 @login_design.md 中的描述，详细列出实现用户登录功能的所有步骤，包括前端和后端。" (对应 "清晰指令 - 新增功能" 和 "控制执行 - 限定范围")
AI： (列出步骤)
你： "在开始编写代码之前，请在 @progress 文件中记录我们即将开始用户登录功能的开发。" (对应 "提供背景 - 进度同步")
你： (审查 AI 的步骤) "你列出的步骤中缺少了密码加密环节。请在后端步骤中加入密码加密的说明。"
AI： (更新步骤)
你： "现在这个计划看起来更完整了。请开始编写用户登录功能的后端代码。"
(代码编写过程)...
你： "后端代码编写完成。请在 @progress 文件中记录后端开发已完成，并遇到了数据库连接问题，但已通过更新连接字符串解决。" (对应 "提供背景 - 进度同步")
... (继续进行前端开发或其他步骤)...
你： "今天的开发会话即将结束。请更新 @project-status 文件，总结我们今天完成的工作，并为下次会话规划任务。" (对应 "提供背景 - 会话总结")
文档包括：项目需求文档、应用流程文档、Frontent Guidelines 文档、后端结构文档、技术栈文档、文件结构文档
文档生成具体 Prompt 示例：
1. 项目需求文档 (PRD)
基础 Prompt： "请为 [你的项目名称] 撰写一份项目需求文档 (PRD)。该项目旨在 [简要描述项目目标和用途]。目标用户是 [描述目标用户群体]。核心功能包括 [列举核心功能]。请包含以下主要章节：1. 项目目标 2. 目标用户 3. 核心功能详细描述 4. 用户故事示例 5. 非功能性需求（例如性能、安全性） 6. 未来展望。"
更详细的 Prompt： "请为一款名为 [应用名称] 的移动端社交应用撰写详细的项目需求文档 (PRD)。该应用旨在帮助用户 [核心价值主张]，例如“发现和分享本地美食”。目标用户是 [描述目标用户，例如“18-35岁的城市居民，喜欢探索美食并与朋友分享”]。核心功能包括：用户注册/登录、浏览附近餐厅、发布美食评价和照片、关注其他用户、搜索餐厅和菜品、以及简单的消息通知。请详细描述每个核心功能的用户流程和预期行为，并提供至少三个用户故事示例。请考虑以下非功能性需求：应用响应速度快、数据安全可靠、界面简洁易用。请以 Markdown 格式输出。"
2. 应用流程文档
基础 Prompt： "请为 [你的项目名称] 描述其主要的应用流程。从用户 [起始操作] 开始，到用户 [结束操作] 结束，详细描述每一步的操作和系统行为。请以清晰的步骤描述，并指出关键的判断节点。"
更详细的 Prompt： "请描述用户在我们的电商网站上完成一次成功购物的应用流程。从用户浏览商品开始，到用户成功支付订单结束。详细描述每一步的操作（例如：添加到购物车、填写收货地址、选择支付方式）以及系统相应的行为（例如：更新购物车数量、生成订单、调用支付接口）。请指出流程中的关键判断节点，例如：库存不足的情况、支付失败的情况等。请考虑使用流程图的文字描述方式，方便后续生成流程图。"
3. 前端 Guidelines 文档 (Frontend Guidelines)
基础 Prompt： "请为 [你的项目名称] 的前端开发团队制定一份前端开发 Guidelines 文档。包括但不限于代码风格规范、组件命名规范、目录结构建议、状态管理方案、以及常用的 UI 组件和模式。"
更详细的 Prompt： "请为 [你的项目名称] 的前端开发团队制定一份详细的前端 Guidelines 文档。该项目使用 [前端框架，例如 React/Vue/Angular]。请包含以下内容：
代码风格规范（例如：ESLint 配置建议、代码格式化工具建议）
组件命名规范（包括文件夹命名、文件命名、组件命名）
目录结构建议（如何组织 components、pages、assets 等文件夹）
状态管理方案（例如：使用 Redux/Vuex/Context API 的最佳实践）
常用 UI 组件和模式（例如：按钮、表单、列表的通用实现方式）
响应式布局的实现策略
性能优化建议
可访问性 (Accessibility) 最佳实践
请以 Markdown 格式输出。"
4. 后端结构文档 (Backend Structure)
基础 Prompt： "请为 [你的项目名称] 的后端系统设计一份架构文档。包括但不限于系统模块划分、API 设计原则、数据库设计概要、以及安全策略。"
更详细的 Prompt： "请为 [你的项目名称] 的后端系统设计一份详细的架构文档。该后端系统将使用 [后端技术栈，例如：Node.js with Express, Python with Django/Flask]。请包含以下内容：
系统模块划分和职责描述（例如：用户管理模块、商品管理模块、订单管理模块）
API 设计原则（例如：RESTful API 规范、请求方法、状态码使用）
核心 API 端点示例（列举几个重要的 API 接口及其用途）
数据库设计概要（主要数据表及其字段说明）
认证和授权方案
部署架构方案
监控和日志记录策略
请以 Markdown 格式输出。"
5. 技术栈文档 (Technical Stack)
基础 Prompt： "请列出并简要解释 [你的项目名称] 使用的技术栈。包括前端技术、后端技术、数据库、以及其他工具和服务。"
更详细的 Prompt： "请为 [你的项目名称] 编写一份详细的技术栈文档。请列出并详细解释项目中使用的每项技术，包括：
前端技术： （例如：React v18, TypeScript, Redux Toolkit, Tailwind CSS），并说明选择这些技术的原因和优势。
后端技术： （例如：Node.js v16, Express.js, NestJS），并说明选择这些技术的原因和优势。
数据库： （例如：PostgreSQL, MongoDB），并说明选择这些数据库的原因和优势，以及数据库的部署和管理方式。
中间件和工具： （例如：Nginx, Docker, Kubernetes, Redis, Kafka），并说明它们在项目中的作用。
测试框架： （例如：Jest, Cypress），并说明如何进行单元测试和集成测试。
部署平台： （例如：AWS, Azure, Google Cloud），并说明部署方案。
请以 Markdown 格式输出。"
6. 文件结构文档 (File Structure)
基础 Prompt： "请为 [你的项目名称] 的代码仓库设计一份推荐的文件结构。包括前端和后端的目录组织方式，以及核心文件的命名规范。"
更详细的 Prompt： "请为 [你的项目名称] 的代码仓库设计一份详细的文件结构文档。该项目采用 [前端框架] 和 [后端框架]。请分别描述前端和后端的目录结构，并解释每个主要目录的作用。例如：
前端目录结构：
src/: 源代码目录
components/: 通用组件
pages/: 页面组件
assets/: 静态资源
styles/: 样式文件
utils/: 工具函数
services/: API 请求服务
public/: 公共资源
后端目录结构：
src/: 源代码目录
controllers/: 控制器
models/: 数据模型
routes/: 路由定义
services/: 业务逻辑服务
middlewares/: 中间件
config/: 配置文件
database/: 数据库相关
请解释每个目录的作用，并给出关键文件的命名建议（例如：组件文件、路由文件、模型文件）。请以 Markdown 格式输出。"
1. 准备工作 (Documentation & Tracking)：
文档化： 虽然 AI 不能物理地创建文件夹，但你可以告诉 AI 你已经将文档放在哪里，并让它知道这些文档的存在和用途。
指令示例： "请注意，项目的关键文档，包括 PRD、流程图和技术规范，都保存在 Documentation 文件夹中。" 或 "所有设计规范都在 @design_specs 文档中。"
进度追踪： 你需要手动创建这两个文件，然后指示 AI 如何使用它们。
指令示例： "我创建了 progress.md 文件来记录我们的每日进展、遇到的问题和解决方案。请在完成每个主要任务后，更新该文件。"
指令示例： "我们使用 project-status.md 文件来记录每个工作会话的总结和下一步计划。在本次会话结束时，请更新该文件。"
2. 日常 Prompting 核心步骤：
A. 清晰指令：
修复错误： 直接告诉 AI 你要修复错误，并提供相关信息。
指令示例： "代码编译时出现错误：'...'。请分析导致当前错误的根本原因，并提供修复步骤。"
新增功能： 明确说明你要添加什么功能，并引导 AI 参考相关文档。
指令示例： "我们需要添加用户注册功能，参考 @user_auth.md 文档，请说明实现此功能所需的步骤。"
结构化指令： 使用编号或其他明确的分隔符来组织你的指令。
指令示例： "请按照以下步骤操作： 1. 完成侧边栏菜单的样式调整。 2. 为主页添加一个轮播图组件。 3. 参考 @carousel_design.md 文档，说明轮播图的实现方式。"
B. 提供背景 (Context)：
任务更新： 明确地告诉 AI 任务已经完成。
指令示例： "我已经完成了侧边栏菜单的样式调整。" 或 "正如你之前所建议的，菜单对齐已完成。"
进度同步： 指示 AI 更新 progress.md 文件。
指令示例： "@progress 请更新进度文件。我们已完成用户注册功能，但遇到了数据库连接问题，通过更新数据库驱动程序解决了。"
会话总结： 指示 AI 在会话结束时更新 project-status.md。
指令示例： "@project-status 请更新会话总结。回顾我们今天完成的工作，并为下次会话制定初步计划。"
C. 控制执行 (Agent Control & Verification)：
限定范围： 要求 AI 在执行任何代码更改之前，先提供详细的计划。
指令示例： "在开始集成支付功能之前，请先阅读 @payment_integration.md 文档，并使用思维链推理，详细列出支付集成的所有步骤，包括宏观和微观层面的细节。"
计划审查： 仔细阅读 AI 提供的计划，并提出问题或要求修改。
指令示例： "你提供的支付集成计划中，第 3 步似乎缺少了身份验证环节。请补充这部分内容。" 或 "这个计划看起来不错，可以开始执行了。"
3. 特殊情况：
使用 Model 01： 在 Prompt 中明确指出你需要更精确的输出，并提醒 AI 避免无关信息。
指令示例： "使用 Model 01，请提供关于用户登录流程的具体代码实现，重点关注安全方面，避免包含不必要的解释。"
关键策略：
明确地告诉 AI 你要它做什么。 不要假设 AI 知道你的意图。
引用文档时使用 @ 符号。 Cursor 可以识别并读取这些文档。
使用特定的指令词语。 例如 "请分析"，"请说明"，"请更新"，"请列出"。
将 SOP 的步骤转化为对 AI 的任务。 例如，SOP 说要 "记录每日进展"，你就指示 AI "@progress 请记录今天的进展..."
审查 AI 的输出。 不要盲目信任 AI，要检查它的计划和代码是否符合你的预期。
提供反馈。 如果 AI 的表现不佳，要告诉它为什么，并提供更明确的指导。
示例对话流程：
你： "我们今天要开发用户登录功能。相关的设计文档在 @login_design.md。请阅读该文档并告诉我你对登录流程的理解。"
AI： (总结文档内容)
你： "很好。现在，请根据 @login_design.md 中的描述，详细列出实现用户登录功能的所有步骤，包括前端和后端。" (对应 "清晰指令 - 新增功能" 和 "控制执行 - 限定范围")
AI： (列出步骤)
你： "在开始编写代码之前，请在 @progress 文件中记录我们即将开始用户登录功能的开发。" (对应 "提供背景 - 进度同步")
你： (审查 AI 的步骤) "你列出的步骤中缺少了密码加密环节。请在后端步骤中加入密码加密的说明。"
AI： (更新步骤)
你： "现在这个计划看起来更完整了。请开始编写用户登录功能的后端代码。"
(代码编写过程)...
你： "后端代码编写完成。请在 @progress 文件中记录后端开发已完成，并遇到了数据库连接问题，但已通过更新连接字符串解决。" (对应 "提供背景 - 进度同步")
... (继续进行前端开发或其他步骤)...
你： "今天的开发会话即将结束。请更新 @project-status 文件，总结我们今天完成的工作，并为下次会话规划任务。" (对应 "提供背景 - 会话总结")
文档包括：项目需求文档、应用流程文档、Frontent Guidelines 文档、后端结构文档、技术栈文档、文件结构文档
文档生成具体 Prompt 示例：
1. 项目需求文档 (PRD)
基础 Prompt： "请为 [你的项目名称] 撰写一份项目需求文档 (PRD)。该项目旨在 [简要描述项目目标和用途]。目标用户是 [描述目标用户群体]。核心功能包括 [列举核心功能]。请包含以下主要章节：1. 项目目标 2. 目标用户 3. 核心功能详细描述 4. 用户故事示例 5. 非功能性需求（例如性能、安全性） 6. 未来展望。"
更详细的 Prompt： "请为一款名为 [应用名称] 的移动端社交应用撰写详细的项目需求文档 (PRD)。该应用旨在帮助用户 [核心价值主张]，例如“发现和分享本地美食”。目标用户是 [描述目标用户，例如“18-35岁的城市居民，喜欢探索美食并与朋友分享”]。核心功能包括：用户注册/登录、浏览附近餐厅、发布美食评价和照片、关注其他用户、搜索餐厅和菜品、以及简单的消息通知。请详细描述每个核心功能的用户流程和预期行为，并提供至少三个用户故事示例。请考虑以下非功能性需求：应用响应速度快、数据安全可靠、界面简洁易用。请以 Markdown 格式输出。"
2. 应用流程文档
基础 Prompt： "请为 [你的项目名称] 描述其主要的应用流程。从用户 [起始操作] 开始，到用户 [结束操作] 结束，详细描述每一步的操作和系统行为。请以清晰的步骤描述，并指出关键的判断节点。"
更详细的 Prompt： "请描述用户在我们的电商网站上完成一次成功购物的应用流程。从用户浏览商品开始，到用户成功支付订单结束。详细描述每一步的操作（例如：添加到购物车、填写收货地址、选择支付方式）以及系统相应的行为（例如：更新购物车数量、生成订单、调用支付接口）。请指出流程中的关键判断节点，例如：库存不足的情况、支付失败的情况等。请考虑使用流程图的文字描述方式，方便后续生成流程图。"
3. 前端 Guidelines 文档 (Frontend Guidelines)
基础 Prompt： "请为 [你的项目名称] 的前端开发团队制定一份前端开发 Guidelines 文档。包括但不限于代码风格规范、组件命名规范、目录结构建议、状态管理方案、以及常用的 UI 组件和模式。"
更详细的 Prompt： "请为 [你的项目名称] 的前端开发团队制定一份详细的前端 Guidelines 文档。该项目使用 [前端框架，例如 React/Vue/Angular]。请包含以下内容：
代码风格规范（例如：ESLint 配置建议、代码格式化工具建议）
组件命名规范（包括文件夹命名、文件命名、组件命名）
目录结构建议（如何组织 components、pages、assets 等文件夹）
状态管理方案（例如：使用 Redux/Vuex/Context API 的最佳实践）
常用 UI 组件和模式（例如：按钮、表单、列表的通用实现方式）
响应式布局的实现策略
性能优化建议
可访问性 (Accessibility) 最佳实践
请以 Markdown 格式输出。"
4. 后端结构文档 (Backend Structure)
基础 Prompt： "请为 [你的项目名称] 的后端系统设计一份架构文档。包括但不限于系统模块划分、API 设计原则、数据库设计概要、以及安全策略。"
更详细的 Prompt： "请为 [你的项目名称] 的后端系统设计一份详细的架构文档。该后端系统将使用 [后端技术栈，例如：Node.js with Express, Python with Django/Flask]。请包含以下内容：
系统模块划分和职责描述（例如：用户管理模块、商品管理模块、订单管理模块）
API 设计原则（例如：RESTful API 规范、请求方法、状态码使用）
核心 API 端点示例（列举几个重要的 API 接口及其用途）
数据库设计概要（主要数据表及其字段说明）
认证和授权方案
部署架构方案
监控和日志记录策略
请以 Markdown 格式输出。"
5. 技术栈文档 (Technical Stack)
基础 Prompt： "请列出并简要解释 [你的项目名称] 使用的技术栈。包括前端技术、后端技术、数据库、以及其他工具和服务。"
更详细的 Prompt： "请为 [你的项目名称] 编写一份详细的技术栈文档。请列出并详细解释项目中使用的每项技术，包括：
前端技术： （例如：React v18, TypeScript, Redux Toolkit, Tailwind CSS），并说明选择这些技术的原因和优势。
后端技术： （例如：Node.js v16, Express.js, NestJS），并说明选择这些技术的原因和优势。
数据库： （例如：PostgreSQL, MongoDB），并说明选择这些数据库的原因和优势，以及数据库的部署和管理方式。
中间件和工具： （例如：Nginx, Docker, Kubernetes, Redis, Kafka），并说明它们在项目中的作用。
测试框架： （例如：Jest, Cypress），并说明如何进行单元测试和集成测试。
部署平台： （例如：AWS, Azure, Google Cloud），并说明部署方案。
请以 Markdown 格式输出。"
6. 文件结构文档 (File Structure)
基础 Prompt： "请为 [你的项目名称] 的代码仓库设计一份推荐的文件结构。包括前端和后端的目录组织方式，以及核心文件的命名规范。"
更详细的 Prompt： "请为 [你的项目名称] 的代码仓库设计一份详细的文件结构文档。该项目采用 [前端框架] 和 [后端框架]。请分别描述前端和后端的目录结构，并解释每个主要目录的作用。例如：
前端目录结构：
src/: 源代码目录
components/: 通用组件
pages/: 页面组件
assets/: 静态资源
styles/: 样式文件
utils/: 工具函数
services/: API 请求服务
public/: 公共资源
后端目录结构：
src/: 源代码目录
controllers/: 控制器
models/: 数据模型
routes/: 路由定义
services/: 业务逻辑服务
middlewares/: 中间件
config/: 配置文件
database/: 数据库相关
请解释每个目录的作用，并给出关键文件的命名建议（例如：组件文件、路由文件、模型文件）。请以 Markdown 格式输出。"
90 461
OpenAI Canvas 开源啦！
内置记忆系统： Open Canvas 具有内置的记忆系统，可以自动生成关于您和您的聊天记录的反思和记忆。这些内容会被包含在后续的聊天互动中，从而提供更个性化的体验。
自定义快速操作： 自定义快速操作允许您定义自己的提示，这些提示与您的用户关联，并在会话之间保持有效。然后可以通过单击轻松调用这些操作，并应用于您当前正在查看的工件。
预置快速操作： 还有一系列预置的快速操作，用于常见的写作和编码任务，并且始终可用。
工件版本控制： 所有工件都绑定了一个“版本”，允许您回溯时间并查看工件的先前版本。
代码、Markdown 或两者： 工件视图允许查看和编辑代码和 Markdown。您甚至可以进行生成代码和 Markdown 工件的聊天，并在它们之间切换。
实时 Markdown 渲染和编辑： Open Canvas 的 Markdown 编辑器允许您在编辑时查看渲染后的 Markdown，无需来回切换
开源地址：github.com
内置记忆系统： Open Canvas 具有内置的记忆系统，可以自动生成关于您和您的聊天记录的反思和记忆。这些内容会被包含在后续的聊天互动中，从而提供更个性化的体验。
自定义快速操作： 自定义快速操作允许您定义自己的提示，这些提示与您的用户关联，并在会话之间保持有效。然后可以通过单击轻松调用这些操作，并应用于您当前正在查看的工件。
预置快速操作： 还有一系列预置的快速操作，用于常见的写作和编码任务，并且始终可用。
工件版本控制： 所有工件都绑定了一个“版本”，允许您回溯时间并查看工件的先前版本。
代码、Markdown 或两者： 工件视图允许查看和编辑代码和 Markdown。您甚至可以进行生成代码和 Markdown 工件的聊天，并在它们之间切换。
实时 Markdown 渲染和编辑： Open Canvas 的 Markdown 编辑器允许您在编辑时查看渲染后的 Markdown，无需来回切换
开源地址：github.com
00:48
6 01
Runway Gen-3 发力了，被 Kling 1.6 刺激的。视频编辑再升级！第三代扩展功能让你的关键帧动画更具表现力
更强大的控制力： 第三代扩展视频功能能够以惊人的精度调整使用开始、中间和结束关键帧定义的视频的画布大小和纵横比。这意味着用户可以更加精细地控制视频的最终呈现效果，无论是调整画面比例以适应不同的平台，还是创造独特的视觉效果，都能轻松实现。
更灵活的工作流程： 不再受限于初始设置！这项功能允许用户在视频制作的任何阶段灵活地修改画布和纵横比，即使在添加了关键帧之后。这大大提升了编辑的灵活性，减少了因早期决策失误而导致的返工，让创作过程更加流畅高效。
更专业的视觉效果： 通过精确调整关键帧之间的画布和纵横比变化，用户可以创造出更具动态感和专业性的视觉效果。例如，可以实现平滑的画面缩放、拉伸变形，或者在不同场景间切换不同的画面比例，从而提升视频的叙事性和吸引力
更强大的控制力： 第三代扩展视频功能能够以惊人的精度调整使用开始、中间和结束关键帧定义的视频的画布大小和纵横比。这意味着用户可以更加精细地控制视频的最终呈现效果，无论是调整画面比例以适应不同的平台，还是创造独特的视觉效果，都能轻松实现。
更灵活的工作流程： 不再受限于初始设置！这项功能允许用户在视频制作的任何阶段灵活地修改画布和纵横比，即使在添加了关键帧之后。这大大提升了编辑的灵活性，减少了因早期决策失误而导致的返工，让创作过程更加流畅高效。
更专业的视觉效果： 通过精确调整关键帧之间的画布和纵横比变化，用户可以创造出更具动态感和专业性的视觉效果。例如，可以实现平滑的画面缩放、拉伸变形，或者在不同场景间切换不同的画面比例，从而提升视频的叙事性和吸引力
00:10
0 01
发达了，数十位顶级设计工程师提供的数百个基于 shadcn 的开源组件
- 提供数百个必需的 Landing Pages / UI 组件
- 完整源码 React Typescript Copy
- 支持 Copy Prompt 到 v0 / Bolt / Lovable
官方地址：21st.dev
开源地址：github.com
- 提供数百个必需的 Landing Pages / UI 组件
- 完整源码 React Typescript Copy
- 支持 Copy Prompt 到 v0 / Bolt / Lovable
官方地址：21st.dev
开源地址：github.com
00:32
26 117