Agent Skills
返回列表
EDIC 设计系统

EDIC 设计系统

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3697cc42/edic-design-system。

技能介绍

解决什么问题

大模型生成页面时，常把颜色、字号、间距写死，导致浅色与深色输出不一致、组件层级混乱、可访问性缺失。EDIC Design System 把视觉约束前置到生成规则里，要求组件、页面、文档、邮件和报告都遵循同一套设计令牌与组件类，而不是临时拼样式。

技能如何工作

它先按场景选择页面骨架，例如落地页、文档、博客、简历或报告，再规定区块节奏：ds-section 与 ds-section--alt 交替出现，标题不跳级，页面需有 skip link 和语义地标。颜色必须使用 var(--ds-*)，并基于 OKLch 混合；深色背景不用纯黑，而用暖灰。间距、圆角、阴影、字号、动效都走 token。组件采用 ds-btn ds-btn--primary 这类 BEM 命名，图标按钮需 aria-label，装饰 SVG 需 aria-hidden="true"。

适用边界

它适合输出可运行 HTML 片段，尤其是设计系统驱动的页面、文档页、博客、报表和落地页。默认浅色主题，并保证相同标记在 [data-theme="dark"] 下可用；邮件场景只允许 inline sRGB 样式。动态值可写 inline style，但不能替代 token；自定义动画需考虑 prefers-reduced-motion。

使用场景

  • 给大模型添加规则，使其生成博客页时统一使用 `ds-*` 组件、字号令牌和 OKLch 颜色。
  • 让模型输出文档页或落地页时自动遵循 BEM 类名、标题层级和 skip link 结构。
  • 在生成深色主题页面时避免纯黑背景，并保证图标按钮、装饰 SVG 满足无障碍属性。
  • 把邮件输出限制为 inline sRGB 样式，避免使用 `var(--ds-*)` 或 `oklch()` 导致兼容问题。

适合人员

  • 需要把 AI 生成页面纳入固定视觉规范的 Frontend Engineer。
  • 维护设计令牌、组件库和文档站点的 Design Systems Engineer。
  • 给 LLM 输出添加 HTML 样式规则与可访问性检查的 Platform Engineer。
  • 负责把产品页、文档页和落地页风格统一的 Technical Writer。