前言¶

在内容与媒体项目中，设计系统的一致性往往被开发与设计之间的信息差拖慢。团队要为不同平台（网页、文档、邮件）适配同一套视觉规范，同时还要兼顾可访问性、暗色模式与中文排版，手工维护成本很高。EDIC 设计系统提供了一套能自动输出符合规范的 HTML/CSS 的方案，减少对人工样式的依赖。

这是什么¶

EDIC 设计系统是一个社区维护的 Skill，用于生成遵循 EDIC 视觉规范的 UI 组件、完整页面、文档、邮件和资产。它使用 Editorial × Olive Green 的配色方案，基于 OKLch 色彩空间生成 Web/UI 令牌，支持暗色模式，并对中文环境做了优化。输出为基于 token 驱动的、可访问的、与框架无关的 HTML/CSS。

核心功能¶

• 按规范生成 UI 组件与完整页面
• 生成文档与邮件样式
• 输出符合可访问性要求的 HTML/CSS
• 使用 OKLch 色彩令牌，支持暗色模式
• 针对中文环境优化

安装与启用¶

在支持的客户端中，可通过以下方式安装并启用该 Skill：

skillhub install user_3697cc42/edic-design-system

安装后，在对话中直接请求 EDIC 相关的设计或重构任务即可。

典型用法¶

在对话中直接提出与 EDIC 设计系统相关的需求，例如：

• 生成一个遵循 EDIC 视觉规范的导航栏组件
• 为某篇文章生成适配暗色模式的排版
• 输出一封符合 EDIC 邮件规范的模板

适用场景与注意¶

• 适合需要统一视觉规范的内容与媒体项目
• 适合需要快速产出符合设计系统的 HTML/CSS 的场景
• 注意：该 Skill 为社区版本，需自行评估生产环境兼容性

短结尾¶

EDIC 设计系统通过 token 驱动的 HTML/CSS 输出，帮助团队在多个平台保持设计一致性。如需了解详情，可访问官方页面：https://www.skillhub.cn/skills/user_3697cc42/edic-design-system