资源介绍
解锁Storybook设计系统课程：开启高效设计之旅（中文字幕英文视频教程）
“Design Systems with Storybook, v2” 是一门专注于设计系统与 Storybook 结合应用的课程，在当今数字化产品设计领域，对于提升设计效率、保证设计一致性以及增强团队协作有着举足轻重的作用。设计系统是数字产品设计中的关键概念，它整合了一系列相互关联的设计模式和实践，能够确保产品在视觉、交互和功能上保持高度一致，为用户提供统一且流畅的体验。而 Storybook 作为一款强大的工具，为开发和展示组件提供了便捷的平台，极大地简化了设计系统的构建和维护过程。这门课程将二者有机结合，通过一系列循序渐进的教学内容，帮助学习者全面掌握设计系统的创建、管理以及利用 Storybook 进行高效开发的技巧 ，无论是对于新手入门，还是有一定经验的设计师和开发者进阶提升，都具有极高的学习价值。
丰富的课程内容
这门课程内容丰富全面，共包含 28 个视频教程，且每个视频都配备了中文字幕（.srt 文件） ，以帮助学习者更好地理解课程内容，深入掌握设计系统与 Storybook 的应用技巧。具体内容涵盖以下几个主要部分：
（一）基础入门（01_Introduction & 02_Getting Started）
“01_Introduction” 作为开篇，为学习者搭建起对课程整体框架和核心内容的初步认知，如同地图一般，引导学习者明晰后续学习路径，激发探索兴趣。而 “02_Getting Started” 则是正式开启学习大门的关键章节。在这部分，学习者将深入学习 Storybook 的搭建过程，这是后续开发工作的重要基石，每一个步骤的熟悉掌握都为顺畅的开发流程奠定基础。通过 “02 Storybook Setup Tour”，学习者能够直观了解 Storybook 的基本功能和操作界面，迅速上手这款强大的工具。紧接着，“03 Creating Your First Stories” 带领学习者迈出实践的第一步，创建自己的第一个故事，在实际操作中加深对 Storybook 工作方式的理解。“04 Example Design Systems” 展示丰富多样的设计系统示例，让学习者领略不同风格和类型的设计系统，拓宽视野，汲取灵感，为自身设计工作提供参考。随后，课程深入讲解如何为组件添加变体，如在 “05 Adding Variants” 中，学习者将学会通过添加变体丰富组件的展示形式和功能应用，满足不同场景下的使用需求。“06 Using clsx to Compose Class Names” 则聚焦于类名组合的实用技巧，通过学习 clsx 的使用，学习者能够更高效地管理和组织 CSS 类名，优化代码结构，提升开发效率。在 “07 Adding Controls” 中，学习者将掌握为组件添加控制功能的方法，实现对组件属性的动态调整和实时预览，增强组件的交互性和灵活性。最后的 “08 Add Button Sizes Exercise” 是对前面所学知识的综合实践，通过添加按钮尺寸的练习，学习者能够巩固所学，将理论知识转化为实际操作能力，为后续更复杂的学习内容做好充分准备。
（二）深入 Styling（03_Styling）
“03_Styling” 章节在整个课程中占据着承上启下的关键位置，是从基础入门迈向深入应用的重要过渡。在这一章节，学习者将深入探索设计系统中的样式相关知识，为打造精美、一致的用户界面奠定坚实基础。“09 Adding Tailwind” 详细介绍了如何将 Tailwind CSS 引入项目。Tailwind CSS 作为一款功能强大的 CSS 框架，以其独特的原子化设计理念，为开发者提供了丰富的预定义类，极大地简化了样式编写过程。通过学习这部分内容，学习者能够快速利用 Tailwind CSS 的优势，高效地实现各种样式效果，提升开发效率。“10 Adding Dark Mode Theme” 专注于实现黑暗模式主题。在当今数字化产品中，黑暗模式越来越受到用户青睐，它不仅能够在低光环境下提供更好的视觉体验，还能节省电量，符合环保理念。学习者将在这部分课程中掌握黑暗模式的实现原理和具体方法，学会如何通过代码切换不同主题，满足用户多样化的需求。“11 Query Params Overrides” 深入探讨了查询参数覆盖的相关知识。通过这部分内容的学习，学习者能够了解如何利用查询参数动态地修改组件的样式和行为，实现更加灵活和个性化的用户界面展示。这一技术在实际项目中具有广泛的应用场景，例如根据用户的偏好设置动态调整页面布局和样式等。“12 Color Naming Convention” 讲解颜色命名规范。在设计系统中，合理的颜色命名规范对于团队协作和项目维护至关重要。它能够确保不同开发者在使用颜色时保持一致的理解和应用，避免因颜色命名混乱而导致的沟通成本增加和样式错误。学习者将在课程中学习到行业通用的颜色命名方法和原则，为建立规范的设计系统贡献力量。“13 Customizing Tailwind Colors Font” 则进一步深入 Tailwind CSS 的定制领域，学习者将学会如何根据项目需求自定义 Tailwind 的颜色和字体。通过这一过程，学习者能够使设计系统更加贴合项目的品牌形象和用户需求，打造出独一无二的用户界面风格。“14 Real-World Design Systems” 展示真实世界中的设计系统案例，通过对这些实际案例的分析和学习，学习者能够更好地理解设计系统在实际项目中的应用和实践经验，汲取成功案例的精华，避免常见的错误和问题。最后，“15 Class Variance Authority” 介绍了类变体权限的相关知识，帮助学习者更好地管理和控制组件的样式变体，提高代码的可维护性和可扩展性。
（三）组件与文档（04_Components Documentation & Styling）
“04_Components Documentation & Styling” 部分在课程体系中起到了关键的桥梁作用，紧密连接着组件开发与文档编写，为构建完整、规范的设计系统提供了不可或缺的支持。“16 Using MDX with Storybook” 详细阐述了如何将 MDX 与 Storybook 相结合。MDX 作为一种强大的文档编写格式，允许开发者在 Markdown 文件中嵌入 React 组件，实现了文档与代码的无缝融合。通过学习这部分内容，学习者能够利用 MDX 的优势，为组件编写丰富、详细且具有交互性的文档，使文档不仅是静态的说明文字，更是能够实时展示组件功能和效果的有效工具。“17 Organizing and Customizing Blocks” 聚焦于组织和定制组件模块。在实际项目中，随着组件数量的不断增加，合理地组织和定制组件模块对于提高开发效率和代码可维护性至关重要。学习者将在这部分课程中学习到如何对组件进行分类、分组，以及如何根据项目需求对组件模块进行定制化开发，使组件的结构更加清晰、易于管理。“18 Implementing a Callout Component Exercise” 和 “19 Creating the Callout Component Story” 通过具体的实践练习，让学习者将所学知识应用到实际项目中。在 “18 Implementing a Callout Component Exercise” 中，学习者将动手实现一个标注组件，在实践过程中加深对组件开发流程和技术的理解。而 “19 Creating the Callout Component Story” 则要求学习者为这个标注组件创建故事，进一步巩固对 Storybook 的使用技巧，同时也学会如何通过故事来展示组件的不同状态和使用场景，为组件的文档编写提供丰富的素材。
（四）测试与交互（05_Testing and Interactions）
“05_Testing and Interactions” 部分在整个课程中具有举足轻重的地位，它是确保设计系统质量和用户体验的关键环节。在软件开发过程中，测试是保证产品质量、发现潜在问题、提升用户满意度的重要手段。而交互设计则直接影响着用户与产品的互动方式和体验感受。“20 Play Functions” 深入介绍了播放函数，这是一种强大的工具，用于定义组件的交互行为和测试场景。通过播放函数，学习者能够模拟用户的操作流程，如点击按钮、输入文本、切换页面等，从而全面地测试组件在不同交互情况下的表现，确保组件的交互逻辑正确无误。“21 Validating Attributes Styles” 专注于验证组件的属性和样式。在组件开发过程中，确保组件的属性设置正确以及样式呈现符合预期是至关重要的。学习者将在这部分课程中学习到如何使用各种工具和技术来验证组件的属性和样式，及时发现并解决可能出现的问题，保证组件的质量和稳定性。“22 Importing Variants” 讲解了如何导入变体，变体是组件的不同表现形式，通过导入变体，学习者能够在测试过程中覆盖更多的场景，确保组件在各种情况下都能正常工作。这有助于提高测试的全面性和有效性，减少潜在的风险。“23 Storybook Test Runner” 介绍了 Storybook 测试运行器，这是一个集成在 Storybook 中的测试工具，它能够自动运行所有的测试用例，并提供详细的测试报告。学习者将学会如何使用这个工具来简化测试流程，提高测试效率，同时也能够更好地管理和维护测试用例。“24 Visual Testing with Chromatic” 探讨了使用 Chromatic 进行视觉测试的方法。视觉测试是确保组件外观一致性和视觉效果的重要手段，Chromatic 作为一款专业的视觉测试工具，能够自动捕捉组件的截图，并与之前的版本进行对比，检测出任何视觉上的差异。通过学习这部分内容，学习者能够利用 Chromatic 实现高效、准确的视觉测试，提升设计系统的视觉质量。“25 Accessibility Testing” 强调了无障碍测试的重要性，并介绍了相关的测试方法和工具。无障碍测试是为了确保产品能够被所有用户，包括残障人士，平等地访问和使用。学习者将在课程中了解到无障碍测试的标准和规范，以及如何使用工具来检测和修复产品中的无障碍问题，使设计系统更加包容和友好。
（五）高级应用（06_APIs, Context, and External Dependencies）