产品颜色先定语义角色的Skill

帮你建立规范的配色体系和对比度标准。

color-system 是规划产品色阶与语义角色的 Skill。它把品牌色、中性色和成功、警告、错误等状态映射到文字、背景、边框与图标用途。

颜色名字之外,还要知道搭配:同一绿色用于正文、浅底或按钮,需要不同前景与背景组合。错误信息也应有文字或形状,不能只靠红色让人判断。

对比度要按实际元素与状态检查,文字大小、粗细和组件用途会影响要求。原文比例是简化参考,不能把所有控件一律套同一条阈值;深浅模式也要分别验证。适合从零建立产品颜色规则;本文未生成配色或测对比,规范写齐不代表界面已经符合无障碍要求。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 为新产品设计一个色彩系统
  • 检查现有色彩系统是否符合对比度标准

安装 color-system

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/color-system/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 color-system 的用途与原始说明

浏览全部 Skill 指南