Design System

affaan-m/ECC/docs/zh-CN/skills/design-system

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775无许可证275K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库4天前更新

使用此技能生成或审计设计系统,检查视觉一致性,并审查涉及样式的PR。

仅含说明Design & Creative
AI 生成的概览

生成或审计设计系统,评估视觉一致性并审查涉及样式的 PR。

功能
该技能分析代码库中的 CSS、Tailwind 或 styled-components 模式,提取颜色、排版、间距、圆角、阴影和断点。它产出设计令牌(JSON 加 CSS 自定义属性)、说明每项决策理由的 DESIGN.md,以及自包含的交互式 HTML 预览页面。它还会从十个视觉维度对界面评分并给出精确到文件:行号的修复方案,并识别通用的 AI 生成设计模式。
适用场景
适用于启动需要设计系统的新项目、检查现有代码库的视觉一致性,或在重新设计前了解现状。也适合审查涉及样式修改的 PR,以及排查界面看起来不对劲却找不到原因的情况。
运行要求
仅为指令,不附带脚本。需要访问目标代码库;进行竞品研究或基于 URL 的审查时,需要浏览器 MCP 和网络访问。

设计系统 — 生成与审查视觉系统

使用场景

  • 启动需要设计系统的新项目
  • 审查现有代码库的视觉一致性
  • 在重新设计前——了解现有状况
  • 当界面看起来"不对劲"但无法定位原因时
  • 审查涉及样式修改的PR

工作原理

模式1:生成设计系统

分析代码库并生成统一的设计系统:

1. 扫描 CSS/Tailwind/styled-components 以查找现有模式2. 提取:颜色、排版、间距、边框圆角、阴影、断点3. 研究 3 个竞品网站以获取灵感(通过浏览器 MCP)4. 提出一套设计令牌(JSON + CSS 自定义属性)5. 生成 DESIGN.md,说明每个决策的理由6. 创建一个交互式 HTML 预览页面(自包含,无依赖)

输出:DESIGN.md + design-tokens.json + design-preview.html

模式2:视觉审查

从10个维度对界面进行评分(每项0-10分):

1. 色彩一致性 — 你使用的是自己的调色板还是随机的十六进制值?2. 排版层级 — 清晰的 h1 > h2 > h3 > 正文 > 说明文字?3. 间距节奏 — 一致的尺度(4px/8px/16px)还是随意设置?4. 组件一致性 — 相似的元素看起来是否相似?5. 响应式行为 — 在断点处流畅还是混乱?6. 深色模式 — 完整实现还是半途而废?7. 动画 — 有目的性还是多余?8. 无障碍性 — 对比度、焦点状态、触摸目标9. 信息密度 — 杂乱还是整洁?10. 细节打磨 — 悬停状态、过渡效果、加载状态、空状态

每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。

模式3:AI生成内容检测

识别通用的AI生成设计模式:

- 到处滥用渐变效果- 默认采用紫蓝配色- 毫无意义的"玻璃拟态"卡片- 不该圆角的地方强行圆角- 滚动时过度动画效果- 居中文字搭配默认渐变的通用英雄区- 毫无个性的无衬线字体堆叠

示例

为SaaS应用生成设计系统:

/design-system generate --style minimal --palette earth-tones

审查现有界面:

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

检测AI生成内容:

/design-system slop-check

来源与署名

来源:affaan-m/ECC位于docs/zh-CN/skills/design-system提交ef648e0

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架