Agent skill · design visual · affaan-m
design-system
使用此技能生成或审计设计系统,检查视觉一致性,并审查涉及样式的PR。
Why this skill is useful
Adds executable scripts for generating design systems and auditing visual consistency that are not commonly found in public documentation.
What it needs
Requires node installed locally. About 1k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
设计系统 — 生成与审查视觉系统 使用场景 启动需要设计系统的新项目 审查现有代码库的视觉一致性 在重新设计前——了解现有状况 当界面看起来"不对劲"但无法定位原因时 审查涉及样式修改的PR 工作原理 模式1:生成设计系统 分析代码库并生成统一的设计系统: 输出:DESIGN.md + design-tokens.json + design-preview.html 模式2:视觉审查 从10个维度对界面进行评分(每项0-10分): 每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。 模式3:AI生成内容检测 识别通用的AI生成设计模式: 示例 为SaaS应用生成设计系统: 审查现有界面: 检测AI生成内容:
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/design-system--ea5b03