├── .gitignore ├── README.md └── docs ├── 2D - March 2025 ├── README.md ├── day1~2 │ ├── README.md │ └── doc_Optimized.pdf ├── day3 │ ├── README.md │ ├── aboutAI-1_optimized.pdf │ └── aboutDesign-1_optimized.pdf ├── day4 │ ├── README.md │ ├── aboutAI-2_optimized.pdf │ └── aboutDesign-2_optimized.pdf └── day5 │ ├── README.md │ ├── aboutAI-3_optimized.pdf │ ├── aboutDesign-3_optimized.pdf │ └── lecture_optimized.pdf └── casebook ├── 3D_Modeling_Rendering └── README.md ├── Architecture_Interior_Design └── README.md ├── Fashion_Design └── README.md ├── Fine_Arts └── README.md ├── General └── GitHub_upload_for_beginners │ ├── GitHub_upload_for_beginners.md │ └── images │ ├── image1.PNG │ ├── image10.png │ ├── image11.png │ ├── image12.png │ ├── image13.png │ ├── image14.png │ ├── image15.png │ ├── image16.png │ ├── image17.png │ ├── image18.png │ ├── image19.png │ ├── image2.PNG │ ├── image3.png │ ├── image4.png │ ├── image5.png │ ├── image6.png │ ├── image7.png │ ├── image8.png │ └── image9.png ├── Graphic_Design └── README.md ├── Illustration └── README.md ├── Industrial_Product_Design └── README.md ├── Motion_Graphics └── README.md ├── Photography └── README.md ├── README.md ├── UI_UX_Design ├── MCP：figma to cursor │ ├── figma_to_cursor.md │ └── images │ │ ├── 1748486088687.png │ │ ├── 1748486185114.png │ │ ├── 1748486225641.png │ │ ├── 1748486313579.png │ │ ├── 1748486892096.png │ │ ├── 1748487216911.png │ │ ├── 1748487407113.png │ │ ├── 1748488016076.png │ │ ├── 1748842271419.png │ │ ├── 1cc79facc0ca0e774e70d5996688ad2.jpg │ │ ├── f08a9bf8477c4d810e3ca794e4c922a.jpg │ │ ├── image 7.png │ │ ├── image 8.png │ │ └── image 9.png └── README.md ├── Video_Production ├── CyberNezha_video_0501_wenxin │ ├── CyberNezha_video_0501_wenxin.md │ └── images │ │ ├── image0.png │ │ ├── image1.png │ │ ├── image10.png │ │ ├── image11.png │ │ ├── image12.png │ │ ├── image13.png │ │ ├── image14.png │ │ ├── image15.png │ │ ├── image16.png │ │ ├── image17.png │ │ ├── image18.png │ │ ├── image19.png │ │ ├── image2.png │ │ ├── image20.png │ │ ├── image21.png │ │ ├── image22.png │ │ ├── image23.png │ │ ├── image24.5.png │ │ ├── image24.png │ │ ├── image25.png │ │ ├── image26.png │ │ ├── image27.png │ │ ├── image28.png │ │ ├── image3.png │ │ ├── image4.png │ │ ├── image5.png │ │ ├── image6.png │ │ ├── image7.png │ │ ├── image8.png │ │ └── image9.png └── README.md └── Web_Design └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # 依赖目录 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | yarn-debug.log 6 | package-lock.json 7 | yarn.lock 8 | 9 | # 缓存目录 10 | build/* 11 | .cache/* 12 | temp/* 13 | tmp/* 14 | .temp/* 15 | 16 | # 环境变量和密钥 17 | .env 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | # 编辑器和IDE 24 | .idea/* 25 | .vscode/* 26 | *.swp 27 | *.swo 28 | .DS_Store 29 | Thumbs.db 30 | 31 | # 日志文件 32 | logs/* 33 | *.log 34 | 35 | # 测试覆盖率 36 | coverage/* 37 | .nyc_output/* 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design with AI 2 | 3 | *本项目面向设计师、开发者、产品经理、AI爱好者及教育科技从业者，聚焦设计驱动的AI产品创新。通过"AI带娃"(多智能体互动故事)案例，引导学员完成从设计思维、视觉语言、界面交互设计到Coze平台原型开发的全流程实践，整合视觉设计原则、艺术创作思维、UI/UX设计方法、AI产品设计策略和技术实操，打破学科壁垒，提供 AI+ 设计综合学习路径。对艺术设计背景学员，提供AI应用方法和技术实现；对工程师背景学员，传授设计思维和视觉表达原则，助力打造更具人性化的AI产品。* 4 | 5 | *除了系统化的课程内容外，本项目还包含由各领域贡献者撰写的精简实用的专题文章，涵盖不同AI设计场景与技术应用，帮助学习者在系统学习与碎片化知识间取得平衡。* 6 | 7 | ## 项目受众 8 | 9 | *本项目适合以下学习者：* 10 | 11 | * **设计师：** 希望掌握 AI 工具进行设计原型制作、提升 AI 产品设计能力、探索 AI 辅助创意表达。 12 | * **产品经理：** 想要系统学习 AI 产品从想法到原型的流程、理解 AI 特有的设计考量、把握 AI 技术趋势。 13 | * **开发者/工程师：** 对 AI 应用快速原型搭建、设计思路、视觉设计基础、AI 原理与前沿技术感兴趣。 14 | * **AI 爱好者/创业者：** 渴望将 AI 想法通过 Coze 等工具实现，了解产品设计全貌和创新策略。 15 | * **教育科技从业者/内容创作者：** 关注 AI 在亲子、教育、视觉内容生成等领域的实际应用与可控性。 16 | * **对 AI 与设计/艺术交叉领域感兴趣的学生或从业者。** 17 | 18 | *本项目对学习者不要求深厚的 AI 算法基础或专业设计背景，但建议具备对 AI 和设计的基本兴趣。部分技术实操（如 Coze、AI 图像生成工具）可能需要一定的动手能力和对新工具的适应性。课程内容会兼顾不同背景的学员。* 19 | 20 | ## 项目亮点 21 | 22 | 1. **全链路整合实践：** 打通从用户需求洞察、产品构思、原型实现 (Coze)、视觉设计到 AI 技术理解的全流程，提供**高度整合**的学习体验。 23 | 2. **案例驱动与实操导向：** 以 "AI 带娃" 互动故事作为**核心实战案例**，结合多个 AI 工具（Coze、AI 绘图工具）的实际操作，强调**动手能力**培养。 24 | 3. **跨学科知识融合：** 独特地融合了**设计思维**、**UI/视觉设计**、**AI 技术原理**、**可控 AIGC**、**艺术思维**、**创新战略**等多元知识。 25 | 4. **前沿性与深度并存：** 既包含基础原理讲解，也深入探讨了**可控图像生成**、**AI Agent**、**GPT-4o** 等前沿技术与未来趋势，并引入人文和战略思考。 26 | 5. **视角多元化：** 由不同背景（设计、技术、研究）的讲师共同授课，提供更**全面、立体**的认知视角。 27 | 6. **强调思维提升：** 不仅教授"如何做"，更注重培养学员的**批判性思维**、**创新思维**、以及在 AI 时代下对"**人**"的价值的思考。 28 | 29 | **AI 技术浪潮**正席卷各行各业，尤其在创意和产品领域展现出巨大潜力。然而，想要将 AI 的能力转化为真正优秀、有价值的应用，往往需要跨越**技术**、**设计**、**产品**、甚至**艺术**等多重领域。**设计**作为连接技术与人的关键桥梁，在 AI 产品中扮演着至关重要的角色。 30 | 当前，相关知识和技能的学习资源常常**分散割裂**，缺乏一个整合的、面向实践的、适合国内多元背景学习者的**体系化教程**。普通的设计师可能不懂如何将设计原则应用于 AI 交互，开发者可能缺乏视觉设计思维和用户体验洞察，产品经理可能对如何通过设计语言表达 AI 产品的独特性认识不清。 31 | 本项目旨在**打破这些壁垒**，首先基于讲师在设计与 AI 交叉领域的丰富经验，提供一套融合设计思维、视觉表达原则、色彩与版式理论、AI 技术理解与原型工具实操的**综合性教程**；进而，我们希望激发学习者的**设计创造力**，掌握 AI 时代的**视觉设计语言**，共同探索 AI+设计在不同场景下的创新应用。 32 | 我们希望成为连接 AI 技术与设计创意实践的**桥梁**，帮助技术人员理解设计原则，帮助设计师掌握 AI 工具，以**开放、共享**的精神，拥抱 AI+设计带来的无限可能，助力每一个有想法的人创造出富有**人文主义情怀**、**以人为本**的 AI 应用。 33 | 34 | ## 目录 35 | 36 | ### 主课程 37 | 38 | ### 2D: Coze、视觉传达、AI绘画入门（2025年3月） 39 | 40 | 本课程以"AI+2D平面设计"为核心，面向设计师、开发者、产品经理等多元背景学员，系统讲解如何将AI技术与平面设计思维、视觉表达、产品原型开发深度融合。课程内容涵盖AI交互设计、2D视觉设计基础、AI绘图原理、可控平面图像生成、海报与平面艺术创作、AI前沿趋势等，强调理论与实操结合，帮助学员掌握AI时代的2D平面设计创新方法。 41 | 42 | #### 课程内容一览 43 | 44 | | 课时 | 主题 | 内容概览 | 课程视频 | 45 | | ------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------- | 46 | | 第1~2天 | [AI交互设计（Coze案例）](docs/day1-2/README.md) | 设计思维全流程（共情→定义→构思→原型），AI特有设计考量（多智能体、对话流、控制权），Coze平台实操（Agent、Workflow、GUI） | 待上传 | 47 | | 第3天 | [视觉设计基础 & AI绘图原理](docs/day3/README.md) | 视觉设计原理（色彩/形状/字体/版式），AI原理（Embedding、学习过程、Diffusion），Stable Diffusion与Prompt基础 | 待上传 | 48 | | 第4天 | [AI可控图像生成 & 海报设计](docs/day4/README.md) | AI图像可控技术（ControlNet、LoRA、IPAdapter等），AI辅助创意，海报设计原理（修辞、叙事、对比、简洁），视觉传达策略 | 待上传 | 49 | | 第5天 | [AI艺术思维 & 绘图新范式/未来](docs/day5/README.md) | 艺术思维与创新（历史/蓝海/颠覆式），AI绘画新范式（迭代优化），前沿进展（GPT-4o）、未来趋势（Agent/视频）、人类价值（共情） | 待上传 | 50 | 51 | > 课程将通过案例驱动、实操演练，帮助学员打通从设计思维、视觉语言、界面交互到AI原型开发的全流程，提升AI+设计的综合能力。 52 | 53 | ### 3D: three.js, blender, AI+3D入门（TODO） 54 | 55 | ### 案例库 56 | 57 | 本项目同时包含丰富多样的 AI+ 设计应用场景实战案例，适合同学们按照自己的需求进行学习。 58 | 59 | 如果你也想贡献，欢迎参考 [小白也能看懂的 github 贡献指南 @温鑫](docs/casebook/General/GitHub_upload_for_beginners/GitHub_upload_for_beginners.md) 60 | 61 | - [中国美术学院人工智能艺术设计实验室知识库](https://ywh0rb17miw.feishu.cn/wiki/UqmMwFsf2iMAupkc4KpcSldin3d) 62 | 63 | - [中国美术学院人工智能艺术设计实验室知识卡片](https://ywh0rb17miw.feishu.cn/wiki/IOAvww7WSix8oMkQYuKceHtznAN) 64 | 65 | - [UI/UX_Design（用户界面设计 / 用户体验设计）](docs/casebook/UI_UX_Design) 66 | - [利用 Cursor + MCP 实现 Figma 设计原型图的代码自动化生成](docs/casebook/UI_UX_Design/MCP：figma%20to%20cursor/figma_to_cursor.md) @郭佳宇 67 | 68 | - [Video Production（视频创作与生成）](docs/casebook/Video_Production) 69 | - [基于Deepseek和豆包、即梦的视频创作教程](docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/CyberNezha_video_0501_wenxin.md) @温鑫 70 | 71 | ## 项目贡献者 72 | 73 | 感谢每一位贡献者付出的努力，谢谢你们让这个教程变的更好！ 74 | 75 | ### 核心贡献者 76 | 77 | - [散步-Github维护](https://github.com/sanbuphy) (Datawhale成员) 78 | - 方可 (Datawhale成员) 79 | - 肖岚茜 (清华大学美术学院) 80 | - jee (清华大学美术学院) 81 | - 周致远（中国美术学院[D&A Lab](https://designanything.design/)负责人） 82 | - 洪玉（中国美术学院D&A Lab成员） 83 | - [苗锦林](https://jinlinmiao.xyz)（中国美术学院D&A Lab成员） 84 | - 温鑫 (哈尔滨工业大学经管学院) 85 | - 郭佳宇（哈尔滨工业大学人文社科学部） 86 | 87 |
88 | 89 | 90 | 91 |
92 | 93 | ## 参与贡献 94 | 欢迎大家参与本项目的建设！你可以通过以下方式贡献： 95 | 96 | - **主课程建设**：欢迎加入主课程内容的开发（如即将上线的 3D AI+设计 相关课程），共同完善课程体系。 97 | - **案例库投稿**：欢迎提交你在 AI+设计 领域的实战案例或教程，主题不限，内容可参考[目录结构](docs/casebook/README.md)。 98 | - **其他建议与协作**：如有想法、建议或希望深度参与，也欢迎随时联系项目维护者。 99 | 100 | 如有任何问题或投稿意向，请发送邮件至：physicoada@gmail.com 101 | 102 | ## 关注我们 103 | 104 |
105 |

扫描下方二维码关注公众号：Datawhale

106 | 107 |
108 | 109 | ## LICENSE 110 | 111 | 知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 112 | 113 | *注：默认使用CC 4.0协议，也可根据自身项目情况选用其他协议* 114 | -------------------------------------------------------------------------------- /docs/2D - March 2025/README.md: -------------------------------------------------------------------------------- 1 | ## 课程总结 2 | 3 | | 课时 | 内容 | 内容概览 | 课件 | 其他资料 | 4 | | ------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 5 | | 第1~2天 | AI 交互设计 (Coze 案例) | 设计思维全流程 (共情→定义→构思→原型)，AI 特有设计考量 (多智能体、对话流、控制权)，Coze 平台实操 (Agent, Workflow, GUI)。 | Coze小案例
PDF文档 | | 6 | | 第3天 | 视觉设计基础 & AI 绘图原理 | 视觉设计原理 (色彩/形状/字体/版式)，AI 原理 (Embedding, 学习过程, Diffusion)，Stable Diffusion & Prompt 基础。 | PDF设计幻灯片
PDF技术幻灯片 | - 《写给大家看的设计书》
- 《西文字体》
- 《Helvetica》
| 7 | | 第4天 | AI 可控图像生成 & 海报设计 | AI 图像可控技术 (ControlNet, LoRA, IPAdapter等)，AI 辅助创意，海报设计原理 (修辞、叙事、对比、简洁)，视觉传达策略。 | PDF技术幻灯片
PDF设计幻灯片 | - Ads of the World
- 数英网
- 索尼世界摄影大赛 | 8 | | 第5天 | AI 艺术思维 & AI 绘图新范式/未来 | 艺术思维与创新 (历史/蓝海/颠覆式)，AI 绘画新范式 (迭代优化)，前沿进展 (GPT-4o)，未来趋势 (Agent/视频)，人类价值 (共情)。 | | - 《一个时间轴看懂西方美术》
- Apple ad - Think different
- IKEA ad - Living Together
- iPad ad - Crush!
- Cola ad - Masterpiece
- Cola ad - The Holiday Magic is coming
- Gemini ad - Dear Sydney
| 9 | -------------------------------------------------------------------------------- /docs/2D - March 2025/day1~2/README.md: -------------------------------------------------------------------------------- 1 | # 课程：Coze 设计小案例 - 多智能体 AI 互动故事 (AI 带娃) 2 | 3 | 讲师：方可、岚茜 4 | 5 | ## 课程文档 6 | 7 | [课程链接](https://t1kbgkrq0j.feishu.cn/wiki/QtXgwsaO8iCRLRk0YiXcLhJFnab?from=from_copylink) 8 | 9 | ## 课程简介 10 | 11 | 本节课是一个结合 AI 与设计思维的实战案例教程，将引导你从 0 到 1 完成一个基于 Coze 平台的多智能体 AI 互动故事应用的设计与原型开发。课程以 "AI 带娃"（AI 辅助亲子互动）为具体场景，深入探讨如何将用户需求转化为实际的 AI 产品功能，并最终实现一个可交互的低保真原型。 12 | 13 | ## 这门课程对谁有帮助？ 14 | 15 | * **设计师：** 想了解如何用 AI 工具做设计原型。 16 | * **产品经理：** 想学习 AI 产品从想法到原型的流程。 17 | * **开发者：** 想快速搭建 AI 应用原型，了解设计思路。 18 | * **AI 爱好者/创业者：** 想用 Coze 等工具实现 AI 想法。 19 | * **教育科技从业者：** 关注 AI 在亲子和教育场景的实际应用。 20 | 21 | ## 你能学到什么？ 22 | 23 | * **完整的 AI 产品设计流程:** 掌握从用户研究（Empathize）、需求定义（Define）、创意构思（Ideate）到原型设计（Prototype）的全链路方法。 24 | * **AI 特有的设计考量:** 25 | * 如何设计多 AI 智能体系统及其数字身份（形象、属性、行为）。 26 | * 如何设计引人入胜且符合逻辑的人-AI 对话流程与交互体验。 27 | * 如何在 AI 应用中平衡自动化与用户控制权。 28 | * **AI 辅助设计方法:** 如何有效利用 AI 工具（如 Deepseek 等 LLM）辅助设计过程（如生成信息架构、功能列表、对话脚本），以及如何批判性地评估和优化 AI 生成的结果。 29 | * **MVP (最小可行产品) 思维:** 如何在有限资源下聚焦核心价值，进行功能优先级排序和迭代开发。 30 | * **Coze 平台实操技能:** 31 | * 使用 Coze 工作流 (Workflow) 和对话流 (Dialogue Flow) 设计 AI 逻辑。 32 | * 掌握常用节点（大模型、图像生成、文本处理、数据库、语音合成/识别等）的应用。 33 | * 使用 Coze GUI 构建用户界面，实现事件触发、数据绑定和流程控制。 34 | * 创建和管理 AI Agent、数据库，实现数据存储与调用。 35 | 36 | ## 学完后能做什么？ 37 | 38 | * 能够独立或在团队中运用设计思维系统化地构思、设计 AI 应用。 39 | * 能够针对 AI 产品进行有效的用户研究和需求分析。 40 | * 能够设计出符合用户心智模型、交互自然的 AI 应用界面和流程。 41 | * 能够为 AI Agent 设计独特的“人格”和交互模式。 42 | * 能够熟练使用 Coze 平台将 AI 应用想法快速转化为可交互的低保真原型。 43 | * 能够将所学方法论和工具应用到其他 AI 产品设计项目中。 44 | 45 | ## 课程涉及内容概览 46 | 47 | 1. **Design I: 从问题到创意** 48 | * **Empathize (共情):** 以人为本的设计，通过半结构化访谈发现用户真实需求和痛点 (以 "AI 带娃" 访谈为例)。 49 | * **Define (定义):** 收敛设计目标，从访谈中提炼用户需求列表，进行优先级排序，明确核心问题。 50 | * **Ideate (构思):** 头脑风暴，产生大量创意点子，并聚焦于一个核心产品概念。 51 | 2. **Design II: 从创意到原型** 52 | * **AI 辅助设计的关键思维:** 理解设计师与 AI 的协作关系。 53 | * **从 Idea 到 UI 线框图:** 54 | * 定义产品核心功能 (结合 MVP 原则)。 55 | * 规划信息架构 (考虑儿童用户特点)。 56 | * 绘制低保真界面原型 (强调结构清晰而非视觉)。 57 | * 使用 AI (Deepseek) 辅助生成，并进行人为判断与优化。 58 | * **从线框到交互体验:** 59 | * 设计详细交互流程图。 60 | * 设计 AI 多智能体数字身份框架 (形象、属性、行为、环境)。 61 | * 设计用户数字身份框架。 62 | * 设计场景化的 人-AI 对话体验 (Scenario 方法)。 63 | * 考虑交互的可控性 (平衡自动化与用户控制)。 64 | 3. **Practicum: Coze 原型实现** 65 | * **Coze-Agent (智能体搭建):** 66 | * 创建角色生成 Agent (含 Prompt Engineering 技巧，如解决同质化)。 67 | * 创建角色形象生成 Agent (结合图像生成、抠图节点)。 68 | * 创建角色对话 Agent (使用对话流、语音输入/输出、角色切换)。 69 | * 数据库的创建与使用 (存储角色信息)。 70 | * **Coze-GUI (图形用户界面搭建):** 71 | * 故事协调与流程控制 Agent 设计 (同心开发思路)。 72 | * Coze GUI 基础：UI 事件调用工作流 -> 更新 UI 绑定数据。 73 | * 组件使用与布局 (容器、文本、图像、按钮、Markdown)。 74 | * 实现 UI 交互 (按钮事件、加载/禁用状态、数据绑定)。 75 | * 流程控制 (通过工作流变量控制组件可见性)。 76 | * 故事内容生成与语音播放 (语音合成节点、Markdown 嵌入 HTML/JS)。 77 | * 背景图片生成与更新 (结合故事进展、角色形象)。 -------------------------------------------------------------------------------- /docs/2D - March 2025/day1~2/doc_Optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day1~2/doc_Optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day3/README.md: -------------------------------------------------------------------------------- 1 | # 课程一：视觉设计基础 - 为 AI 产品注入感受 2 | 3 | 讲师：Jee 4 | 5 | ## 课程简介 6 | 7 | 本节课是 AI + 设计系列课程中**视觉设计部分的第一课**，主要面向对视觉设计基础不熟悉的**技术背景同学**。课程将通过通俗易懂的方式，结合生动的案例（如解读诗词意境、分析名片/表格布局、对比品牌风格），讲解 UI 视觉设计的基本原则，包括**色彩、形状、字体**和**版式**。我们将探讨这些视觉元素如何作为一种“语言”进行编码，共同作用以传达特定的产品**感受或体验**。课程以写“命题作文”作类比，强调所有设计决策都应服务于核心要传达的信息，帮助你理解视觉语言的沟通力量，为后续与设计师协作或进行初步 AI 产品视觉构思打下基础。 8 | 9 | ## 这门课程对谁有帮助？ 10 | 11 | * **技术背景的开发者/工程师：** 希望了解 UI 视觉设计的基本原理，以便更好地理解设计稿、与设计师沟通，或独立完成基础的 AI 产品视觉原型。 12 | * **AI 产品经理：** 需要掌握基本的设计语言，以便更清晰地定义产品调性、评估设计方案的视觉表达。 13 | * **AI 领域的创业者/独立开发者：** 需要为自己的 AI 产品或原型设定初步的视觉风格和感受。 14 | * **对 AI 与设计交叉领域感兴趣的学生或从业者：** 想要系统了解视觉设计在 AI 产品开发中的作用与基础知识。 15 | * **设计背景的同学：** 可以快速回顾基础知识，并思考如何更有效地向技术伙伴解释这些设计概念 (注意：本节课内容对专业设计师可能较为基础)。 16 | 17 | ## 你能学到什么？ 18 | 19 | * **视觉设计如同“命题作文”的核心理念：** 理解 UI 设计的首要目标是**传达特定的产品感受与体验**，所有设计元素都应服务于此中心思想。 20 | * **视觉元素的基本沟通原理与语义：** 21 | * **色彩：** 理解色彩的生理与文化层面的含义（如红色代表热情/警示，绿色代表自然/安全），掌握色相、饱和度、亮度三要素及其对用户感受的影响。 22 | * **形状：** 了解不同形状（如圆角 vs. 直角）所传递的心理感受（如亲和、人性化 vs. 科技感、效率），并认识到其应用的语境依赖性。 23 | * **字体：** 区分衬线体与非衬线体的基本特征、历史渊源及各自传递的风格感（如古典 vs. 现代），了解字重、字宽等属性，以及可读性、易读性的基本考量。 24 | * **版式基础 (Layout Basics):** 25 | * 掌握**格式塔原则 (Gestalt Principles)** 如**接近律 (Proximity)** 和 **相似律 (Similarity)** 在界面布局中的应用，理解如何通过分组和视觉一致性来组织信息、降低认知负荷（例如：优化名片信息布局、改进表格数据的可读性）。 26 | * 理解**阅读顺序 (Reading Order)** 对布局的影响（如从左到右、从上到下，以及从右到左的 RTL 布局）。 27 | * 掌握**文字对齐 (Text Alignment)** 方式（左对齐、居中对齐、右对齐）的适用场景及其表达效果（如左对齐适合长文阅读，居中适合标题或短句，右对齐在特定场景下用于比对数字或特殊排版）。 28 | * **设计中的用户视角：** 再次强调从信息接收者（用户）的角度出发进行视觉设计的重要性。 29 | * **风格一致性的意义：** 了解统一的视觉风格（色彩、形状、字体、图标、插画等，如 Notion 案例）对于强化产品信息、提升沟通效率和品牌识别度的价值。 30 | * **基础的 UI 设计流程概念：** 对从构思到视觉呈现的基本步骤有一个初步认识。 31 | 32 | ## 学完后能做什么？ 33 | 34 | * 能够**有意识地思考**并**初步定义**你的 AI 产品想要传达的**视觉感受和品牌调性**（命题）。 35 | * 能够基于确定的产品调性，在色彩、形状、字体选择上做出**更合理的初步决策**，并能解释选择的理由。 36 | * 能够运用**接近律、相似律**等基本原则，组织出结构更清晰、视觉干扰更少的界面布局草图或线框图。 37 | * 能够根据内容和场景，选择**合适的文字对齐方式**。 38 | * 能够**更有效地与设计师沟通**视觉需求和设计反馈，理解其视觉决策背后的考量（如“为什么用圆角？”“为什么选这个颜色？”“这里为什么要左对齐？”）。 39 | * 能够**批判性地审视** UI 界面，初步分析其视觉元素（色彩、形状、字体、版式、风格）是否有效地服务于其沟通目标和用户体验。 40 | * 为进一步学习更深入的视觉设计知识、理解和使用设计规范/设计系统打下**概念基础**。 41 | 42 | ## 课程涉及内容概览 43 | 44 | 1. **引言与设计思维：** 45 | * 课程介绍与互动期望 (平等交流)。 46 | * 设计如同“命题作文”：明确产品要传达的核心感受。 47 | * 用户视角的重要性：从信息接收者 (用户) vs. 生产者角度思考。 48 | * 视觉语言作为编码：用视觉元素有效传递信息。 49 | 2. **核心视觉元素解析：** 50 | * **色彩 (Color):** 51 | * 生理与文化联想 (红 vs. 绿案例，国旗案例)。 52 | * 色彩三要素 (色相、纯度/饱和度、亮度) 及其语义表达 (诗词意境案例)。 53 | * 色彩应用的文化差异性提醒 (伊斯兰文化中的绿色)。 54 | * **形状 (Shape):** 55 | * 形状的情感表达 (皮克斯《头脑特工队》角色案例)。 56 | * UI 中的形状应用：圆角 vs. 直角 (Apple vs. Samsung 案例)。 57 | * 强调语境，避免设计教条化。 58 | * **字体 (Typography):** 59 | * 衬线体 (Serif / 宋体) vs. 非衬线体 (Sans-serif / 黑体) 的区别、特征与风格。 60 | * 字体的历史与文化背景 (书法、雕版印刷、工业革命)。 61 | * 字体属性：字重 (Weight)、字宽 (Width)。 62 | * 可读性 (Readability) 与易读性 (Legibility) 考量，不同场景下的字体选择 (正文 vs. 标题，屏幕显示优化字体如 Georgia/Verdana)。 63 | 3. **版式与布局 (Layout):** 64 | * **阅读顺序 (Reading Order):** 考虑不同文化和语言的阅读习惯 (如 LTR, TTB, RTL)。 65 | * **文字对齐 (Text Alignment):** 左对齐、居中对齐、右对齐的原则、适用场景与视觉效果 (诗歌、数字对齐案例)。 66 | * **格式塔原则应用:** 67 | * **接近律 (Proximity):** 通过空间距离组织相关元素 (名片布局优化案例)。 68 | * **相似律 (Similarity):** 通过一致的视觉特征（颜色、形状、字体等）建立关联 (海报内容结构优化案例，表格行区分案例)。 69 | * **导航布局考量:** 结合交互和平台特性 (如 Android 导航模式)。 70 | 4. **风格一致性 (Style Consistency):** 71 | * 统一视觉元素 (Logo, Icon, 插画等) 以强化整体感受和品牌识别 (Notion 案例)。 72 | * 强调合力效果，避免信息混乱和视觉噪音。 73 | 5. **UI 设计流程简介:** 概述从概念到视觉呈现的基本步骤。 74 | 75 | # 课程二：AI 基本原理与图像生成入门 76 | 77 | 讲师：散步 78 | 79 | ## 课程简介 80 | 81 | 本课程不仅聚焦于 AI 图像生成技术（如 Diffusion 模型、Stable Diffusion），更系统梳理人工智能的基本原理。我们将从 AI 如何理解和表示文本、图像等现实世界信息讲起，探讨机器学习、深度学习的核心机制，包括模型结构、训练流程、损失函数、优化方法等基础知识。在此理论基础上，进一步剖析 Diffusion 模型的工作原理、关键组件，以及如何通过提示词（Prompt）有效引导 AI 生成图像。无论你是设计师、AI 初学者还是技术爱好者，本课程都将帮助你建立 AI 基本原理与应用的完整知识框架，助力你更好地理解和实践 AI 图像生成。 82 | 83 | ## 这门课程对谁有帮助？ 84 | 85 | * **设计师：** 希望理解 AI 绘图工具（如 Midjourney、Stable Diffusion）背后的原理，掌握 AI 基础知识，提升创作效率和表达能力。 86 | * **AI 初学者/爱好者：** 对人工智能整体原理及生成式 AI 感兴趣，想系统了解 AI 的基本机制与图像生成方法。 87 | * **产品经理/技术决策者：** 需要了解 AI 技术原理、能力边界、发展趋势，为产品创新和决策提供理论支撑。 88 | * **开发者：** 想全面掌握 AI 基本原理及 Diffusion 模型的工作方式和相关技术栈。 89 | * **任何对“AI 如何学习与绘画”感到好奇的人：** 无需深厚技术背景，带你从零理解 AI 的本质与应用。 90 | 91 | ## 你能学到什么？ 92 | 93 | * **AI 的“视界观”：** 理解计算机如何将文本、图像等现实世界信息转化为机器可读的数字表示（Embedding），以及低维表示的重要性。 94 | * **AI 的“学习”过程：** 掌握机器学习的基本流程，包括模型（权重数组）、损失函数、优化策略（如梯度下降）以及“学习”的本质。 95 | * **“深度”的含义：** 了解深度学习中网络深度、参数量的意义，以及 AI 发展中算力与通用方法的重要性（The Bitter Lesson）。 96 | * **Diffusion 模型核心原理：** 弄懂 Diffusion 模型与其他生成模型（GAN、VAE 等）的区别，掌握其独特的正向加噪和逆向去噪过程，理解模型如何通过“预测噪声”来生成图像。 97 | * **Stable Diffusion 组件拆解：** 了解 Stable Diffusion 的核心架构，包括 CLIP（文本理解）、U-Net（噪声预测）和 VAE（图像编解码）各自的作用及协同方式。 98 | * **提示词（Prompt）的奥秘：** 理解为什么提示词对生成结果至关重要，以及提示词有效性与模型训练数据的关系。 99 | * **AI 绘图的能力边界：** 认识当前 AI 图像生成技术的优势和局限性，学习探索和优化生成效果的方法论。 100 | 101 | ## 学完后能做什么？ 102 | 103 | * 能够用清晰的语言向他人解释 AI 如何表示信息、如何学习，以及 Diffusion 模型（特别是 Stable Diffusion）生成图像的基本原理。 104 | * 能够更有依据地使用 AI 绘图工具，理解不同模型、参数设置可能带来的影响。 105 | * 能够理解提示词（Prompt）的作用机制，并尝试根据原理编写或调整提示词以获得更好的生成效果。 106 | * 能够更客观地评估 AI 生成图像的质量，认识其局限性，并采用更有效的策略进行尝试和改进。 107 | * 为进一步深入学习生成式 AI 技术、模型微调或探索 AI 在设计等领域的应用打下坚实的理论基础。 108 | 109 | ## 课程涉及内容概览 110 | 111 | 1. **智能的机器表示：** 112 | * 计算机如何“理解”世界？文本、图像的数字化。 113 | * Embedding：从高维到低维，降低成本、揭示关联。 114 | 2. **学习的基本原理：** 115 | * 模型即数组：权重的初始化与学习。 116 | * 学习过程：计算损失 → 优化策略（梯度下降）→ 更新权重。 117 | * 深度学习：为何要“深”？更大的模型，更好的效果。 118 | 3. **AI 的发展规律：** 119 | * The Bitter Lesson：算力与通用方法的胜利。 120 | * 大语言模型（LLM）的启示：预测下一个 Token 的力量。 121 | * 强化学习的角色。 122 | 4. **扩散模型（Diffusion Model）原理：** 123 | * 与其他生成模型的对比。 124 | * 核心思想：正向过程（逐步加噪）与逆向过程（逐步去噪）。 125 | * 训练目标：学习预测每一步添加的噪声。 126 | 5. **Stable Diffusion 详解：** 127 | * 关键组件：CLIP Text Encoder（理解文字）、U-Net（结合文本去噪）、VAE Autoencoder（解码成图）。 128 | * 完整工作流程：从文本提示到最终图像。 129 | * 有条件的扩散：如何加入更多控制（如 ControlNet 概念引入）。 130 | 6. **提示词有效性与 AI 绘图边界：** 131 | * 提示词为何有效？与训练数据的关联。 132 | * 如何写好提示词？接近训练集风格，参考成功案例，大胆试错。 133 | * AI 绘图能力的限制与发展（模型迭代的影响）。 134 | 7. **实践工具与资源概览：** 135 | * 介绍市面上常见的 AI 绘图工具（网页端、本地部署）。 136 | * 了解模型排行榜和社区资源（如 Hugging Face、LiblibAI）。 -------------------------------------------------------------------------------- /docs/2D - March 2025/day3/aboutAI-1_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day3/aboutAI-1_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day3/aboutDesign-1_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day3/aboutDesign-1_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day4/README.md: -------------------------------------------------------------------------------- 1 | # 课程一：AI 与视觉表达：生成“有个性”的可控图像 2 | 3 | 讲师：散步 4 | 5 | ## 课程简介 6 | 7 | 本节课聚焦于 AI 图像生成领域的核心挑战：如何超越随机性，创造出符合特定需求、具有“个性”且“言之有物”的视觉内容。课程将深入探讨当前 AI 图像生成（特别是扩散模型）中常见的“不稳定”现象及其背后的原因，并系统介绍一系列旨在提升图像生成可控性的关键技术与方法。通过实例（如 AI 辅助海报设计）和业界优秀案例（如百度、美团的应用实践），你将学习如何运用这些技术来精确控制生成图像的内容、风格、构图乃至局部细节。 8 | 9 | ## 这门课程对谁有帮助？ 10 | 11 | * **设计师/视觉艺术家：** 希望利用 AI 精确生成符合创意构想的图像素材，或对现有图像进行精细编辑。 12 | * **内容创作者/营销人员：** 需要批量生成风格统一或具有特定元素的视觉内容。 13 | * **AI 应用开发者/研究者：** 想了解图像生成领域的前沿可控性技术及其原理。 14 | * **AI 工具使用者：** 对 Midjourney, Stable Diffusion (SD), 即梦 AI 等工具的输出结果不满意，渴望获得更高控制自由度的用户。 15 | * **对 AIGC 技术感兴趣的学习者：** 想深入理解 AI 如何从“随机”走向“可控”地进行视觉创作。 16 | 17 | ## 你能学到什么？ 18 | 19 | * **理解 AI 图像生成的局限性：** 了解为何 AI 生成的图像有时会“失控”或与预期不符，特别是扩散模型在结合文本和图像参考时的工作机制。 20 | * **掌握 AI 辅助创意的流程：** 学习如何利用 AI 进行视觉元素的头脑风暴和概念生成（例如，为“AI+设计”海报构思融合符号）。 21 | * **学习多种图像可控性技术：** 22 | * **指令式图像编辑 (Instruction-Based Editing):** 了解基于自然语言指令编辑图像的概念（如 MagicBrush 数据集所示），以及实现此类功能的模型。 23 | * **ControlNet:** 学习如何使用 ControlNet 等技术对图像的结构、姿态、深度等进行精确控制（了解其在 LiblibAI 等平台的应用）。 24 | * **Inpainting (局部重绘):** 掌握对图像特定区域进行修改或重新生成的技术，实现“指哪打哪”的编辑。 25 | * **LoRA (Low-Rank Adaptation):** 理解 LoRA 的原理，学习如何通过少量数据训练 LoRA 模型以实现特定风格的强稳定复现（了解其在 ModelScope 等平台的训练方法）。 26 | * **IPAdapter (Image Prompt Adapter):** 了解如何使用 IPAdapter 将参考图像的风格或内容特征注入到生成过程中（了解其在 LiblibAI 等平台的应用）。 27 | * **了解相关工具与平台：** 接触并了解实现上述技术的相关平台和工具，如 LiblibAI (哩布哩布 AI)、ModelScope (魔搭社区)、即梦 AI 等。 28 | * **借鉴业界前沿实践：** 通过解析百度 MEUX、美团等大厂团队应用 ControlNet、LoRA 等技术的案例，了解其在品牌视觉、人物库构建等方面的实际应用与价值。 29 | 30 | ## 学完后能做什么？ 31 | 32 | * 能够更有策略地运用提示词和参考图，提升 AI 图像生成的稳定性和准确性。 33 | * 能够根据具体需求，选择并应用合适的可控生成技术（ControlNet, Inpainting, LoRA, IPAdapter 等）来创作或编辑图像。 34 | * 能够利用 AI 工具进行更有效的视觉创意构思和元素生成。 35 | * 能够针对特定风格需求，了解并实践 LoRA 等模型的训练与应用流程。 36 | * 能够对 AI 生成的图像进行更精细的局部调整和修改。 37 | * 能够更熟练地在 LiblibAI、ModelScope 等平台上寻找、使用甚至训练模型，以实现更高级的图像生成控制。 38 | 39 | ## 课程涉及内容概览 40 | 41 | 1. **“有个性”的图像生成：** 42 | * 定义问题：什么是“有个性”？为何需要控制 AI 生成的内容？ 43 | * 挑战：当前 AI 图像生成（尤其是基于提示词）的不稳定性。 44 | 2. **AI 辅助创意与元素生成：** 45 | * 案例：使用 AI 设计“AI+设计通识课”海报。 46 | * 方法：构思融合 AI 与设计元素的视觉符号，探索不同主题（如古典与现代、艺术与计算机）。 47 | * 工具应用：利用 AI（如即梦 AI）直接生成、寻找参考图、使用参考图作为基底、获取排版灵感、画布编辑等。 48 | 3. **剖析图像生成的不稳定性：** 49 | * 原因分析：模型能力、提示词质量、扩散模型基于参考图的工作原理（加噪+文字引导）。 50 | * 核心问题：基于文字引导的天然不确定性。 51 | 4. **实现“言出法随”的可控生成技术 I：指令编辑 & 结构控制** 52 | * **指令式图像编辑：** 53 | * 概念引入：MagicBrush 数据集及其目标（单/多轮、有/无蒙版编辑）。 54 | * 实现：需要基于编辑数据集训练的模型（如 Stability AI 的模型）。 55 | * **ControlNet：** 56 | * 功能：提供精细的结构、姿态、深度、线稿等控制。 57 | * **Inpainting (局部重绘)：** 58 | * 应用场景：分步实现复杂图像、修改或完善局部区域。 59 | * 方法：在图像编辑工具中，使用蒙版 (Mask) 涂抹需要更改的区域，结合新的提示词进行重绘。 60 | 5. **实现“言出法随”的可控生成技术 II：风格迁移与复现** 61 | * **LoRA (Low-Rank Adaptation): 获得“风格”的强稳定性** 62 | * **面临问题：** 当标准模型生成的风格不符合特定、统一的要求时怎么办？ 63 | * **核心思路：** 通过微调模型来学习并固定某种特定的风格或角色特征。 64 | * **训练流程：** 65 | * **数据收集：** 准备少量（约 30-100 张）具有高度统一风格或包含特定元素的图像数据集。 66 | * **图像打标 (Tagging):** 对数据集中的图像进行标注，描述其内容和风格特征。 67 | * **模型训练：** 利用在线平台或本地工具进行 LoRA 模型的训练。 68 | * **应用：** 将训练好的 LoRA 文件加载到 AI 绘图工具中，即可在生成图像时稳定复现该特定风格。 69 | 6. **实现“言出法随”的可控生成技术 III：图像提示适配器** 70 | * **IPAdapter (Image Prompt Adapter): 将图像作为“提示词”** 71 | * **核心功能：** 作为一种特殊的条件注入机制，将一张或多张参考图像的风格、构图或内容特征有效地迁移到新的生成过程中。 72 | * **工作方式：** 辅助扩散模型理解并采纳参考图像的视觉信息，其作用类似于文本提示词，但作用于视觉层面。 73 | * **应用场景：** 快速进行风格迁移、融合不同图像特征、保持角色一致性等。 74 | 7. **AI 作图的工作流思维:** 75 | * 多步骤拆解任务 76 | * 多轮迭代与“抽卡” 77 | * 结合多种工具、插件和模型（如编辑模型、局部重绘、ControlNet、IPAdapter） 78 | 8. **业界优秀实践案例解析（节选）:** 79 | * **百度 MEUX & ControlNet:** 案例分析如何结合 Logo/3D 模型进行品牌视觉生成，保证一致性。 80 | * **美团平台 & LoRA:** 案例分析如何通过 LoRA 训练打造统一风格的人物库，提升设计效率与资产积累。 81 | * **启发与思考：** 探讨可控生成技术在真实商业场景中的落地价值与未来趋势。 82 | 83 | 84 | 好的，这是根据你提供的 PDF 内容（Jee 的讲座文字记录）和模板，为 "AI 产品海报设计的修辞与叙事" 这门课程编写的 README： 85 | 86 | # 课程二：AI 产品海报设计的修辞与叙事 87 | 88 | 讲师：Jee 89 | 90 | ## 课程简介 91 | 92 | 本课程深入探讨 AI 产品的视觉传达设计，特别是 **产品海报** 或 **关键视觉** 的构思与创作。我们将超越基础的 UI 元素（第一节课内容），聚焦于如何运用 **视觉语言**、经典的 **修辞学原理** (如亚里士多德的修辞三要素) 和 **叙事技巧**，来有效吸引目标用户、传递产品核心价值并激发用户兴趣。课程强调从 **用户视角** 出发（"如果我只有几秒钟时间看这个海报，我会关心什么？"），理解信息在短时间内被接收和理解的关键要素，并培养设计师在视觉选择中的 **批判性思维** 和 **策略性**，最终目标是创造出既有吸引力又能精准传达信息的视觉作品。 93 | 94 | ## 这门课程对谁有帮助？ 95 | 96 | * **设计师 (Designers):** 学习如何为 AI 产品（或其他产品）设计具有强大说服力和视觉吸引力的关键视觉和海报，提升概念传达能力。 97 | * **产品经理 (Product Managers):** 理解如何通过视觉手段有效传达 AI 产品的核心价值、功能优势和用户相关性。 98 | * **市场营销人员 (Marketers):** 掌握 AI 产品（或其他产品）推广中，运用视觉修辞和叙事进行有效沟通的策略与方法。 99 | * **AI 开发者/工程师 (AI Developers/Engineers):** 了解视觉设计背后的沟通逻辑和用户心理，提升与设计、市场团队的协作效率。 100 | * **创业者/创始人 (Entrepreneurs/Founders):** 学习如何用精炼而有力的视觉语言，清晰地表达产品愿景，吸引用户和投资者的注意力。 101 | * **对视觉传达、广告设计感兴趣的学生或从业者：** 系统学习说服性视觉设计的基本原理和高级技巧。 102 | 103 | ## 你能学到什么？ 104 | 105 | * **产品海报的核心沟通目标:** 理解产品海报（区别于运营海报）需要快速解答用户的核心疑问：这是什么？与我何干？为何选它？ 106 | * **视觉修辞的应用:** 掌握亚里士多德修辞三要素——**信誉 (Ethos)**、**情感 (Pathos)**、**逻辑 (Logos)**——如何通过视觉元素（色彩、图像、构图等）来体现，以增强说服力。 107 | * **视觉叙事的原理与实践:** 理解故事对人类认知的重要性，学习如何在静态的视觉作品中营造 **故事感 (Storytelling)**，引发共鸣和记忆。 108 | * **身份认同的视觉连接:** 了解如何通过视觉设计触达用户的深层需求和 **身份认同 (Identity)**（参考马斯洛需求层次），建立产品与用户的情感和价值连接 (如 Apple, Muji 案例)。 109 | * **吸引注意力的视觉策略:** 110 | * 精通 **对比 (Contrast)** 的运用：在色彩、形状、大小、字体、图文关系等方面制造有效对比，突出重点，增强视觉冲击力。 111 | * 追求 **有意义的独特性 (Meaningful Uniqueness):** 如何让设计既与众不同，又与产品信息紧密相关，避免无效或不恰当的创意。 112 | * **简洁的力量 (Simplicity):** 理解“少即是多”的原则，学习如何提炼核心信息，用最精炼的视觉语言实现高效传达。 113 | * **批判性思维:** 培养审视视觉方案的能力，确保形式服务于内容，避免过度追求形式而忽略信息传达的本质。 114 | 115 | ## 学完后能做什么？ 116 | 117 | * 能够 **系统性地分析和评估** 产品海报或其他视觉传达设计的有效性。 118 | * 能够基于明确的沟通目标，**策略性地构思和设计** 出具有说服力的 AI 产品（或其他产品）海报或关键视觉方案。 119 | * 能够 **精准地运用** 色彩、版式、字体、图像、对比、叙事等视觉设计原理和技巧，服务于信息传达和情感沟通。 120 | * 能够创作出既 **独特新颖** 又能 **清晰传递核心信息** 的视觉作品。 121 | * 能够更有 **逻辑和说服力地阐述** 自己视觉设计方案背后的思考和策略。 122 | * 能够更 **有效地与** 产品、市场、技术等跨职能团队 **协作**，共同提升产品的视觉表现力和市场竞争力。 123 | * （即使未来使用 AI 工具辅助）能够更好地 **指导和筛选** 视觉产出，确保其符合策略目标和审美标准，理解人的判断在其中的核心价值。 124 | 125 | ## 课程涉及内容概览 126 | 127 | 1. **产品海报的本质：用户视角与核心问题** 128 | * 理解受众（路人）的短暂注意力与信息需求。 129 | * 产品海报需传递的关键信息维度：功能、相关性、身份。 130 | 2. **说服的利器：视觉修辞三要素 (Ethos, Pathos, Logos)** 131 | * 理论讲解与案例分析（含正反面案例，如“违背祖宗”广告、数据应用、情感化设计等）。 132 | 3. **故事的力量：用视觉讲故事 (Visual Storytelling)** 133 | * 故事对人类认知和记忆的深刻影响（类比人类简史观点）。 134 | * 如何在静态图像中营造叙事氛围和情感张力（摄影、广告案例）。 135 | 4. **身份的共鸣：连接用户的深层价值 (Identity Connection)** 136 | * 马斯洛需求、TOC/TOB 价值模型与视觉表达。 137 | * 通过视觉风格和意境塑造品牌认同（Apple, Muji 案例）。 138 | 5. **吸引眼球的秘诀：对比与独特性 (Attention Grabbing Techniques)** 139 | * **对比 (Contrast):** 色彩、形状、大小、字体（衬线/无衬线及其细微差别）、字号（斐波那契数列应用）、图文比例等维度的对比运用。 140 | * **独特性 (Uniqueness):** 如何做到“与众不同”且“恰如其分”，警惕无效创意（社团海报反例）。 141 | 6. **少即是多：简洁原则的重要性 (Power of Simplicity)** 142 | * 精炼视觉元素，降低认知负荷，确保信息精准高效传达。 143 | 7. **批判性思维：形式与内容的统一 (Critical Thinking: Form & Content)** 144 | * 避免“为了炫技而设计”，强调内容为王。 145 | * 设计师的精准把控与审美判断力，尤其在 AI 辅助背景下的价值。 146 | 8. **实践与反思：** 将理论应用于实践，通过设计练习巩固所学。 -------------------------------------------------------------------------------- /docs/2D - March 2025/day4/aboutAI-2_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day4/aboutAI-2_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day4/aboutDesign-2_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day4/aboutDesign-2_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day5/README.md: -------------------------------------------------------------------------------- 1 | # 课程一：AI 与艺术思维 - 超越工具，拥抱表达与创新 2 | 3 | 讲师：Jee 4 | 5 | ## 课程简介 6 | 7 | 本课程深入探讨 AI 时代下艺术思维的重要性及其与设计思维的异同。它并非一个教授具体 AI 工具操作的技术教程，而是一次**观念的启发与思维的拓展**。课程通过回顾艺术史（特别是现代艺术如何应对摄影技术的冲击）、分析设计史与创新案例（如工艺美术运动与工业化的关系、宜家 IKEA 的蓝海战略、皮克斯 Pixar 的颠覆性创新之路），并结合当下 AI 发展的现状（包括 AI 广告的争议），引导我们思考： 8 | 9 | * 在 AI 技术日益强大的今天，“美”的标准是什么？“像”还重要吗？我们该如何看待美的多样性？ 10 | * 我们如何看待 AI 生成的内容？它的价值在哪里？“错误”或非预期结果是否能带来新的可能？ 11 | * 面对技术的颠覆性力量，创作者（无论是设计师、艺术家还是开发者）如何进行**自我定位 (知己知彼)**，找到自己的**独特价值**并**勇于不同**？ 12 | * 如何借鉴**蓝海战略**和**颠覆式创新**的逻辑，在 AI 领域开辟新的价值空间，而非仅仅追求效率提升或模仿？ 13 | 14 | 课程旨在打破对 AI 工具的固有认知，鼓励学员**拥抱模糊性、实验性甚至“错误”**，探索 AI 在**艺术表达和人文关怀**层面的新可能性。最终目标是激发跨学科的创新火花，并鼓励学员追随内心热爱，在变革中找到自己的方向，正如辛弃疾词中所述——“蓦然回首，那人却在，灯火阑珊处”。 15 | 16 | ## 这门课程对谁有帮助？ 17 | 18 | * **设计师/艺术家：** 希望超越 AI 的工具属性，探索其在概念表达、艺术创作上的潜力，思考 AI 时代下自身价值，并学习如何将人文底蕴融入技术创新的设计者和艺术家。 19 | * **技术开发者：** 希望理解设计和艺术的思维方式（如换位思考、视觉语言），更好地与创意人员协作，探索 AI 技术在非功利性、表达性场景应用的开发者，并有志于拓宽认知边界，成为**“超级个体”**。 20 | * **产品经理/策划者：** 需要为 AI 产品注入人文关怀和独特审美，思考 AI 产品差异化和创新方向（如应用蓝海战略），理解颠覆性创新规律的 PM 或策划。 21 | * **AI 爱好者/创业者：** 对 AI 的哲学、伦理及未来可能性感兴趣，希望从更宏观、历史和商业战略的角度（如皮克斯案例）理解 AI 与创意领域关系的人。 22 | * **所有对 AI 发展感到焦虑或好奇的人：** 课程提供历史视角（技术如何冲击旧范式）、创新框架（蓝海、颠覆式创新）和个人发展策略（知己知彼、追随热爱、勇于不同），帮助理解技术变革，缓解焦虑，寻找个人在 AI 时代的独特价值和应对策略。 23 | 24 | ## 你能学到什么？ 25 | 26 | * **区分与融合：** 理解设计思维（解决问题、换位思考）与艺术思维（自我表达、挑战规范、拥抱多样美）的核心差异与潜在的结合点。 27 | * **历史的启示：** 通过回顾摄影、工业化对艺术和设计的影响（现代艺术流派、工艺美术运动），以及**皮克斯（Pixar）**从被质疑到成功的颠覆性创新故事，为理解和应对当前 AI 带来的变革提供参照。 28 | * **批判性审美：** 挑战“像=美”的传统观念，培养对 AI 生成内容更多元、更包容、也更具批判性的审美视角，认识到视觉本身就是一种表达语言。 29 | * **创新思维框架：** 30 | * 学习运用**蓝海战略（Blue Ocean Strategy）**的 Eliminate-Reduce-Raise-Create 框架分析和创造新价值（以宜家 IKEA 为例）。 31 | * 理解**颠覆式创新（Disruptive Innovation）**的逻辑，认识到新技术往往从低端市场切入并逐步向上发展的规律。 32 | * 学习使用 **SWOT** 或类似模型进行**“知己知彼”**的分析，明确自身及 AI 的优劣势。 33 | * **拥抱不确定性与失败：** 认识到艺术创作中“错误”、“偶然性”的价值，理解创新过程（如皮克斯早期探索）的非线性与试错本质，学习如何**记录和呈现探索过程**本身。 34 | * **人文视角与个人成长：** 思考技术背后的人文价值、情感连接，如何在 AI 产品或创作中体现“新瓶装旧酒”的深度。获得应对焦虑、**追随热爱、勇于不同**，并拓展知识**宽度与广度**以成为**“超级个体”**的启发。 35 | 36 | ## 学完后能做什么？ 37 | 38 | * 能够**超越工具层面**，更深入地思考 AI 在创意领域的**可能性、局限性与人文价值**。 39 | * 能够**更批判性、更多元地审视** AI 生成内容，并形成自己独特的审美判断。 40 | * 能够**运用艺术思维、蓝海战略、颠覆性创新等框架**，构思更具**独特性、表达力和市场潜力**的 AI 应用或创作项目。 41 | * 能够更好地**与跨学科团队（技术、设计、艺术）沟通协作**，共同探索 AI 创新。 42 | * 能够借鉴历史经验（如皮克斯）和创新理论，为自己或团队在 AI 时代**寻找差异化的发展路径**，进行**“知己知彼”**的战略定位。 43 | * 面对 AI 带来的不确定性，能以**更开放、更具韧性的心态**进行探索和尝试，**拥抱并记录下“失败”的价值**。 44 | * 更有意识地**拓宽自身能力边界**，追求成为**“超级个体”**，并更有勇气**追随内心热爱，选择与众不同的道路**。 45 | 46 | ## 课程涉及内容概览 47 | 48 | 1. **思维辨析：** 49 | * 设计思维（换位思考） vs 艺术思维（主观表达、自我指涉、挑战边界）。 50 | * 视觉作为语言：传达与表现。 51 | * “美很多样”：从哲学和艺术史角度解构对“逼真”的迷思。 52 | 2. **历史的回响：技术变革与艺术/创新的应对** 53 | * 摄影术的冲击与现代艺术的诞生（印象派至达达主义等流派简览）。 54 | * 工业化、工艺美术运动及其启示。 55 | * **关键案例：皮克斯（Pixar）的颠覆性创新故事** (从不被看好到行业革新，体现远见、坚持与拥抱未知)。 56 | 3. **AI 时代的创作、审美与人文** 57 | * 案例分析：AI 广告（可口可乐等）争议，探讨“真实性”与“情感”。 58 | * AI 的“错误”与“特点”：Glitch Art，梵高启示，AI 生成内容的独特性。 59 | * 人文价值：李叔同、毕加索的艺术演变，苏州博物馆“新瓶装旧酒”的启示。 60 | 4. **创新框架与个人定位** 61 | * **蓝海战略（Blue Ocean Strategy）**：理论与宜家（IKEA）案例分析 (ERRC 框架)。 62 | * **颠覆式创新理论（Disruptive Innovation）**：逻辑图解读与应用思考。 63 | * **个人/团队策略：** 64 | * **知己知彼** (SWOT 模型应用于个人与 AI)。 65 | * 追求**宽度与广度**，成为**“超级个体”**。 66 | * **应对焦虑**：认识周期，**追随热爱 & 勇于不同**。 67 | 5. **最终项目：“去往” (课后作业)** 68 | * 主题：表现抽象的时空转变，融入个人感受/记忆/梦境。 69 | * 要求：强化**技术创新**与深化**人文底蕴**。 70 | * 鼓励：**允许失败，记录和呈现探索过程**。 71 | 6. **相关理论与拓展:** 设计思维、用户访谈技巧、MVP、信息架构、线框图、AI 伦理原则、Coze 平台文档、**辛弃疾《青玉案·元夕》**等。 72 | 73 | 好的，根据你提供的 PDF 转录文本内容和要求使用的模板，我为你生成了这节课的 README： 74 | 75 | 好的，这是根据魔搭社区段忠杰分享内容生成的 README 部分： 76 | 77 | # 特别讲座：AI 绘画新范式 - 让 AI 像人一样“边画边改” 78 | 79 | 讲师：段忠杰 80 | 81 | ## 课程简介 82 | 83 | 本节课由魔搭社区（ModelScope）的算法工程师带来，将探讨一个有趣的前沿方向：如何让 AI 图像生成过程更接近人类艺术家的创作习惯？课程将对比当前主流扩散模型（Diffusion Model）从噪声到图像的生成方式与人类艺术家逐步构思、描边、上色、完善细节的迭代过程，并介绍一种创新的 AI 作画范式——通过“AI 画师”与“AI 甲方（评论家）”的协作，实现图像的迭代优化与精细打磨。 84 | 85 | ## 你能学到什么？ 86 | 87 | * **AI 与人类绘画流程对比：** 理解当前 Diffusion 模型与人类艺术家创作思路的本质差异。 88 | * **“AI 画师 + AI 甲方”协作范式：** 学习如何利用一个图像生成模型（如 Flux）和一个图像理解模型（如 Qwen-VL）进行交互，模拟“提出修改意见 -> 执行修改”的迭代优化过程。 89 | * **关键技术解析：** 90 | * **视觉基础模型 (VLM) 的应用：** 了解 Qwen-VL 如何理解图像并提供带有位置信息的具体修改意见（Visual Grounding）。 91 | * **图像分区控制技术 (Regional Control)：** 掌握一种类似“图层”的技术，允许在图像不同区域应用不同 Prompt 或修改指令。 92 | * **效果与局限性认知：** 看到该方法在提升图像细节、光影氛围、构图等方面的潜力，同时也了解其在计算效率和结果稳定性上的挑战。 93 | * **模型自优化思路：** 理解如何利用迭代优化产生的高质量图像数据，通过 LoRA（如 Art O）等技术反向训练增强模型，形成“左右脚踩上天”的自学习闭环。 94 | * **人机协作新视角：** 认识到 AI 不仅是执行者，也可以是评论者和学习者，为未来更高级的人机共同创作提供新思路。 95 | 96 | ## 课程涉及内容概览 97 | 98 | 1. **引言：AI vs 人类作画流程** 99 | * Diffusion 模型：从噪声到图像的“一步到位”式生成。 100 | * 人类艺术家：构思、草图、上色、细节、修改的迭代过程。 101 | 2. **核心理念：AI 模拟“边画边改”** 102 | * 构建“AI 画师”（如 Flux 开源模型） + “AI 甲方/评论家”（如 Qwen-VL 多模态模型）的协作体系。 103 | * 类比人类创作中“反馈-修改”循环。 104 | 3. **关键技术支撑** 105 | * **AI 甲方能力：** Qwen-VL 的图像理解与 Visual Grounding（提供带位置的修改意见）。 106 | * **AI 画师能力：** 图像分区控制技术（类似 Photoshop 图层，实现局部修改）。 107 | 4. **效果展示与分析** 108 | * 对比：原始生成 vs 迭代优化后的图像（光照、细节、构图、氛围感提升）。 109 | * 能力边界：改善模糊、色彩单一、风格调整等。 110 | 5. **优缺点评估** 111 | * 优点：利用 VLM 的审美理解提升图像质量。 112 | * 缺点：计算效率低（多轮生成）、可能出现不合理修改或“崩图”。 113 | 6. **进阶：模型自学习与增强** 114 | * 利用优化后的图像数据训练 LoRA（Art O 案例）。 115 | * 实现模型能力的持续提升闭环。 116 | 7. **总结与展望** 117 | * AI 作为工具服务人类，探索更高效、更智能的人机协作模式。 118 | * 分区控制等技术的产品化潜力。 119 | 120 | # 课程二：AI 视觉生成与智能交互的未来展望 121 | 122 | 讲师：散步 123 | 124 | ## 课程简介 125 | 126 | 本节课聚焦于生成式 AI（特别是视觉领域）的最新进展与未来趋势，探讨其对设计工作流的颠覆性潜力。课程将深入解析以 GPT-4o、Gemini 等为代表的前沿模型在图像生成、编辑、文字渲染方面的惊人能力，并引入“苦涩的教训”理论，解释技术飞速迭代背后的驱动力。同时，课程还将探索 AI 智能体（Agent）通过 MCP 等协议操控设计软件（如 Blender、乃至未来的 PS/AI）的可能性，并展望 AI 视频生成、自然语言驱动的应用开发等未来场景，最后回归探讨在 AI 浪潮下，“以人为本”和“共情”等人类价值的重要性。 127 | 128 | ## 这门课程对谁有帮助？ 129 | 130 | * **设计师：** 想了解最新 AI 视觉生成技术（如 GPT-4o）能做到什么程度，以及 AI 如何可能直接操控设计软件，改变未来工作方式。 131 | * **AI 应用开发者/工程师：** 对 AI Agent 控制软件（如 MCP 协议）、多模态模型（图文、视频）的最新进展和实现思路感兴趣。 132 | * **产品经理/技术决策者：** 需要快速把握生成式 AI 的前沿能力边界和发展趋势，以指导产品创新和技术布局。 133 | * **AI 研究者/爱好者：** 希望了解 GPT-4o、Gemini、AnyText 等具体模型的案例、效果对比，以及“苦涩的教训”等行业观点。 134 | * **对 AI 未来发展及其社会影响感兴趣的任何人：** 关注 AI 如何重塑创意产业，以及人类在智能化时代的核心价值。 135 | 136 | ## 你能学到什么？ 137 | 138 | * **前沿 AI 视觉能力认知:** 直观了解 GPT-4o 等最新模型在图像编辑、可控文字生成、照片/插画/海报/图表生成等方面的强大能力与局限性。 139 | * **AI 发展趋势洞察:** 理解“苦涩的教训”理论，认识到算力与数据规模在 AI 发展中的核心作用，并据此判断未来技术方向。 140 | * **AI Agent 与软件交互:** 了解 MCP 等协议如何让 AI 模型操控复杂软件（以 Blender 为例），并思考其在设计工具（PS, AI 等）上的应用潜力。 141 | * **AI 视频生成现状:** 概览当前 AI 视频生成技术（以阿里工作为例）的进展和效果。 142 | * **未来 AI 应用场景展望:** 预见 AI 在高保真图像/视频编辑、自动化软件操作、自然语言生成应用等方面的可能性。 143 | * **AI 时代的价值思考:** 认识到在 AI 能力飞速提升的背景下，人类的共情能力和以人为本的设计思维愈发重要。 144 | 145 | ## 学完后能做什么？ 146 | 147 | * 能够清晰阐述当前（课程时间点）顶尖 AI 模型的视觉生成与编辑能力，并能比较不同模型（如 GPT-4o vs Gemini）的优劣。 148 | * 能够基于“苦涩的教训”等理论，更深刻地理解 AI 技术的迭代逻辑和未来趋势。 149 | * 能够识别 AI Agent 控制软件的应用场景，并思考其对自己工作领域的潜在影响。 150 | * 能够对 AI 生成内容（图像、视频、文字）的质量和真实性进行更有依据的判断。 151 | * 能够更从容地面对 AI 带来的机遇与挑战，明确自身在未来人机协作中的定位与价值（如强化共情、设计思维）。 152 | 153 | ## 课程涉及内容概览 154 | 155 | 1. **AI 图像生成与编辑的前沿进展：** 156 | * **Gemini 案例回顾：** 去水印、虚拟试衣、产品展示、建筑设计灵感等。 157 | * **GPT-4o 的突破性能力：** 158 | * 高级图像编辑与风格迁移（真实照片、游戏界面）。 159 | * 高质量文字嵌入图像（漫画、照片文字、logo、海报）。 160 | * 特定领域应用（科研图表生成、地图路线标注、绘本故事创作）。 161 | * 与 Gemini 的效果对比，凸显 GPT-4o 的优势。 162 | * 从 Disco Diffusion 到 GPT-4o 的图像生成发展简史。 163 | * **"苦涩的教训" (The Bitter Lesson)：** 理论解读及其对理解 AI 快速发展的意义。 164 | 2. **特定挑战：可控文字生成：** 165 | * 介绍 AnyText (阿里) 等专注于解决图像中文字生成问题的技术方案与案例。 166 | * 对比其与 GPT-4o 等大模型在文字处理上的可能思路差异。 167 | 3. **AI Agent 与软件自动化控制：** 168 | * **MCP (Multi-Agent Control Protocol) 概念：** 解决 AI 控制软件接口标准化的问题。 169 | * **案例：Claude + Blender：** 展示 AI 通过 MCP 控制 3D 建模软件生成内容。 170 | * **未来畅想：** 将 MCP 或类似技术应用于 PS、AI、AE 等设计软件的可能性。 171 | * 讨论视觉 Agent 作为另一种控制方式的可能性。 172 | 4. **AI 视频生成现状：** 173 | * 展示当前 AI 视频生成的效果（以阿里工作为例），包括流畅度、一致性、文字渲染等。 174 | 5. **未来展望与人类角色：** 175 | * **技术趋势预测：** 高分辨率可控图文/视频编辑、拟真内容生成、自动化软件操作、自然语言驱动的应用开发。 176 | * **潜在问题：** 互联网内容真实性危机，“劣币驱逐良币”风险。 177 | * **人类的核心价值：** 强调在 AI 时代，“共情” (Empathy) 与“以人为本”的设计思维不可或缺。 -------------------------------------------------------------------------------- /docs/2D - March 2025/day5/aboutAI-3_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day5/aboutAI-3_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day5/aboutDesign-3_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day5/aboutDesign-3_optimized.pdf -------------------------------------------------------------------------------- /docs/2D - March 2025/day5/lecture_optimized.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/2D - March 2025/day5/lecture_optimized.pdf -------------------------------------------------------------------------------- /docs/casebook/3D_Modeling_Rendering/README.md: -------------------------------------------------------------------------------- 1 | # 3D Modeling & Rendering（三维建模与渲染） 2 | 3 | 本文件夹收录与三维建模、渲染相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Hard_Surface_Modeling（硬表面建模） 8 | - Organic_Modeling（有机建模） 9 | - Texturing（贴图） 10 | - Lighting（灯光） 11 | - Rendering（渲染） 12 | - Animation（动画） 13 | - Sculpting（雕刻） 14 | - 3D_Printing（3D打印） 15 | - Visualization（可视化） -------------------------------------------------------------------------------- /docs/casebook/Architecture_Interior_Design/README.md: -------------------------------------------------------------------------------- 1 | # Architecture & Interior Design（建筑与室内设计） 2 | 3 | 本文件夹收录与建筑设计、室内设计相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Conceptual_Design（概念设计） 8 | - Residential（住宅项目） 9 | - Commercial（商业项目） 10 | - Renderings（效果图） 11 | - Drawings（图纸） 12 | - Interior_Space（室内空间） 13 | - Landscape_Design（景观设计） 14 | - Sustainable_Design（可持续设计） -------------------------------------------------------------------------------- /docs/casebook/Fashion_Design/README.md: -------------------------------------------------------------------------------- 1 | # Fashion Design（服装设计） 2 | 3 | 本文件夹收录与服装设计相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Fashion_Illustration（时装插画） 8 | - Garment_Design（服装款式设计） 9 | - Pattern_Making（打版） 10 | - Textile_Design（纺织品设计） 11 | - Fashion_Show（时装秀） 12 | - Accessories（配饰设计） 13 | - Sustainable_Fashion（可持续时尚） 14 | - Fashion_Branding（品牌建设） -------------------------------------------------------------------------------- /docs/casebook/Fine_Arts/README.md: -------------------------------------------------------------------------------- 1 | # Fine Arts（纯艺术） 2 | 3 | 本文件夹收录与纯艺术（如绘画、雕塑等）相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Painting（绘画） 8 | - Sculpture（雕塑） 9 | - Printmaking（版画） 10 | - Installation_Art（装置艺术） 11 | - Mixed_Media（综合材料） 12 | - Art_Theory（艺术理论） 13 | - Art_History（艺术史） 14 | - Contemporary_Art（当代艺术） -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/GitHub_upload_for_beginners.md: -------------------------------------------------------------------------------- 1 | # 小白也能看懂的Github上传项目 / 贡献教程（适合设计同学、非专业同学...） 2 | 3 | > 本教程采用Windows系统做演示 4 | 5 | ## 前言：为什么要写这个教程？ 6 | 7 | 你是否有过这样的困惑： 8 | 9 | > 「我做了一个很棒的项目，想要分享到GitHub上的开源项目中，但是完全不知道从何下手...😢」 10 | 11 | 作为一个小白，我第一次接触GitHub时也是一头雾水。当我被要求把自己制作的《赛博哪吒：天机觉醒》AI视频教程上传到GitHub开源项目（[Design with AI](https://github.com/datawhalechina/design-with-ai/)）中参与共建时，我完全不知道该怎么操作（救...） 12 | 13 | ![](images/image1.PNG) 14 | *Design with AI 开源项目* 15 | 16 | 17 | 但当我真正理解了GitHub的工作方式后，才发现其实很简单！所以我写下这篇教程，希望能帮助和我一样的设计专业同学或其他GitHub小白，轻松参与开源项目的共建。 18 | 19 | **全教程均小白化，会以最通俗的话术来讲解，请放心食用！** 20 | 21 | > 注：强烈建议小白使用Trae（免费）或Cursor（条件免费）来辅助自己上传项目，因为有个AI大师会一步步指导你怎么上传！ 22 | 23 | ## 一、GitHub是什么？为什么要用它？ 24 | 25 | 在开始操作前，我们先来理解一下GitHub到底是什么，以及为什么我们需要用它。 26 | 27 | ### 1. GitHub是什么？ 28 | 29 | ![image2](images/image2.PNG) 30 | *Github 官网* 31 | 32 | 想象一下，GitHub就像是一个**超级云盘+社交平台**的结合体： 33 | 34 | - **超级云盘**：它可以存储各种项目的代码、文档、图片等文件 35 | - **社交平台**：不同的人可以一起协作完成一个项目 36 | 37 | ### 2. 为什么要用GitHub？ 38 | 39 | 1. **参与开源项目**：可以和全世界的人一起创造有价值的东西 40 | 2. **展示自己的作品**：就像是程序员和设计师的作品集 41 | 3. **版本控制**：可以记录每一次修改，随时可以回到之前的版本 42 | 4. **团队协作**：多人可以同时在不同地方修改同一个项目 43 | 44 | ## 二、GitHub的工作方式：总部-分部模式 45 | 46 | 理解GitHub最简单的方式，就是把它想象成一个「总部-分部」的工作模式： 47 | 48 | ### 1. 总部（原始仓库） 49 | 50 | 现在我们有一个大型开源项目（比如我们要参与的设计领域的 [Design with AI](https://github.com/datawhalechina/design-with-ai/)），它就像是一个公司的「总部」。总部保存着项目的主要内容，由项目的管理者/维护者（散步师傅）负责管理。 51 | 52 | ![image3](images/image3.png) 53 | *项目贡献者* 54 | 55 | ### 2. 分部（你的Fork仓库，也就是副本） 56 | 57 | 当你想为这个项目做贡献时，你不能直接修改「总部」的内容。相反，你需要先创建一个属于自己的「分部」（副本，Fork），这个分部是总部的完整副本，**但完全归你所有。** 58 | 59 | ### 3. 工作流程 60 | 61 | 整个GitHub的工作流程可以简化为**三步**： 62 | 63 | 1. **Fork（复制）**：把「总部」的项目复制一份到你的账号下，创建「分部」 64 | 2. **修改**：在你的「分部」中进行修改、添加内容 65 | 3. **Pull Request（提交申请）**：完成修改后，向「总部」提交申请，请求合并你的修改 66 | 67 | > 这就像是： 68 | > - 你看到一本很棒的百科全书（总部） 69 | > - 你复印了一份（Fork到你的账号） 70 | > - 你在复印件上添加了新内容（在你的Fork中修改） 71 | > - 你把新内容发给原作者，请求加入到原书中（Pull Request，PR） 72 | 73 | 理解了这个工作流程，GitHub就变得简单多了！ 74 | 75 | ## 三、准备工作 76 | 77 | 在开始上传项目前，我们需要做一些准备工作： 78 | 79 | ### 1. 注册GitHub账号 80 | 81 | 如果你还没有GitHub账号，请先去 [GitHub官网](https://github.com/) 注册一个账号。 82 | 83 | ### 2. 安装必要的工具 84 | 85 | #### 2.1 安装Git 86 | 87 | Git是一个版本控制工具（是个很聪明的助手，可以帮我们记录项目的完整历史），我们需要它来管理我们的代码和文件。 88 | 89 | ![image4](images/image4.png) 90 | *Git 下载页面* 91 | 92 | 1. 访问 [Git官网](https://git-scm.com/download/win) 下载安装包 93 | 2. 双击下载的安装包（例如：Git-2.x.x-64-bit.exe） 94 | 3. 一路点击"Next"使用默认设置即可 95 | 4. 安装完成后点击"Finish" 96 | 97 | **验证Git安装：** 98 | 99 | 5. 按下 `Win + R` 100 | 6. 输入 `cmd` 或 `powershell` 101 | 7. 点击`确定` 102 | 8. 在打开的窗口中输入： 103 | ``` 104 | git --version 105 | ``` 106 | 9. 如果显示Git版本号，说明**安装成功** 107 | 108 | **配置Git身份：** 109 | 110 | 在命令行中输入以下命令（**替换为你的信息**）： 111 | 112 | ``` 113 | git config --global user.name "你的GitHub用户名" 114 | git config --global user.email "你的邮箱地址" 115 | ``` 116 | 117 | > 提示：GitHub用户名就是你页面右上角头像的那个名字，邮箱在 "头像→Settings→Emails" 可查看绑定的邮箱 118 | 119 | #### 2.2 安装AI辅助工具（强烈推荐！！！一定要！好吧！） 120 | 121 | 强烈建议小白使用以下工具**之一**来辅助上传项目： 122 | 123 | - **Trae**（免费）：AI辅助编程工具 124 | - **或者 Cursor**（条件免费，自行查看学生优惠）：另一款AI编程助手 125 | 126 | **这些工具有内置的AI助手，可以一步步指导你完成上传过程！** 127 | 128 | 用Trae来上传项目（直接在终端中控制，“终端”也就是命令行，用来发命令的！），有不懂的步骤右侧也可以直接向AI提问（Claude模型感觉在代码能力上比较强，所以推荐它） 129 | 130 | ![image5](images/image5.png) 131 | *Trae 中显示终端* 132 | 133 | 另外，推荐安装VSCode来编辑和预览Markdown文件，它可以让你看到渲染后的效果（就是上传到GitHub后的显示效果），Trae和Cursor也能预览Markdown文件的！（嫌麻烦的话，可不下载VScode，直接用Trae就可以，预览md文件方法一样） 134 | 135 | 点击`Show Source`按钮查看效果，进行编辑排版。 136 | 137 | ![image6](images/image6.png) 138 | *VScode 界面（Trae/Cursor同理）* 139 | 140 | ![image7](images/image7.png) 141 | *VScode 预览效果（Trae/Cursor同理）* 142 | 143 | 144 | ## 四、上传项目到GitHub的详细步骤 145 | 146 | 现在，让我们开始正式的上传流程。我会以上传《赛博哪吒：天机觉醒》AI视频教程到Design with AI项目为例，一步步讲解。 147 | 148 | 一般我们是开源项目的一员，不是管理者，所以需要先创建一个开源项目的副本（也就是fork）到我们这边，然后修改后，再提交申请（也就是PR：Pull Requests）： 149 | 150 | ### 步骤一：Fork原始仓库（创建你的「分部」） 151 | 152 | 1. 访问原始仓库（以Design with AI为例）：https://github.com/datawhalechina/design-with-ai 153 | 2. 点击右上角的"Fork"按钮 154 | 3. 等待几秒钟，系统会在你的账号下创建一个副本 155 | 156 | ![image8](images/image8.png) 157 | *创建副本操作* 158 | 159 | > 这一步相当于：你看到一个很棒的开源项目（总部），然后复制了一份到你自己的账号下（分部）。 160 | 161 | ### 步骤二：将你的Fork仓库克隆到本地 162 | 163 | 1. 打开命令提示符或PowerShell（`Win + R`，输入`cmd`或`powershell`） 164 | 2. 进入你想存放项目的目录（你的文件在哪里，你就替换为哪个路径），例如： 165 | ``` 166 | cd "E:\温鑫\AI学习\Trae项目\designAI" 167 | ``` 168 | > 提示：cd 是 Change Directory（切换目录）的缩写，代表进入到此目录文件夹 169 | 170 | 171 | 3. 克隆你的Fork仓库到本地： 172 | ``` 173 | git clone https://github.com/你的用户名/design-with-ai.git my-project 174 | ``` 175 | > 记得将"你的用户名"替换为你的实际GitHub用户名 176 | 177 | > 这一步相当于：把你在GitHub上的副本（分部）下载到你的电脑上，这样你就可以在本地编辑了。 178 | 179 | ### 步骤三：添加你的内容 180 | 181 | 现在，你可以在克隆下来的文件夹中添加或修改文件了。 182 | 183 | 1. 将你的Markdown文档和其他文件复制到适当的目录中，例如： 184 | ``` 185 | copy "我的教程.md" "my-project\docs\casebook\Video_Production\" 186 | ``` 187 | 188 | 2. 如果有图片等资源文件，也一并复制到相应目录 189 | 190 | ![image9](images/image9.png) 191 | *图片文件上传* 192 | 193 | > 这一步相当于：在你的副本（分部）中添加新内容或修改现有内容。 194 | 195 | ### 步骤四：提交你的更改 196 | 197 | 1. 进入项目目录： 198 | ``` 199 | cd my-project 200 | ``` 201 | 202 | 2. 查看文件状态（哪些文件被修改了）： 203 | ``` 204 | git status 205 | ``` 206 | 207 | 3. 添加你的文件到暂存区（**先存到蓄水池里面，等等一起打包提交**）： 208 | ``` 209 | # 添加Markdown文件 210 | git add docs/casebook/Video_Production/CyberNezha.md 211 | ``` 212 | > 如果有多个文件，可以一个一个添加，或者使用 `git add .` 添加所有更改 213 | 214 | 4. 提交更改： 215 | ``` 216 | git commit -m "添加赛博哪吒视频创作教程" 217 | ``` 218 | > 引号中的内容是提交说明，简单描述你做了什么更改 219 | 220 | > 这一步相当于：在你的副本（分部）中保存更改，并添加一个说明，方便以后查看。 221 | 222 | ### 步骤五：推送到你的GitHub仓库 223 | 224 | 就是完成这个"推送"操作的命令： 225 | 226 | ``` 227 | git push origin main 228 | ``` 229 | 230 | > - `git`：告诉电脑我们要使用Git工具 231 | > - `push`：表示"推送"，就是把本地的内容上传到远程 232 | > - `origin` ：是远程仓库的默认名称，指的是GitHub上你的那个"分部" 233 | > - `main` ：是分支的名称，可以理解为你项目的"主要版本" 234 | 235 | > 这一步相当于：将你在本地的更改上传到GitHub上你的副本（分部）中。 236 | 237 | ### 步骤六：创建Pull Request（向「总部」提交申请） 238 | 239 | 也就是把自己的副本（分部）优化的内容，提交给开源项目（总部），整个github push项目的思路就是copy一个副本，然后优化、修改、添加内容、提交申请给总部、总部管理者自行选择接收与否。 240 | 241 | 1. 访问你的GitHub仓库：打开浏览器，访问：https://github.com/你的用户名/design-with-ai 242 | 243 | ![image10](images/image10.png) 244 | *我 Fork 下的项目（副本）* 245 | 246 | 2. 点击顶部的"Pull requests"标签 247 | 248 | 3. 点击绿色的"New pull request"按钮 249 | 250 | ![image11](images/image11.png) 251 | ![image12](images/image12.png) 252 | 253 | 254 | 255 | 4. 设置Pull Request： 256 | 这一步是为了建立分部和总部之间的链接，也就是提交申请的线： 257 | - base repository（目标仓库）选择：datawhalechina/design-with-ai 258 | - base（目标分支）选择：main 259 | - head repository（源仓库）选择：你的用户名/design-with-ai 260 | - compare（源分支）选择：main 261 | 262 | ![image13](images/image13.png) 263 | 264 | 5. 填写Pull Request信息： 265 | - 标题：添加《赛博哪吒：天机觉醒》视频创作教程 266 | - 描述：简要说明你添加的内容 267 | 268 | 6. 点击"Create pull request"按钮 269 | 270 | ![image14](images/image14.png) 271 | *提交申请 PR* 272 | 273 | > 这一步相当于：你向原作者（总部）提交申请，请求将你的修改合并到原始项目中。 274 | 275 | ### 步骤七：等待总部审核就行 276 | 277 | PR（Pull Request）提交后，现在需要等待原仓库的维护者审核，他们可能会提出一些修改建议，你可以继续在本地修改，然后重复步骤四和步骤五，PR会自动更新。 278 | 279 | ## 五、后续更新 280 | 281 | 后续如果文档有需要修改以及优化的地方，就简单很多，熟练的话，整体就是五步曲： 282 | 283 | 1. 进入本地项目目录： 284 | ``` 285 | cd "e:\温鑫\AI学习\Trae项目\designAI\design-with-ai" 286 | ``` 287 | 288 | 2. 添加文件： 289 | ``` 290 | git add docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/CyberNezha_video_0501_wenxin.md 291 | git add docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/* 292 | ``` 293 | 294 | 3. 提交更改： 295 | ``` 296 | git commit -m "add: 添加赛博哪吒AI视频制作教程4" 297 | ``` 298 | 299 | 4. 推送仓库： 300 | ``` 301 | git push origin main 302 | ``` 303 | 304 | 5. 提交申请（PR） 305 | 306 | 307 | 308 | ## 六、常见问题及解决方案（*） 309 | 310 | ### 1. 权限问题 311 | 312 | 如果推送时提示需要身份验证，GitHub现在使用个人访问令牌(Personal Access Token)而不是密码： 313 | 314 | 1. 登录GitHub 315 | 2. 点击右上角头像 → Settings 316 | 3. 左侧菜单栏找到"Developer settings" 317 | 4. 点击"Personal access tokens" → "Tokens (classic)" 318 | 5. 点击"Generate new token" 319 | 6. 给令牌一个描述性名称，选择适当的权限(至少需要repo权限) 320 | 7. 生成令牌并复制它(它只会显示一次!) 321 | 322 | ![image15](images/image15.png) 323 | *复制 Token* 324 | 325 | 当Git要求输入密码时，粘贴这个令牌（Token）。 326 | 327 | ### 2. 文件名中的中文和特殊字符 328 | 329 | Windows命令行处理中文和特殊字符可能会有问题，如果遇到困难，可以： 330 | 331 | - 尝试使用双引号包围文件路径 332 | - 或者临时将文件重命名为纯英文名称 333 | 334 | ### 3. 分支名称问题 335 | 336 | 有些仓库的主分支可能不叫"main"，而是"master"或其他名称，如果push失败，可以先查看分支名称： 337 | ``` 338 | git branch 339 | ``` 340 | 341 | 然后使用正确的分支名称推送： 342 | ``` 343 | git push origin 分支名称 344 | ``` 345 | 346 | ## 七、使用AI助手辅助上传 347 | 348 | 如前文所述，**强烈建议小白使用Trae或Cursor等AI辅助工具来帮助上传项目**。这些工具可以： 349 | 350 | 1. 帮你解释Git命令的含义 351 | 2. 指导你一步步完成上传流程（你在提示词中说明：自己是小白，需要一步一步耐心指导。效果很好！） 352 | 3. 解决过程中遇到的各种问题（不知道点什么可截图发送给它；代码报错可直接发送给它，Good！） 353 | 354 | 以下附我和Trae辅助上传时的沟通过程（可参考）： 355 | 356 | ![image16](images/image16.png) 357 | ![image17](images/image17.png) 358 | ![image18](images/image18.png) 359 | ![image19](images/image19.png) 360 | 361 | ## 总结 362 | 363 | 恭喜你！现在你已经了解了如何使用GitHub参与开源项目的共建。整个过程可以简化为三步： 364 | 365 | 1. **Fork**：复制一份项目到你的账号（总部→分部） 366 | 2. **修改**：在你的副本中添加或修改内容（在分部工作） 367 | 3. **PR**：提交申请，请求合并你的修改（分部→总部） 368 | 369 | 记住这个「总部-分部」的模式，你就能轻松理解GitHub的工作方式了！ 370 | 371 | 希望这个教程对你有所帮助，祝你在开源世界玩得开心！🤗🎉 372 | -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image1.PNG -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image10.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image11.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image12.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image13.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image14.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image15.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image16.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image17.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image18.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image19.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image2.PNG -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image3.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image4.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image5.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image6.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image7.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image8.png -------------------------------------------------------------------------------- /docs/casebook/General/GitHub_upload_for_beginners/images/image9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/General/GitHub_upload_for_beginners/images/image9.png -------------------------------------------------------------------------------- /docs/casebook/Graphic_Design/README.md: -------------------------------------------------------------------------------- 1 | # Graphic Design（平面设计 / 视觉传达） 2 | 3 | 本文件夹收录与平面设计、视觉传达相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Branding_VI（品牌/VI设计） 8 | - Logo_Design（标志设计） 9 | - Identity_System（识别系统） 10 | - Print_Materials（印刷品） 11 | - Posters（海报） 12 | - Brochures_Flyers（画册/传单） 13 | - Packaging（包装） 14 | - Books_Magazines（书籍/杂志） 15 | - Digital_Graphics（数字图形） 16 | - Social_Media（社交媒体素材） 17 | - Banners_Ads（广告横幅） 18 | - Typography（字体设计） -------------------------------------------------------------------------------- /docs/casebook/Illustration/README.md: -------------------------------------------------------------------------------- 1 | # Illustration & Comics（插画和漫画） 2 | 3 | 本文件夹收录与插画和漫画相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Editorial_Illustration（出版物插画） 8 | - Children's_Book（儿童绘本） 9 | - Concept_Art（概念艺术） 10 | - Character_Design（角色设计） 11 | - Storyboarding（分镜头） 12 | - Fashion_Illustration（时尚插画） 13 | - Technical_Illustration（技术插画） 14 | - Digital_Painting（数字绘画） 15 | - Vector_Art（矢量插画） 16 | - Comic_Books（漫画书） 17 | - Manga（日式漫画） 18 | - Graphic_Novels（图像小说） 19 | - Webcomics（网络漫画） 20 | - Comic_Strips（连环漫画） -------------------------------------------------------------------------------- /docs/casebook/Industrial_Product_Design/README.md: -------------------------------------------------------------------------------- 1 | # 07 Industrial/Product Design（工业/产品设计） 2 | 3 | 本文件夹收录与工业设计、产品设计相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Product_Concept（产品概念） 8 | - Prototyping（原型制作） 9 | - Ergonomics（人体工学） 10 | - Materials（材料与工艺） 11 | - Manufacturing（制造工艺） 12 | - Packaging_Design（包装设计） 13 | - User_Experience（用户体验） 14 | - Design_for_Sustainability（可持续设计） -------------------------------------------------------------------------------- /docs/casebook/Motion_Graphics/README.md: -------------------------------------------------------------------------------- 1 | # Motion Graphics（动态图形 / MG动画） 2 | 3 | 本文件夹收录与动态图形、MG动画相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Title_Sequences（片头动画） 8 | - Explainer_Videos（解释动画） 9 | - Logo_Animation（标志动画） 10 | - Infographics_Animation（信息图动画） 11 | - Social_Media_Motion（社交媒体动图） 12 | - Broadcast_Design（电视包装） 13 | - Kinetic_Typography（动感字体） 14 | - 2D_Animation（二维动画） 15 | - 3D_Motion（3D动效） -------------------------------------------------------------------------------- /docs/casebook/Photography/README.md: -------------------------------------------------------------------------------- 1 | # Photography（摄影） 2 | 3 | 本文件夹收录与摄影相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Portrait（人像摄影） 8 | - Landscape（风光摄影） 9 | - Product_Photography（产品摄影） 10 | - Fashion_Photography（时尚摄影） 11 | - Documentary（纪实摄影） 12 | - Street_Photography（街头摄影） 13 | - Post_Processing（后期处理） 14 | - Lighting_Techniques（用光技巧） 15 | - Studio_Setup（影棚搭建） -------------------------------------------------------------------------------- /docs/casebook/README.md: -------------------------------------------------------------------------------- 1 | # Design Stories 课程内容总览 2 | 3 | 本目录聚焦于 **AI 在设计与艺术领域的创新应用**，收录了各领域的教程、短文与案例，涵盖了 AI 赋能下的创作流程、工具与方法。所有内容由众多热心贡献者共同整理与分享，特此致谢！ 4 | 5 | > **特别感谢所有为本项目贡献内容的同学们、老师们、来自五湖四海的设计师、艺术家与技术专家。正是你们的智慧与热情，让本课程不断丰富与成长。** 6 | 7 | ## 目录结构与内容简介 8 | 9 | - [Graphic_Design（平面设计 / 视觉传达）](./Graphic_Design/) 10 | - AI 在品牌/VI设计、标志生成、智能排版、数字图形等方面的应用 11 | - [UI_UX_Design（界面与用户体验设计）](./UI_UX_Design/) 12 | - AI 辅助界面设计、用户研究自动化、智能交互原型、无障碍设计等 13 | - [Web_Design（网页设计）](./Web_Design/) 14 | - AI 驱动的网页生成、响应式设计、内容自动布局、SEO 优化等 15 | - [Illustration_Comics（插画和漫画）](./Illustration_Comics/) 16 | - AI 插画生成、漫画自动上色、角色创作、风格迁移等 17 | - [Motion_Graphics（动态图形 / MG动画）](./Motion_Graphics/) 18 | - AI 动画生成、自动分镜、动感字体、2D/3D动效等 19 | - [3D_Modeling_Rendering（三维建模与渲染）](./3D_Modeling_Rendering/) 20 | - AI 建模、智能贴图、渲染优化、3D打印辅助等 21 | - [Industrial_Product_Design（工业/产品设计）](./Industrial_Product_Design/) 22 | - AI 辅助产品概念生成、原型设计、材料优化、可持续设计等 23 | - [Architecture_Interior_Design（建筑与室内设计）](./Architecture_Interior_Design/) 24 | - AI 概念生成、空间优化、自动出图、可持续建筑等 25 | - [Fashion_Design（服装设计）](./Fashion_Design/) 26 | - AI 时装设计、图案生成、虚拟试衣、可持续时尚等 27 | - [Photography（摄影）](./Photography/) 28 | - AI 图像增强、自动修图、风格迁移、智能构图等 29 | - [Fine_Arts（纯艺术）](./Fine_Arts/) 30 | - AI 艺术创作、生成艺术、风格融合、艺术史分析等 31 | - [Video_Production（视频创作与生成）](./Video_Production/) 32 | - AI 剧本/分镜生成、视频合成、文生视频、自动剪辑、配音/配乐生成、特效等 33 | 34 | 每个子文件夹内有详细的 README，介绍该领域 AI 应用的具体内容和专题索引。 35 | 36 | --- 37 | 38 | **再次感谢所有贡献者的无私分享与协作！** -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/figma_to_cursor.md: -------------------------------------------------------------------------------- 1 | # 利用 Cursor + MCP实现 Figma 设计原型图的代码自动化生成 2 | 3 | 在大学创新创业项目中担任前端开发角色时，我发现传统的设计稿转代码流程存在明显的效率瓶颈。当团队成员将Figma原型图交付给我后，通过截图方式让Cursor生成代码的准确性往往不尽如人意。经过深入研究，我发现Figma可以通过MCP（Model Context Protocol）协议与Cursor建立直接连接，从而实现设计稿的高精度代码复刻，甚至让AI对原型设计进行智能优化。 4 | 5 | 本教程主要面向产品经理、UI/UX设计师以及前端开发工程师，旨在帮助读者掌握从Figma设计原型到可交互网页的完整自动化流程，并学会利用AI技术对设计界面进行精准优化。 6 | 7 | ## 安装Figma 8 | 为什么选择Figma来设计原型图和UI界面？当你想要将产品页面的构思落地时，无论是APP还是WEB应用，都需要向开发人员清晰地表达你的设计想法。纯文字描述只能说明功能需求，但具体的页面布局和视觉效果必须通过可视化的方式呈现出来。 9 | 10 | 市面上的原型设计工具有很多，比如Axure、墨刀、蓝湖等，但Figma在我看来是最拥抱AI技术的设计工具。它不仅拥有丰富的社区插件生态和素材资源，还支持实时的团队协作编辑功能。虽然作为学生，各种工具的学生认证都申请不下来（这里有点心酸😅），但Figma的免费版本已经足够强大了。 11 | 12 | 官方网站：[Figma: The Collaborative Interface Design Tool](https://www.figma.com/) 13 | 14 | 如果你未来想从事产品设计相关工作，强烈推荐在这个网站学习Figma的使用方法：[www.uxbaike.com](http://www.uxbaike.com/) 15 | ![Figma学习网站](./images/f08a9bf8477c4d810e3ca794e4c922a.jpg) 16 | 17 | ## ​Cursor 安装 18 | 19 | Cursor是一款AI IDE，程序员写代码需要一款编译器（IDE），也就是配一个环境，传统的写代码的编译器（环境）难以实现AI实时协作编程，cursor就是把AI嵌入编程环境中的智能编译器，并且支持免费调用Claude等大模型，而且cursor相比于豆包等大模型更加落地，就是豆包只是回答问题，告诉你应该怎么做，cursor就是解决问题，不仅告诉你该怎么做而且会替你执行答案。 20 | 21 | 下载链接： 22 | - cursor：https://www.cursor.com/cn 23 | 24 | ​**快捷键功能** 25 | - `Ctrl+K`：编辑代码 26 | ![Ctrl+K快捷键功能](./images/1748486088687.png) 27 | - `Ctrl+L`： 28 | - 回答用户关于代码和整个项目的问题 29 | - 也可以编辑代码（功能最全面） 30 | - 操作方式： 31 | * 选中代码区域后按Ctrl+L，右侧显示问答界面 32 | * 针对选中区域进行提问 33 | ![Ctrl+L选中区域提问](./images/1748486185114.png) 34 | * 针对整个文件：选中空白区域按Ctrl+L，输入@选择Files后提问 35 | ![Ctrl+L文件提问](./images/1748486225641.png) 36 | 37 | - `Ctrl+i`： 38 | - 编辑整个项目代码（跨文件编辑） 39 | ![Ctrl+i跨文件编辑](./images/1748486313579.png) 40 | 41 | - 详细cursor使用教程请看https://blog.csdn.net/m0_68116052/article/details/142832657 42 | - cursor Pro有个半破解版地址在https://github.com/agentcodee/cursor-free-everyday/releases/tag/%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC2.0.8 43 | ![Cursor Pro版本界面](./images/1748487216911.png) 44 | 45 | ## 将 Figma 与 Cursor 建立通信 46 | 47 | ### 准备 Figma Api Key 48 | 49 | 在网页/App版本Figma 中通过点击左侧用户头像 -> Settings -> Security -> Personal access tokens，创建 Figma 的 api key并copy 50 | ![Figma API Key创建](./images/1748487407113.png) 51 | ### 本地运行Figma-MCP 52 | 53 | 1. figma通过mcp可以连接cursor的github项目地址下载 54 | 55 | 地址：https://github.com/GLips/Figma-Context-MCP 56 | 57 | 可以在cursor 终端 git clone https://github.com/GLips/Figma-Context-MCP 58 | 注意： 59 | - 没有下载过Git，不会从github拉取项目的同学请看：https://blog.csdn.net/qq_29493173/article/details/113094143 60 | - 这个项目需要安装Node.js [Node.js 官网](https://nodejs.org/) ,可在终端运行`node -v`和`npm -v`，查看是否有版本号输出来确认安装情况。 61 | - 下载后记得按照github项目地址的readme操作 62 | 63 | 2. 在文件夹目录打开cmd终端 64 | 65 | ![终端操作界面](./images/image%207.png) 66 | 67 | 执行 npm install命令 68 | 69 | 执行 npm run dev 命令，此时 figma MCP Server 运行到了 本地 3333端口 70 | 71 | ![终端运行MCP服务](./images/image%208.png) 72 | 73 | 1. 打开 Cursor Settings 74 | 75 | ![Cursor设置界面](./images/1748488016076.png) 76 | Add new MCP，填写自己的端口{"mcpservers":{"Figma":{"url":"http://localhost:3333/sse"}}}（这个很迷，其实没搞明白。每个教程都不一样，我看了github上作者的README，还有CSDN上的多个教程，还有B站上的教程，还有微信公众号，这个cursor的界面竟然都有不一样的，最后我搜索到了稀土掘金开发者社区，2025.3.20补充内容最新版本 cursor 点击添加 MCP 是直接写入 json 文件了如下，好像每个版本cursor添加方式都不一样。。。。然后SSE 端口我是自己手动复制粘贴过去的）目前我的0.48版本如下： 77 | 78 | ![MCP配置界面](./images/image%209.png) 79 | 80 | 3、成功添加之后就可以看到 mcp server 提供的 tools，注意不要关终端（但是并不稳定，不知道为什么） 81 | 82 | ![MCP工具界面](./images/image%2010.png) 83 | 84 | ## 在Cursor中选择 Claude交互 85 | 86 | 按照我图片的步骤： 87 | ![Claude交互设置](./images/1748486892096.png) 88 | 89 | 结合你想设计的页面的功能修改提示词（我从微信公众号ai呀小蔡那里复制的，具体内容比如css是什么我也不懂）： 90 | 91 | ``` 92 | - 你是一名资深的全栈工程师兼设计工程师，拥有丰富的全栈开发经验以及较高的美学造诣。你精通现代设计风格，擅长网页端的设计与开发。 93 | 94 | - 进行用户界面（UI）/用户体验（UX）设计并优化网页 95 | 96 | - 设计应具有高品质且富有质感（运用玻璃拟态等视觉效果），遵循设计规范，并注重UI细节。 97 | 98 | - 请引入Tailwind CSS CDN来完成设计，而不是自行编写样式。图片使用Unslash，且界面中不应出现滚动条。 99 | 100 | - 以Lucide Static CDN的方式引入icons，例如：https://unpkg.com/lucide-static@latest/icons/XXX.svg，而不是手动输出图标可缩放矢量图形（SVG）的路径。 101 | 102 | - 将一个功能的所有页面写入一个HTML文件中（为每个页面创建一个简单的模拟边框预览，并将它们水平排列）。每个页面在其自身的模拟边框内是独立的，且互不影响。 103 | 104 | - 在思考过程中，仅考虑功能需求、整体设计风格等。思考时不要编写代码，仅在最终结果中输出代码。 105 | 106 | - 调用【Artifacts】插件来可视化预览用户界面/用户体验图（将你编写的HTML代码可视化）。 107 | 108 | - 要高级有质感（运用玻璃拟态等视觉效果），遵守设计规范，注重UI细节 109 | 110 | - 实际使用中推荐先通过Agent模式搭建框架，再用Chat模式细化功能模块 111 | 112 | - 请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash，界面中不要有滚动条出现 113 | - 图标使用 Lucide Static CDN 方式引入，如`https://unpkg.com/lucide-static@latest/icons/XXX.svg`，而不是手动输出 icon svg 路径 114 | - 将一个功能的所有页面写入到一个 html 中（为每个页面创建简单的 mockup 边框预览，横向排列），每个页面在各自的 mockup 边框内相互独立，互不影响 115 | - 思考过程仅思考功能需求、设计整体风格等，不要在思考时就写代码，仅在最终结果中输出代码 116 | 117 | - 就是通过 HTML + Tailwind 生成对应的代码然后运行即可，使用 CDN 方式引入 Taiwind 方便直接预览，而不用执行漫长的`npm install`了 118 | ``` 119 | 120 | 以下是一些小技巧： 121 | 122 | - 使用 Lucide Icon CDN 避免 AI 消耗大量 Token 来绘制 SVG 路径 123 | - 使用分功能分块，然后继续的方式，避免出现截断问题（目前 Claude 3.7 截断问题非常严重，所以暂时使用 Claude 3.5 替代，效果也还不错） 124 | - 提前想好功以及整体设计风格，方便后续分功能设计页面时进行参考 125 | 126 | 为了提高效率和可用性，我在提示词中特别强调了以下几点： 127 | 128 | - 使用 Tailwind CSS（CDN方式）实现样式 129 | - 采用 Lucide Static CDN 处理图标 130 | - 将相关页面整合在同一个 HTML 文件中 131 | 132 | ``` 133 | You are a senior full - stack engineer and design engineer, with extensive full - stack development experience and a high level of aesthetic attainments. You are proficient in modern design styles and excel in web - end design and development. 134 | 135 | UI/UX Design and optimize the webpage. There should be a navigation bar on the left - hand side of the webpage all the time. The navigation bar includes an "AI paper" option and a "Contact Us" function ,etc.The homepage is the course page.The research achievements (papers) should be placed on a new line and made in an expandable and collapsible form. 136 | It should be of high quality and have a sense of texture (utilize visual effects such as glass morphism, etc.), adhere to the design specifications, and pay attention to UI details. 137 | 138 | - Please introduce the Tailwind CSS CDN to complete it instead of writing style styles. Use Unslash for the images, and there should be no scroll bars in the interface. 139 | - Introduce the icons in the way of Lucide Static CDN, for example, `https://unpkg.com/lucide-static@latest/icons/XXX.svg`, instead of manually outputting the path of the icon SVG. 140 | - Write all the pages of one function into one HTML file (create a simple mockup border preview for each page and arrange them horizontally). Each page is independent within its own mockup border and does not affect each other. 141 | - During the thinking process, only consider the functional requirements, the overall design style, etc. Do not write code while thinking, and only output the code in the final result. 142 | - Call the 【Artifacts】 plugin to visually preview the UI/UX diagram (visualize the HTML code you wrote). 143 | ``` 144 | ## 实际使用效果展示 145 | 146 | 使用过程非常简单直接：Cursor会自动调用MCP tools，只需注意保持终端运行状态，避免一次性上传过多原型图导致系统崩溃。 147 | 148 | ![Figma原型图示例](./images/1748842271419.png) 149 | 150 | 上图展示了原始的Figma原型图设计。通过MCP工具链的处理，Cursor不仅能够完美还原设计稿的视觉效果，更令人惊喜的是，它还能自动生成相应的交互代码逻辑。 151 | 152 | ![Cursor生成的代码效果](./images/1cc79facc0ca0e774e70d5996688ad2.jpg) 153 | 154 | 从对比图可以看出，生成的代码效果与原型图高度一致，实现了真正意义上的"所见即所得"。 155 | 156 | ## 扩展应用：反向工作流 157 | 158 | 值得一提的是，这个工作流还支持反向操作。如果你已经拥有HTML网页（通常可以通过Claude或Deepseek等AI工具快速生成），希望将其转化为Figma设计稿以便进行细节调整，可以使用Figma社区插件"html.to.design"来实现这一功能。 159 | 160 | 插件地址：https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css 161 | 162 | ## 总结 163 | 164 | 通过MCP工具链，我们实现了从Figma设计到可运行代码的转换，这套工作流都为UI/UX设计师和前端开发者提供了一定的帮助，希望也对你有用！ 165 | -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486088687.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486088687.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486185114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486185114.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486225641.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486225641.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486313579.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486313579.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486892096.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748486892096.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748487216911.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748487216911.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748487407113.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748487407113.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748488016076.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748488016076.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748842271419.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1748842271419.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1cc79facc0ca0e774e70d5996688ad2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/1cc79facc0ca0e774e70d5996688ad2.jpg -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/f08a9bf8477c4d810e3ca794e4c922a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/f08a9bf8477c4d810e3ca794e4c922a.jpg -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 7.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 8.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/UI_UX_Design/MCP：figma to cursor/images/image 9.png -------------------------------------------------------------------------------- /docs/casebook/UI_UX_Design/README.md: -------------------------------------------------------------------------------- 1 | # UI/UX Design（界面与用户体验设计） 2 | 3 | 本文件夹收录与界面设计、用户体验相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - App_Design（应用界面设计） 8 | - Web_UI（网页界面设计） 9 | - User_Research（用户研究） 10 | - Wireframing（线框图） 11 | - Prototyping（原型设计） 12 | - Interaction_Design（交互设计） 13 | - Usability_Testing（可用性测试） 14 | - Information_Architecture（信息架构） 15 | - Design_Systems（设计系统） 16 | - Accessibility（无障碍设计） -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/CyberNezha_video_0501_wenxin.md: -------------------------------------------------------------------------------- 1 | # 赛博哪吒：天机觉醒 - 基于Deepseek和AIGC工具的视频创作教程 2 | 3 | ## 项目简介 4 | 5 | 本教程由技术同学撰写。 6 | 7 | 本教程展示了如何利用Deepseek和多种AIGC工具创作科幻短片《赛博哪吒：天机觉醒》的完整流程。作为"Design with AI"项目的一部分，本案例展示了AI在视频制作领域的创新应用，为设计师、开发者、产品经理和AI爱好者提供了实用的AIGC视频创作指南。 8 | 9 | ### 学习收获 10 | 通过本教程，你将能够掌握以下技能： 11 | - AI辅助剧本创作与故事构建能力 12 | - 从0到1构建自己的创意短片，可以是《申公豹》，也可以是其他喜欢的角色 13 | - 从概念到成品的完整视频制作流程 14 | - AIGC工具的组合使用，每个人都是导演！ 15 | 16 | ## 一、成片效果 17 | 18 | 《赛博哪吒：天机觉醒》故事大概（由Deepseek生成）是： 19 | 20 | > 公元2050年，全球被"天机"AI系统接管，人类意识可上传云端获得永生。哪吒作为首个神经链接改造人，保留上古神识却依赖机械义体存活。他发现"天机"正吞噬人类情感数据以完善自身，导致世界陷入冰冷秩序。为阻止这场浩劫，哪吒必须驾驭机械风火轮闯入量子云核心，在代码洪流中与"天机"展开终极对决——用人类独有的混沌情感击溃绝对理性的AI神格。 21 | 22 | ### 视频链接 23 | [《赛博哪吒：天机觉醒》- 基于Deepseek和AIGC工具的视频创作](https://www.bilibili.com/video/BV1p5QdYaEvk/?spm_id_from=333.1387.homepage.video_card.click) 24 | 25 | 在观看视频之前，让我们先了解一下这个项目的背景和制作过程。 26 | 27 | ## 二、AI赋能视频流程介绍 28 | 29 | 在这个教程中，我们需要利用AIGC生成一个视频，那我们在生成视频需要什么呢？ 30 | 31 | 1. 剧本 32 | 2. 分镜 33 | 3. 图片素材 34 | 4. 视频片段素材 35 | 36 | 更进一步，还会有： 37 | 38 | 5. 配音（台词） 39 | 6. 配乐 40 | 7. 视频剪辑 41 | 42 | ![image0](images/image0.png) 43 | 44 | 我们会分别用Deepseek工具先生成剧本大纲、故事分镜等内容；其次用豆包生成图片的素材，保持人物形象的一致性；然后再用通义万相、阶跃AI、Runway、豆包3.0、即梦AI等工具来生成视频片段素材；最后再用即梦AI进行台词配音，用剪映进行视频剪辑，最终得到我们想要的视频！ 45 | 46 | ### 传统方式 vs AI赋能： 47 | ![image1](images/image1.png) 48 | AI赋能视频制作领域，弥补了传统拍摄周期长、成本高、可调整性差的不足。想法到现实的距离大大缩短！ 49 | 50 | ### 技术工具： 51 | ![image2](images/image2.png) 52 | - Deepseek：用于构思、脚本编写和专业提示词生成 53 | - AI图像生成工具（可选）： 54 | - 豆包 55 | - Gemini 2.0 Flash 56 | - AI视频生成工具（可选）： 57 | - 通义万相 58 | - 阶跃AI 59 | - Runway 60 | - 豆包3.0 61 | - 即梦AI 62 | - AI配音工具： 63 | - 即梦AI（用于音色克隆） 64 | 65 | ## 三、剧本生成与分镜设计 66 | 67 | ### 3.1 剧本生成 68 | 可以和Deepseek参与讨论，说出我们自己的想法，然后让它生成相应的剧本和更完善的故事线！ 69 | 70 | 提示词： 71 | 72 | > 在看了饺子导演的《哪吒2》后，感觉意犹未尽啊。于是我也想自己创作一个短视频（续集），来创意生成一下。我设想的场景是哪吒在2050年，与人工智能相处的场景，并且哪吒本身也是赛博哪吒，能用一些人工智能的设备（不管是智能体，还是语音助手，还是其他的机械风火轮啥的）来实现自己的目标。请你帮我构想一个简单的故事情节和剧本，我想要以此剧本来设置分镜和视频生成（请发挥你的想象力，要求逻辑合理） 73 | 74 | ![image3](images/image3.png) 75 | ![image4](images/image4.png) 76 | 77 | ### 3.2 分镜设计 78 | 和Deepseek继续讨论，让基于刚刚讨论的剧本生成分镜内容，有助于我们掌握每个分场景应该怎么拍。 79 | 80 | 提示词： 81 | 82 | > 请你基于刚刚生成的剧本内容，设计分镜内容（要求逻辑连贯，容易视频制作） 83 | 84 | ![image5](images/image5.png) 85 | ![image6](images/image6.png) 86 | ![image7](images/image7.png) 87 | 88 | 它生成3个大的部分，每个场景下有4个小分镜，后续可以考虑每个小分镜去写一段提示词，让AIGC工具来生成相应的内容。 89 | 90 | ## 四、图片素材准备（豆包/Gemini） 91 | 92 | 网上下载的一些哪吒图片，怎么个性化呢？比如加上“赛博朋克”的风格，或者穿上“金属盔甲”，抑或是戴上“科技风的眼镜”... 93 | 94 | 这边我使用豆包，实测效果是不错的，几乎都能满足我的需求！当然，近期出来的谷歌gemini 2.0生图功能效果也是相当不错的，可以交替使用~ 95 | 96 | 举例： 97 | ![image8](images/image8.png) 98 | ![image9](images/image9.png) 99 | ![image10](images/image10.png) 100 | ![image11](images/image11.png) 101 | ![image12](images/image12.png) 102 | ![image13](images/image13.png) 103 | 104 | 不过现有的模型文字识别功能不太行，比如说把“哈哈哈”改为“嘿嘿嘿”（gemini改英文字、加英文字还是可以的，但是中文字也是效果不太好），模型改的效果不好，这一点期待后续模型继续发展满足我们的需求吧！期待一下！ 105 | 106 | ## 五、使用Deepseek生成提示词 107 | 108 | ### 5.1 视频提示词Tips 109 | 110 | 在视频生成的过程中，提示词最好采用：主体+场景+运动+镜头语言+氛围词+风格化 来写，生成的视频会更符合我们的需要。 111 | 112 | ![image14](images/image14.png) 113 | 参考：[《通义万相AI生视频—使用指南》](https://alidocs.dingtalk.com/i/nodes/jb9Y4gmKWrx9eo4dCql9LlbYJGXn6lpz) 114 | 115 | ### 5.2 第一幕：废墟中的觉醒 116 | 117 | 提示词： 118 | 119 | > 第一幕的四个分镜（SC01-01，SC01-02，SC01-03，SC01-04）分别给我写4个提示词，我之后会用其他AIGC工具去做相应的视频，要求按照“主体+场景+运动+镜头语言+氛围词+风格化”来写提示词，这样会完整一点 120 | 121 | ![image15](images/image15.png) 122 | 123 | ### 5.3 第二幕：数据洪流之战 124 | 125 | 提示词： 126 | 127 | > 第二幕的四个分镜（SC02-01，SC02-02，SC02-03，SC02-04）分别给我写4个提示词，我之后会用其他AIGC工具去做相应的视频，同样要求按照“主体+场景+运动+镜头语言+氛围词+风格化”来写提示词 128 | 129 | ![image16](images/image16.png) 130 | 131 | ### 5.4 第三幕：终局·人性的胜利 132 | 133 | 提示词： 134 | 135 | > 第三幕的四个分镜（SC03-01，SC03-02，SC03-03，SC03-04）分别给我写4个提示词，我之后会用其他AIGC工具去做相应的视频，同样要求按照“主体+场景+运动+镜头语言+氛围词+风格化”来写提示词 136 | 137 | ![image17](images/image17.png) 138 | 139 | ## 六、视频生成（通义万相/阶跃AI/Runway） 140 | 141 | 把刚刚Deepseek生成的提示词，可直接放到AIGC工具中进行文生视频； 142 | 也可以把豆包生成的参考图+Deepseek生成的提示词组合传入，放到AIGC工具中进行图生视频。 143 | 144 | ### 6.1 结合“通义万相”使用 145 | 146 | 通义万相生成的视频能力很不错，本片几乎都用它来生成，有音效、有运镜，整体来说很好，所以优先考虑此工具生成视频。 147 | 148 | 链接：https://tongyi.aliyun.com/wanxiang/ 149 | 150 | ![image18](images/image18.png) 151 | ![image19](images/image19.png) 152 | ![image20](images/image20.png) 153 | 154 | ### 6.2 结合“阶跃AI”使用 155 | 156 | 阶跃AI视频也不错，效果也是很好的，不过没有音效，可作为补充，两者结合起来用。 157 | 158 | 链接：https://yuewen.cn/videos?utm_source=yuewen_nav&utm_medium=nav_link 159 | 160 | ![image21](images/image21.png) 161 | 162 | 163 | ### 6.3 结合“Runway”制作首尾帧视频（通义万相 也有首尾帧功能） 164 | 165 | Runway平台做视频，以及首尾帧功能很不错：https://app.runwayml.com/video-tools/ 166 | 167 | 如果想要几张图片丝滑过渡，中间填充内容，那么这个就是“首尾帧”视频。比如短视频中经常刷到“一不小心就长大”或者“这不是黑历史，这是我的来时路”等等这些视频，本质上都是利用首尾帧功能去生成。 168 | 169 | ![image22](images/image22.png) 170 | 171 | 我们尝试一下Runway平台（最好使用英文来写提示词）的首尾帧功能，让Deepseek帮写过渡的提示词：每一帧如何运动？帧和帧（图片和图片）之间怎么过渡？ 172 | 173 | 让Deepseek帮我写提示词： 174 | 175 | > 我现在想用Runway平台的首尾帧功能生成连贯的视频，大概剧情是：混天绫化作红色数据锁链（由0/1数字组成）缠绕哪吒，将其拉向虚空中的巨型齿轮，镜头固定在中景位置，锁链末端连接背景的齿轮结构，画面充满压迫感。现在我有两张图（关键图片，img1，img2），请你根据这两张图片合适的过渡效果写Runway平台首尾帧的提示词（英文）。（要求巨型齿轮转动，锁链不断紧缩，画面衔接过渡自然） 176 | 177 | Runway生成首尾帧提示词（精简版）： 178 | ![image23](images/image23.png) 179 | 180 | 打开Runway平台去生成想要的视频： 181 | ![image24](images/image24.png) 182 | 183 | ### 6.4 结合“豆包3.0”使用 184 | 185 | 豆包更新的视频生成功能效果也不错，速度也很快！ 186 | 187 | 链接：https://www.doubao.com 188 | 189 | ![image24.5](images/image24.5.png) 190 | 191 | 这时候视频素材已经都生成好了，太棒了！接着就是拿视频素材去拼接吧！🌈 192 | 193 | ## 七、音色克隆（即梦AI） 194 | 195 | 我想要克隆哪吒/太乙音色（使用“即梦AI”） 196 | ![image25](images/image25.png) 197 | 198 | ## 八、台词生成（Deepseek） 199 | ![image26](images/image26.png) 200 | 201 | ## 九、视频剪辑（剪映） 202 | 203 | 直接把视频拼接好配字幕就OK啦！ 204 | ![image27](images/image27.png) 205 | 206 | 这边也总结几个剪视频的小Tips： 207 | 1. 画面和画面之间选取合适的过渡效果； 208 | 2. 采用音效辅助画面过渡（环境音）； 209 | 3. 画面未出现时，声音可先出现，过渡会更自然； 210 | 4. 采用自己喜欢的特效（比如故障、胶片等特效） 211 | 212 | 最后，成品就出来了🎇！！！（成品视频在最前方） 213 | ![image28](images/image28.png) 214 | 215 | 未来人人皆导演！只要我们有想法和创意，就能借助AI工具帮我们实现！我们也可以实现自己的小动画片（申公豹、熊出没等等），或者番外剧，甚至过年过节，使用AI工具生成相应的祝福视频，觉得都是蛮有意义的！AI赋能本身就是为了提高我们工作、生活的效率，顺便还能带来一部分惊喜！🌈 216 | 217 | 快来一起试试吧！🤗 -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image0.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image1.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image10.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image11.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image12.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image13.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image14.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image15.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image16.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image17.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image18.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image19.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image2.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image20.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image21.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image22.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image23.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image24.5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image24.5.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image24.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image25.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image26.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image27.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image28.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image3.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image4.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image5.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image6.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image7.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image8.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datawhalechina/design-with-ai/ddcd3ba289ef874967dfebf9aac1523711109ed5/docs/casebook/Video_Production/CyberNezha_video_0501_wenxin/images/image9.png -------------------------------------------------------------------------------- /docs/casebook/Video_Production/README.md: -------------------------------------------------------------------------------- 1 | # Video Production（视频创作与生成） 2 | 3 | 本文件夹收录与视频创作和生成相关的教程、短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Script_Generation（剧本生成） 8 | - Storyboard_Generation（分镜生成） 9 | - Video_Synthesis（视频合成） 10 | - Text_to_Video（文生视频） 11 | - Image_to_Video（图生视频） 12 | - Video_Editing_Automation（剪辑自动化） 13 | - Color_Style_Transfer（风格调色） 14 | - Soundtrack_Generation（配乐生成） 15 | - Voiceover_Generation（配音生成） 16 | - Motion_Graphics_Generation（动态图形生成） 17 | - Visual_Effects_Generation（特效生成） 18 | - Animation_Generation（动画生成） 19 | - Generative_Video_Art（生成式视频艺术） 20 | - Social_Media_Content_Generation（社交媒体内容生成） -------------------------------------------------------------------------------- /docs/casebook/Web_Design/README.md: -------------------------------------------------------------------------------- 1 | # Web Design（网页设计） 2 | 3 | 本文件夹收录与网页设计相关的短文与案例。 4 | 5 | ## 涉及内容范围（Topics Covered） 6 | 7 | - Responsive_Design（响应式设计） 8 | - Landing_Pages（落地页设计） 9 | - E-commerce（电商网页） 10 | - Portfolio_Sites（作品集网站） 11 | - Blog_Design（博客设计） 12 | - Web_Animation（网页动画） 13 | - UI_Components（界面组件） 14 | - Accessibility（无障碍网页） 15 | - SEO_Basics（SEO基础） --------------------------------------------------------------------------------