设计系统
Material 3
在 Compose、Flutter 和 Web 上落地 Google 的 Material Design 3。
这是什么
一份 Material Design 3 指南，覆盖 md.sys token 命名空间、30 多个组件、自适应布局、主题和 M3 Expressive。主攻 Jetpack Compose，Flutter 和 @material/web 为辅。
>
它对设计意味着什么
- 颜色、字体、形状和高度 token，取代写死的色值和圆角。
- 用色调表面而非阴影承载纵深，贴合当前 MD3 规范。
- 一份打分审查评十个维度，按优先级列出待修项。
包含哪些内容
- Design token system
- Component quick reference
- Common patterns
- Anti-patterns
- M3 Expressive
- MD3 compliance audit
如何安装
Material 3
-
克隆这个仓库。
git clone https://github.com/hamen/material-3-skill -
把 Codex 指向这个 Skill 文件。
skills/material-3/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
点明平台，Codex 好在 Compose、Flutter 或 CSS 自定义属性里选。
-
要一个组件，拿到正确的变体和接好的 token。
-
对一个网址或源文件跑审查，出一份合规报告。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。