前端与 UI

design-skills · Dithered

用点阵明暗和有限配色,做复古高对比的界面。

这是什么

一个抖动界面的规范 Skill,用点阵在有限配色里模拟明暗。正文 Open Sans、标题 Space Grotesk、IBM Plex Mono,蓝紫强调色。

Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
来自上游 SKILL.md

它对设计意味着什么

  • 点阵取代渐变,明暗在刻意收窄的配色里也立得住。
  • 高对比渲染让文字在满是点阵纹理的表面上依旧清晰。
  • 规则禁止装饰性动效,别让复古处理变成视觉噪点。

包含哪些内容

  • Brand
  • Style foundations
  • Rules: don’t
  • Expected behavior
  • Required output structure
  • Quality gates

如何安装

design-skills · Dithered

  1. 克隆这个仓库。

    git clone https://github.com/bergside/awesome-design-skills
  2. 把 Codex 指向这个 Skill 文件。

    skills/dithered/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 先告诉 Codex 配色上限,再让它推导出基于点阵的明暗规则。

  2. 要它做空、加载和错误状态,让点阵表面依旧可读。

  3. 核对点击区和焦点状态,这个 Skill 专门点了名。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。