前端与 UI
Details that make interfaces feel better
十六条具体的界面打磨规则，外加一份评审清单。
这是什么
一组界面打磨的设计工程原则：同心圆角、视觉对齐、分层阴影、错峰入场动画、等宽数字、点击区，以及 transition 精确化。
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
它对设计意味着什么
- 给出确切数值，按下缩放永远是 0.96，不靠拍脑袋。
- 修掉嵌套圆角对不上的问题，多数组件的别扭感就来自这儿。
- 在数字变化引起的布局抖动传到用户前就拦下。
包含哪些内容
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
如何安装
Details that make interfaces feel better
-
克隆这个仓库。
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
把 Codex 指向这个 Skill 文件。
skills/make-interfaces-feel-better/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
把 Codex 指向一个组件，让它套用这些原则。
-
要一次评审，结果以「改前、改后」的表格返回。
-
合并任何前端改动前，先跑那份十四项清单。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。