0Pricing
Design Systems & Component Libraries icon

Design Systems & Component Libraries

FrontendWebEnterpriseMobileDesktopBusiness

掌握创建健壮设计系统和高效组件库的艺术,加速开发并确保整个产品中用户体验的一致性。

🤖 AI 驱动📚 12 门课程👥 10万+ 学习者⭐ 4.9 分
课程概览

Design Systems: Build Once, Scale Everywhere

Design System 是连接设计与工程的单一真实来源——一种共享的组件、tokens 和文档语言,能够在团队和代码库增长时保持每个产品界面的一致性。本课程轨道涵盖完整的学科:从建立视觉语言和构建可复用 UI 组件,到治理、工具和使系统在规模扩展时保持活力的自动化工作流。

您将学到什么

您将学会使用一致的排版、色彩和间距来定义视觉语言,然后将这些决策编码为驱动自动化工作流的 design tokens。本课程轨道涵盖构建和文档化可复用 UI 组件、将 design system 集成到消费应用程序中、设置支持版本控制和分发的工具和基础设施,以及应用跨团队推动采用的治理策略。高级课程涵盖复杂的组件模式、贡献模型和衡量系统影响。

学习路径

十二门课程从 A1 到 C1 循序渐进。开篇课程阐述什么是 design system 及其存在的原因。A1 和 A2 涵盖基础和组件库基础知识,而 B1 课程建立实际技能:制作视觉语言、开发可复用组件、编写文档和将系统集成到真实项目中。B2 层级深入 Design System Tooling & Infrastructure、Design System Governance & Adoption 和 Design Tokens & Automation Workflows。课程轨道以两门 C1 课程——Advanced Component Development Techniques 和 Scaling & Evolving Your Design System——结尾,这两门课程涉及当系统超越单个团队时出现的难题。

工作原理

每门课程分为简短、专注的课时,包含交互式练习和实时反馈。当您遇到问题时,AI tutor 随时可用,让您能够按自己的节奏推进学习,而不会失去动力。

开始学习 →

你的学习方式

🎯
互动课程
实时反馈的动手编程练习
🤖
AI 导师
遇到困难时立即获得 AI 帮助
💻
内置编辑器
直接在浏览器中编写并运行代码
🏆
证书
完成课程后获得证书
课程

12 门课程

Design Systems & Component Libraries 学习路径中的所有课程。

01

理解设计系统:基础

A14 节课

探索设计系统背后的基本概念及其战略重要性,了解它们如何推动产品开发的一致性和效率。

02

构建模块:组件库基础

A24 节课PRO

开始学习组件库的实践内容,重点掌握基础设计原则和组件创建的初始步骤。

03

打造视觉语言与风格

B14 节课PRO

学习定义并标准化设计系统的视觉元素,从色彩搭配到字体设计,确保统一的品牌形象。

04

开发可复用 UI 组件

B14 节课PRO

深入了解高质量、可复用 UI 组件的开发流程,重点掌握功能性和无障碍性的最佳实践。

05

记录并指导设计系统的使用

B14 节课PRO

学习设计系统文档的重要性,探索创建清晰使用指南并促进采用的工具和策略。

06

集成与使用设计系统

B14 节课PRO

了解将设计系统集成到现有应用程序中的最佳实践,学习处理定制内容并规划无缝迁移。

07

设计系统工具与基础设施

B24 节课PRO

搭建设计系统的技术基础,涵盖版本控制、包管理以及持续集成/持续交付流水线。

08

设计系统治理与推广采用

B24 节课PRO

了解如何有效管理和扩展设计系统,重点关注团队结构、入职培训以及衡量其组织影响。

09

设计令牌与自动化工作流

B24 节课PRO

深入了解设计令牌在管理设计决策方面的作用,并探索如何自动化设计到代码的工作流,以提高效率。

10

衡量成功并培育社区

B24 节课PRO

学习有效衡量设计系统的健康状况和影响,同时围绕它构建活跃社区,确保持续发展并推动推广。

11

高级组件开发技术

C14 节课PRO

通过探索主题化、国际化和性能优化等高级主题,提升组件开发技能。

12

扩展与演进您的设计系统

C14 节课PRO

应对在大型组织和多样化平台中扩展设计系统的挑战,为未来趋势和长期维护做好准备。

常见问题

常见问题解答

Design Systems & Component Libraries 课程免费吗?

免费。你可以免费开始 Design Systems & Component Libraries 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 ALL 需要有先前的经验吗?

不需要。课程从基础开始,逐步进阶到更高难度的主题,所以即使你没有任何 ALL 基础也可以开始。

我在 CoddyKit 上怎样学习 ALL?

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合,24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 Design Systems & Component Libraries 后能获得证书吗?

可以。PRO 学员可以参加考试,获得 Design Systems & Component Libraries 课程的可分享的完成证书,其中包含可验证的代码。

我能在手机上学习 ALL 吗?

可以。CoddyKit 支持网页版和原生 iOS、Android 应用,你可以在任何设备上学习 ALL,进度会自动同步。

立即开始 Design Systems & Component Libraries

加入数千名学习者,通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程