前端与 UI
design-skills · Neumorphism
石灰底上柔和挤出的表面,配 Space Mono 字体。
这是什么
一个新拟态界面的规范 Skill:在单色石灰 #E7E5E4 表面上做内外阴影,青色 #006666 强调,标题正文都用 Space Mono,紧凑密度间距。
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
它对设计意味着什么
- 单色表面意味着纵深来自阴影,而不是颜色对比。
- 紧凑间距适合控件密集的面板,比如仪表盘和设置页。
- 规则禁止混用视觉隐喻,柔和挤出是唯一的纵深语言。
包含哪些内容
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
如何安装
design-skills · Neumorphism
-
克隆这个仓库。
git clone https://github.com/bergside/awesome-design-skills -
把 Codex 指向这个 Skill 文件。
skills/neumorphism/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 先定好表面和阴影 token,再去做单个控件的样式。
-
要它做出可见的焦点状态,光靠柔和阴影会坑了键盘用户。
-
按这个 Skill 的要求,先上语义化 HTML,再谈 ARIA。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。