design-system-package-dsp 的项目扩展与二次开发

项目的基础介绍

design-system-package-dsp（简称DSP）是一个由AdobeXD团队开发的开源项目，旨在帮助团队在不同的设计工具之间共享设计系统信息。DSP采用了一种新的开放格式文件夹结构，通过JSON文件和子文件夹来组织和存储设计系统的资产和元数据。

项目的核心功能

DSP的核心功能是提供一个标准化的方式来打包和分享设计系统，它包括以下几个部分：

• 包含版本号、状态、语言/平台等信息的包详情。
• 文档页面，如介绍、原则等。
• 通用设计令牌，如颜色、大小、自定义（数字、字符串或布尔值）和别名。
• 字体、组件等集合的令牌。
• 组件文档，包括支持基本HTML的Markdown部分、特定组件的令牌、代码片段和标签。

项目使用了哪些框架或库？

DSP项目主要使用了以下框架和库：

• Style Dictionary：用于生成平台特定的代码。
• JSON：用于存储和传输设计系统的结构化数据。

项目的代码目录及介绍

DSP项目的代码目录结构如下：

• /assets：包含所有静态资产，如SVG或PNG文件。
• /data：包含构成DSP格式的所有数据，如components.json、docs.json、fonts.json和tokens.json。
• /dist：包含由构建系统生成的平台特定代码。
• /ext：可能包含由第三方工具编写的文件，其子文件夹遵循反向域名命名约定。
• dsp.json：DSP的入口点，包含包信息、设置和导入。

对项目进行扩展或者二次开发的方向

1. 扩展DSP格式：可以根据需要添加新的令牌类型或组件类型，以支持更丰富的设计系统信息。
2. 集成新的设计工具：可以通过扩展ext文件夹来集成新的设计工具，使其能够读取和写入DSP格式。
3. 构建自定义构建工具：可以基于现有的构建工具，如Style Dictionary，开发自定义的构建工具，以满足特定需求。
4. 增加新的语言支持：在settings中添加新的语言配置，为不同的开发框架提供代码片段。
5. 优化性能：对现有的代码和数据进行性能优化，确保在大型设计系统中也能高效运行。
6. 开发Web界面：为DSP创建一个Web界面，以便用户可以更直观地浏览和编辑设计系统。