这是什么
一套触感 Web 界面的表面配方:竖向渐变填充、1px 反光渐变描边、叠加的外阴影和内阴影。浮雕文字、图标和微纹理可选。
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
它对设计意味着什么
- 凸起和按下状态把纵深反转,控件读起来是实体的。
- 纵深保持方向感,光从上打,影落在下。
- 提醒别在一个组件里混用玻璃拟态、新拟态和拟物。
包含哪些内容
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
如何安装
Skeuomorphic UI
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
基础 token 定一次,再按品牌和主题逐一微调。
-
把凸起表面用在卡片、按钮、标签页和控件外壳上。
-
按下变体只留给激活的开关和选中的标签页。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。