Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/aaione/everything-claude-code-zh --skill design-system명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Kubernetes 工作负载模式、资源管理、RBAC、probes、autoscaling、ConfigMap/Secret 处理,以及面向生产级部署的 kubectl 调试。
完成任何非平凡任务后使用。智能体按 5 个维度自评输出——准确性、完整性、清晰度、可执行性、简洁性——每项都给出具体证据。生成结构化 1-5 评分卡和具体改进建议。
在 competitive-platform-analysis 产出分层竞品集合后使用。按九个加权维度(定位、声音、视觉工艺、offer packaging、证据、enterprise-readiness、thought leadership、定价、客户 strategic tension)为每个竞品评分,使用明确 1–5 rubrics 和 tension-plot。位于 competitive-report-structure 之前。
SOC 직업 분류 기준
SKILL.md 표시 중
| name | design-system |
| description | 使用此技能生成或审计设计系统,检查视觉一致性,以及审查涉及样式的 PR。 |
| origin | ECC |
分析你的代码库并生成一个一致的设计系统:
1. 扫描 CSS/Tailwind/styled-components 中的现有模式
2. 提取:颜色、排版、间距、圆角、阴影、断点
3. 研究 3 个竞争对手网站获取灵感(通过浏览器 MCP)
4. 提出设计 token 集(JSON + CSS 自定义属性)
5. 生成 DESIGN.md,包含每个决策的理由
6. 创建交互式 HTML 预览页面(自包含,无依赖)
输出:DESIGN.md + design-tokens.json + design-preview.html
在 10 个维度上为你的 UI 打分(每个 0-10):
1. 颜色一致性 — 你在使用你的调色板还是随机的十六进制值?
2. 排版层次 — 清晰的 h1 > h2 > h3 > body > caption?
3. 间距节奏 — 一致的刻度(4px/8px/16px)还是随意的?
4. 组件一致性 — 相似的元素看起来相似吗?
5. 响应式行为 — 在断点处流畅还是断裂?
6. 深色模式 — 完整还是半成品?
7. 动画 — 有目的还是装饰性的?
8. 无障碍 — 对比度、焦点状态、触摸目标
9. 信息密度 — 拥挤还是整洁?
10. 精细度 — 悬停状态、过渡、加载状态、空状态
每个维度获得一个分数、具体示例和带确切 file:line 的修复建议。
识别通用的 AI 生成设计模式:
- 所有东西上不必要的渐变
- 紫到蓝的默认值
- 没有目的的"毛玻璃"卡片
- 不应该圆角的东西上的圆角
- 滚动时过多的动画
- 带有居中文本叠在库存渐变上的通用主视觉区
- 没有个性的无衬线字体栈
为一个 SaaS 应用生成:
/design-system generate --style minimal --palette earth-tones
审计现有 UI:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
检查 AI 模板痕迹:
/design-system slop-check