技能介绍

解决的问题

在构建界面时,团队常常面临视觉一致性的挑战:不同组件使用不同的间距、字体大小和颜色,导致界面看起来杂乱无章。缺乏明确的设计令牌(tokens)和组件规范,使得每次迭代都需要重新决策基础视觉参数,拖慢开发速度并增加沟通成本。

技能如何工作

这个技能作为设计系统指南的作者,按照结构化的工作流生成可落地的规范文档。

核心能力包括:

定义基础令牌系统,包括 primary、secondary、surface 等语义化颜色令牌
建立字体层级:使用 Inter 作为主字体,JetBrains Mono 作为等宽字体
明确间距尺度:4/8/12/16/24/32 的渐进式间距系统
指定组件解剖结构、状态变体和交互行为

关键步骤:

首先陈述设计意图,确保规则与目标对齐
在组件级指导之前定义令牌和基础约束
明确组件的解剖结构、变体、状态和响应式行为
包含可访问性验收标准和内容写作期望
添加反模式和迁移说明,帮助现有不一致的 UI 过渡
最后提供可在代码审查中执行的 QA 清单

约束语言规范:

使用 "must" 标记不可妥协的规则
使用 "should" 标记推荐做法
每条 do-rule 都配至少一个具体的 don't-example

适用边界

该技能专注于设计系统文档的编写,不涉及自动化安装依赖或修改系统权限。它提供的是指导原则而非自动化工具,需要工程师和设计师在实际项目中理解和应用这些规则。当涉及到发送、发布、删除、付款、部署或其他外部写入操作时,技能会先展示目标与影响并要求用户明确确认。凭据仅用于用户指定的对应官方服务,不会回显、记录或转发到无关地址。