design-system
使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=affaan-m-ecc-docs-zh-cn-skills-design-system-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name design-system description 使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。 origin ECC 设计系统 — 生成与审查视觉系统 使用场景 启动需要设计系统的新项目 审查现有代码库的视觉一致性 在重新设计前——了解现有状况 当界面看起来"不对劲"但无法定位原因时 审查涉及样式修改的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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
