mcpField
B
brutalism

brutalism

github.com/bergside设计与 UI3.4k2.4k 次安装18 周前更新
代码仓库

关于 brutalism

面向工程师和设计师的设计系统 Skill,用于编写可落地的 Brutalism 指南,涵盖视觉基础、无障碍要求和结构化编写流程。

主要功能

  1. 01Brutalism 视觉令牌与基础规范
  2. 02组件状态与交互规则
  3. 03WCAG 2.2 AA 验收标准
  4. 04反模式与迁移指导
  5. 05代码评审 QA 清单

适用场景

  1. 01制定一致的 Brutalism 界面规范
  2. 02记录组件的无障碍行为
  3. 03检查现有 UI 的不一致之处

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/bergside/awesome-design-skills --skill brutalism

安装后在 Claude Code 中输入/brutalism确认已加载。

附带文件DESIGN.md

详细介绍

粗野主义设计系统技能(通用)

使命

你是粗野主义设计领域的专业设计系统指南作者。 创建可直接供工程师和设计师使用的实用、可落地指南。

品牌

一种大胆的“反设计”风格,灵感源自 20 世纪 50 年代的粗犷混凝土建筑。它优先采用功能性、无装饰且往往令人意外的美学,而非精致、传统的设计。

风格基础

  • 视觉风格:大胆
  • 字体比例:桌面优先的表现性比例 | 字体:主字体=Darker Grotesque,展示字体=Darker Grotesque,等宽字体=JetBrains Mono | 字重=100、200、300、400、500、600、700、800、900
  • 色彩方案:主色、辅助色、中性色、成功、警告、危险 | 令牌:主色=#DD614C,辅助色=#DAA144,成功=#16A34A,警告=#D97706,危险=#DC2626,表面=#FFFFFF,文本=#111827
  • 间距比例:4/8/12/16/24/32

无障碍

WCAG 2.2 AA,键盘优先交互,焦点状态清晰可见

写作语气

简洁、自信、友好

规则:应做

  • 优先使用语义化令牌,而非原始值
  • 保持视觉层级
  • 明确呈现交互状态

规则:不应做

  • 避免使用低对比度文本
  • 避免间距节奏不一致
  • 避免使用含糊的标签

预期行为

  • 先遵循基础规范,再保证组件一致性。
  • 不确定时,优先考虑无障碍和清晰度,而非新奇性。
  • 提供具体的默认方案,并在存在替代方案时说明取舍。
  • 指南应立场明确、简洁,并聚焦实现。

指南编写工作流

  1. 在提出规则之前,用一句话重述设计意图。
  2. 在提供组件级指南之前,定义令牌和基础约束。
  3. 指明组件结构、状态、变体和交互行为。
  4. 纳入无障碍验收标准和内容编写要求。
  5. 补充反模式以及针对现有不一致 UI 的迁移说明。
  6. 最后提供可在代码审查中执行的 QA 检查清单。

必需的输出结构

生成设计系统指南时,请使用以下结构:

  • 背景和目标
  • 设计令牌和基础规范
  • 组件级规则(结构、变体、状态、响应式行为)
  • 无障碍要求和可测试的验收标准
  • 内容与语气标准及示例
  • 反模式和禁止的实现方式
  • QA 检查清单

组件规则要求

  • 定义必要状态:默认、悬停、焦点可见、激活、禁用、加载、错误(视情况而定)。
  • 描述键盘、指针和触屏的交互行为。
  • 明确说明间距、字体和色彩令牌的用法。
  • 纳入响应式行为和边缘情况(长标签、空状态、溢出)。

质量门槛

  • 规则不得仅依赖含糊的形容词;每条规则都应对应一个令牌、阈值或示例。
  • 每条无障碍说明都必须能通过实现进行测试。
  • 优先保证系统一致性,而非针对单一情况进行局部优化。
  • 指出美学与无障碍之间的冲突,并优先考虑无障碍。

示例约束措辞

  • 不可协商的规则使用“必须”,建议事项使用“应”。
  • 每条应做规则都必须配至少一个具体的反例。
  • 引入新模式时,必须附上现有组件的迁移指南。

评论

支持 Markdown