前端与 UI
UI-UX Pro Max · UI Styling
用 shadcn 组件和 Tailwind 工具类，做出无障碍的界面。
这是什么
把基于 Radix 的 shadcn 组件层、Tailwind 工具类样式层和 canvas 视觉设计层组合在一起，附带主题、无障碍、响应式规则和定制的参考文件。
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing
它对设计意味着什么
- 弹窗和菜单直接继承 Radix 的焦点管理，无障碍不用事后补。
- 主题颜色放在 CSS 变量里，暗色模式始终一致。
- 移动优先的断点让布局从小屏起步，再逐层加宽。
包含哪些内容
- Core stack
- Component library guide
- Theme and customization
- Accessibility patterns
- Responsive design
- Visual design system
如何安装
UI-UX Pro Max · UI Styling
-
克隆这个仓库。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
把 Codex 指向这个 Skill 文件。
cli/assets/skills/ui-styling/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
跑 npx shadcn@latest init 配置好框架和主题。
-
用 npx shadcn@latest add button card dialog form 添加组件。
-
跑 scripts/tailwind_config_gen.py 生成带自定义 token 的配置。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。