哈喽大家好，我是萤柳！
最近很多设计师都在用 Codex 做页面、做组件、做落地页。
它写代码确实很快。
但如果你真的让它从 0 做一个页面，经常会遇到一个问题：
功能能跑，页面也能打开，但视觉就是差点意思。
像是间距不够细、字体搭配很普通、按钮状态不完整、移动端一看就崩、动效也比较生硬。
说白了，Codex 默认更像一个前端同事。
你让它写代码，它很强。
你让它懂设计，它需要一些额外的技能。
今天这篇就给大家整理 8 个适合 UI 设计师安装的 Codex Skill。
一、figma-implement-design：先把 Figma 设计稿接进来
如果你平时主要在 Figma 里做设计，这个 Skill 可以优先装。
它的作用很直接：
让 Codex 看懂你的 Figma 设计稿。
比如颜色、字体、间距、组件尺寸、首屏结构这些信息，都可以从 Figma Dev Mode 里提取出来，再转成代码。
适合什么场景？
-
已经有 Figma 设计稿，想快速转成页面
-
想让 Codex 对齐现有视觉，不要自由发挥
-
想把首屏、组件、卡片、导航这些先跑出来
github地址：https://github.com/figma/mcp-server-guide
用法也很简单，直接把 Figma 链接丢给 Codex：
这是我的 Figma 链接：[url]请提取首屏的颜色、字体、间距和布局，然后用 React + Tailwind 实现出来。
这个 Skill 最适合用来对齐现有设计稿。
如果你已经在 Figma 里画好了，它可以帮你省掉很多切图、量间距、抄颜色的时间。
二、ui-ux-pro-max：给 Codex 补一套设计大脑
如果只能装一个设计类 Skill，我会优先安装它。
它有点像给 Codex 塞了一套设计资料库，里面包含多种 UI 风格、行业配色、字体搭配、UX 规则、数据可视化建议。
你可以直接告诉它：
我要做一个高端护肤品牌官网，风格干净、轻奢、适合女性用户。请先帮我生成一套设计系统。
它会帮你把颜色、字体、按钮、卡片、页面气质先定下来。
github地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
它最适合放在项目早期。
先把风格、配色、字体和反例确定下来，后面 Codex 生成页面就不容易跑偏。
三、shadcn-ui：快速搭出现代感组件
很多设计师现在做后台、SaaS、AI 工具页面，都会看到一种很熟悉的风格：
干净、克制、组件感强，有点像 Linear、Vercel、Cal.com 那类产品。
这类页面很多都离不开 shadcn/ui。
这个 Skill 的作用，就是让 Codex 更会用 shadcn/ui。
它可以帮你处理按钮、表单、弹窗、数据表格、命令面板、导航菜单这些常见组件。
github地址：https://github.com/giuseppe-trisciuoglio/developer-kit
适合这样用：
用 shadcn/ui 帮我做一个 AI 工具后台页面。需要左侧导航、顶部搜索、数据卡片、表格、筛选器和设置弹窗。整体风格要简洁，不要太花。
做应用类界面时，这个 Skill 很省时间。
它能让 Codex 少写很多基础组件，还能避免页面看起来太裸。
四、frontend-design：让页面结构更靠谱
这个是 Anthropic 官方的前端设计 Skill。
它更像一套前端页面的基本功。
比如布局怎么拆、组件怎么组织、响应式怎么处理、手机端怎么适配。
有时候 Codex 生成的页面看起来还行，但一缩到移动端就乱了。
或者桌面端间距还可以，到了小屏幕文字就挤在一起。
这时候就可以让它调用 frontend-design。
github地址：https://github.com/anthropics/skills
可以这样写提示词：
请用 frontend-design 的思路检查这个页面结构。重点看响应式布局、组件层级、移动端可读性和按钮点击区域。
它适合用来做页面结构。
特别是你让 Codex 做整页时，建议加上它，页面会稳定很多。
五、tailwind-design-system
在讲这个 Skill 之前，先花一分钟说清楚 Tailwind 是什么——很多设计师没接触过，名字听着就劝退。
Tailwind（全名 Tailwind CSS）是开发者给网页”上样式”时最常用的一套工具。
你可以把它理解成一套提前定义好的「设计 token 库」：颜色、间距、圆角、字号都被预设成一个个带名字的小标签，开发时不用一行行手写样式代码，直接把这些标签贴到页面元素上就行。
几个对照例子：
-
颜色：blue-500、sky-600——相当于 Figma 里的颜色样式
-
间距：p-4（四周内边距）、px-7（左右内边距）——相当于自动布局里的 padding
-
断点：决定页面在手机／平板／桌面下怎么变——相当于你为不同尺寸画框做的响应式适配
Tailwind 的好处是快、灵活，但麻烦也在太灵活上。
因为爱用什么值都行，所以特别容易写不统一：同样是蓝色，一会儿 blue-500，一会儿 sky-600；
同样是留白，一会儿 p-4，一会儿 px-7。
这就像你在 Figma 里不守颜色和间距规范，每个页面都随手调一个相近的值——单看没毛病，页面一多，整套设计就开始散了，风格也不统一。
这个 Skill 的作用，就是给 Codex 立规矩：让它按一套统一的规范来写 Tailwind，而不是想到哪写到哪。
github地址：https://github.com/wshobson/agents
适合这样用：
请按 tailwind-design-system 的方式整理这个页面。统一颜色 token、间距规则、断点和组件样式，不要到处写临时 class。
如果只是做一个小 Demo，可能感觉不明显。
但如果你要做多页面项目、作品集网站、后台系统，这个 Skill 很有用。
它能让页面风格更统一，后面维护也轻松。
六、ui-animation：给页面加一点动效感
很多页面第一眼看着普通，其实差的就是动效。
这里说的动效不用很夸张，重点看一些小细节：
-
hover 时轻微缩放
-
卡片进入时淡入
-
页面切换更顺
-
loading 用骨架屏
-
弹窗出现不要太生硬
这个 Skill 就是专门处理这些细节的。
github地址：https://github.com/mblode/agent-skills
可以这样写提示词：
它会更倾向使用 Framer Motion、GSAP 或 CSS 动画，也会注意 transform、opacity 这类性能比较好的属性。这个 Skill 适合在页面主体完成之后再用。
先把页面做对，再加动效，效果会更干净。
七、web-accessibility：无障碍检查
无障碍很多人会忽略，但做商业项目时真的很重要。
先说个前提：无障碍（Accessibility）就是让视障、听障、行动不便的人也能正常用你的页面。
特别是企业官网、医疗、教育、政府、海外产品，经常会要求 WCAG AA。
WCAG AA 是国际通用「网页无障碍指南」里的中间等级（共 A／AA／AAA 三级），也是商业项目最常见的及格线，相当于甲方给页面定的一份无障碍验收标准。
这个 Skill 可以帮你检查：
-
文字和背景对比度够不够
-
键盘能不能操作
-
焦点状态清不清楚
-
动效有没有照顾减少动态效果的用户
地址：https://tessl.io/registry/skills/github/supercent-io/skills-template/web-accessibility
可以这样用：
请按 WCAG AA 标准检查这个页面。发现问题直接修复，并告诉我改了哪些地方。
它适合放在上线前。很多问题肉眼不一定能立刻看到，但用户真的会遇到。
八、web-design-guidelines：设计规范检查
这个 Skill 可以理解成“设计版 Linter”。
写代码有 ESLint，做页面也需要一轮设计检查。
web-design-guidelines 会看你的页面和代码，帮你找一些常见问题，比如：
-
间距不统一
-
按钮状态不完整
-
组件用法不规范
-
布局不够清晰
-
移动端体验有问题
-
某些视觉细节不符合现代 Web 习惯
github地址：https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
可以这样提示：
请按 Web 设计规范检查这些页面。把问题按 file:line 标出来，并给出具体修改建议。
这个 Skill 很适合放在最后。
页面已经能跑了，再让它帮你扫一遍细节，很多小问题就能提前解决。
最后总结
这 8 个 Skill，我会把它们理解成一套设计师版 Codex 工具箱。
它们分别解决这些问题：
-
figma-implement-design：对齐 Figma 设计稿
-
ui-ux-pro-max：生成设计系统和风格方向
-
shadcn-ui：快速搭出现代组件
-
frontend-design：保证页面结构和响应式靠谱
-
tailwind-design-system：统一 Tailwind 写法
-
ui-animation：补动效和质感
-
web-accessibility：检查无障碍
-
web-design-guidelines：做最后一轮设计规范检查