关于 system-deconstruction
system-deconstruction 是一项分层分析设计系统的技能，适合设计师检查令牌、组件、模式和布局。它还关注各层之间的一致性，以及规范与产品实际呈现之间的差距。
主要功能
- 01分别评估令牌、组件、模式和布局
- 02检查层内及层间的一致性
- 03识别间距、字体和颜色质量信号
- 04发现特例组件及行为不一致
适用场景
- 01审查产品是否符合设计系统
- 02查找间距或语义色不一致
- 03检查组件状态与组合方式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/system-deconstruction确认已加载。
详细介绍
系统解构
拆解设计系统，理解每一项决策。
使用方法
/system-deconstruction将系统分析约束应用于此对话。
约束
系统层级
- 必须独立识别并评估每个层级：
- 令牌层：颜色、间距、圆角、阴影、字号比例
- 组件层：按钮、输入框、卡片、模态框、导航
- 模式层：表单、表格、仪表盘、设置、引导流程
- 布局层：网格、断点、密度模式
- 必须检查各层级内部以及层级之间的一致性
质量信号
- 所有组件采用一致的间距尺度
- 字号比例遵循数学比率
- 调色板中的颜色角色清晰且互不重叠
- 组件组合方式可预测
- 系统地覆盖各类状态，而非临时处理
质量警示
- 超过 3 个不符合系统规范的特例组件
- 间距值看似相近，实际却不一致（例如，15px 紧挨着 16px）
- 颜色在不同情境中承担不同的语义角色
- 外观相似但行为不同的组件
反模式
- 根据文档而非实际用法来评估设计系统
- 忽略系统定义与产品实际交付内容之间的差距
- 将系统奉为不可动摇的准则（系统应服务于产品，而非反过来）
评论
支持 Markdown