1. 用 Codex 搭前端时pick-ui-library 要解决的不是“选哪个库”而是“别再手搓一个 Toast”如果你最近在用 Codex 搭前端界面大概率见过这种输出页面结构、状态管理、表单校验都写得挺快但一到 UI 细节就开始“露怯”。比如让它做一个设置页它会给你手搓一个固定定位的 Toast关闭逻辑靠setTimeout让它做弹窗它给你一个绝对定位的div焦点管理和 Esc 关闭全靠缘分让它做入场动画它默认给你ease-in看起来像页面在“卡一下”才出来。单看每一处都不算错但堆在一个页面里界面就是差那么点意思。这也是emilkowalski/skills里pick-ui-library这个 SKILL 的价值所在它不是让 Codex 背一堆库名而是让 Codex 在选型时先问场景、可访问性、动效成本、维护状态和设计系统兼容性再给出候选库和淘汰理由。换句话说它把“审美”和“工程经验”变成了 Codex 能照着执行的规则。本文的目标很具体把pick-ui-library接到 Codex并用 TaoToken 作为模型调用入口。你需要先到 TaoToken 官网拿 Keyhttps://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_start 然后把 Codex 的 Base URL 指向https://taotoken.net/api。之后 Codex 在执行 SKILL、分析 UI 库选型、生成对比方案时消耗的就是 TaoToken 的 Token。下面从配置、安装、选型对照到排障一步步写清楚。2. 先把 TaoToken 接进 Codexconfig.toml 的最小可用闭环Codex 和 Claude Code 的配置方式不一样。Codex 走config.tomlClaude Code 走settings.json和ANTHROPIC_*环境变量两者不能混用。这里先把 Codex 的模型入口接好后面再讲 Claude Code 和 CC Switch 的对应关系。2.1 到 TaoToken 创建 API Key打开 TaoToken 官网进入控制台创建 API Keyhttps://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_key 。创建后你会拿到类似YOUR_API_KEY的字符串。本文所有示例都用YOUR_API_KEY占位复制时替换成你自己的 Key。注意Base URL 是https://taotoken.net/api这个地址在 Codex 配置里不要加 UTM 参数也不要写成/v1/chat/completions。Codex 会根据 provider 配置自己拼接请求路径。2.2 写入 ~/.codex/config.toml在用户目录下创建或编辑~/.codex/config.toml。下面是一份可直接复制的示例model gpt-5-codex model_provider taotoken approval_policy on-request sandbox_mode workspace-write [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat说明几个关键点model_provider taotoken指向下面定义的 provider。base_url https://taotoken.net/api是 TaoToken 的 API 入口不加 UTM。env_key TAOTOKEN_API_KEY表示 Codex 会从环境变量读取 Key不要把 Key 明文写进config.toml。wire_api chat是常见的 OpenAI 兼容聊天补全协议。如果你的 TaoToken 控制台或模型说明里明确要求用 Responses API再把它改成wire_api responses。model里的gpt-5-codex只是示例。实际模型名以 TaoToken 模型对话页或控制台展示为准。你可以先到模型对话页确认可用模型https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_chat 。2.3 设置环境变量并验证macOS、Linux、WSL 下可以这样设置当前会话的 Keyexport TAOTOKEN_API_KEYYOUR_API_KEY codex --version codex --model gpt-5-codex 只回复 pongWindows PowerShell 下用$env:TAOTOKEN_API_KEYYOUR_API_KEY codex --version codex --model gpt-5-codex 只回复 pong如果 Codex 能正常返回说明模型入口已经通了。若报 401 或 403优先检查三件事Key 是否复制完整、环境变量是否在当前终端生效、base_url是否误写成其他地址。不要把ANTHROPIC_*环境变量塞进 CodexCodex 不认这套。3. 安装 pick-ui-library SKILL用户级和项目级两种落法Codex 支持 SKILL 机制后你可以把pick-ui-library放到用户级技能目录也可以放到项目级目录。用户级适合你经常用 Codex 做前端项目项目级适合把选型规则固定在某个仓库里团队其他人拉代码后也能复用。3.1 准备本地仓库先把emilkowalski/skills仓库放到本地一个固定目录例如~/src/emilkowalski-skills。不要从来源不明的压缩包安装也不要随便执行不认识的脚本。本文只演示目录复制方式不依赖额外 CLI。3.2 用户级安装到 ~/.codex/skills# 假设仓库已经放在 ~/src/emilkowalski-skills mkdir -p ~/.codex/skills # 如果仓库根目录直接有 pick-ui-library cp -R ~/src/emilkowalski-skills/pick-ui-library ~/.codex/skills/pick-ui-library # 如果仓库结构是 skills/pick-ui-library则改用这一条 # cp -R ~/src/emilkowalski-skills/skills/pick-ui-library ~/.codex/skills/pick-ui-library ls ~/.codex/skills/pick-ui-library安装完成后确认里面存在SKILL.mdtest -f ~/.codex/skills/pick-ui-library/SKILL.md echo SKILL ok3.3 项目级安装到 .codex/skills如果你希望这个仓库里的 Codex 始终使用pick-ui-library用项目级目录mkdir -p .codex/skills cp -R ~/src/emilkowalski-skills/pick-ui-library .codex/skills/pick-ui-library test -f .codex/skills/pick-ui-library/SKILL.md echo project SKILL ok项目级和用户级同时存在时一般项目级优先。安装后重启 Codex 会话或者在提示词里明确要求使用该 SKILL。3.4 用提示词触发 pick-ui-library装好之后不要只问“帮我选个 Toast 库”。这种问法太泛Codex 很容易直接给一个它训练数据里常见的包。更稳的方式是把场景、约束和输出格式一起给它请使用 pick-ui-library SKILL。 项目React Vite TypeScript 设置页。 需要Toast、Dialog、Drawer、Select、Tooltip。 约束可访问性优先不引入停更包入场动画用 ease-out阴影优先于实线边框。 输出1) 需求拆解 2) 候选库对比 3) 淘汰理由 4) 安装命令 5) 文件结构 6) 代码骨架。这样 Codex 在读取pick-ui-library的规则后会先做需求拆解再给候选库和淘汰理由而不是直接甩一个组件库名字。这个过程中模型推理、SKILL 内容读取、对比输出都会消耗 Token。TaoToken 在这里的角色就是提供稳定的调用入口你可以在同一套 Key 下管理模型对话、Coding Plan 和 API Keys。4. pick-ui-library 的选型逻辑先问“为什么”再给“用哪个”pick-ui-library最值得用的地方不是它列了多少库而是它把选型拆成了几个连续判断。你可以把它理解成一套给 Codex 用的 UI 库决策树。4.1 先判断“该不该手搓”很多界面细节看起来简单实际上门槛很高。Toast 的堆叠、超时、暂停、关闭按钮、屏幕阅读器播报Dialog 的焦点陷阱、Esc 关闭、滚动锁定、aria-labelledbyDrawer 的手势拖拽、触摸惯性、安全区域。这些东西手搓一个能看的版本很快但手搓一个能上线的版本很慢。所以pick-ui-library的第一条规则是如果已有成熟库能覆盖 80% 场景优先用库只有在需求非常特殊、包体积极度敏感、设计系统完全不兼容时才考虑自己实现。4.2 再看可访问性和维护状态一个 UI 库能不能用不只看 GitHub Star 数。Codex 应该检查是否有明确的键盘交互支持是否处理了焦点管理是否支持屏幕阅读器最近是否有发布是否有未关闭的严重 issue是否与项目现有 React/Vue/Svelte 版本兼容是否支持 tree-shaking 或按需引入。pick-ui-library会让 Codex 把这些点作为淘汰理由写出来。这样你看到的不是“推荐 sonner”而是“Toast 场景优先 sonner因为堆叠、关闭、动效和可访问性都覆盖不推荐手搓因为焦点和 aria 容易漏”。4.3 最后看动效和视觉细节原文作者 Emil Kowalski 做过 sonner、vaul 这类前端组件也在注重设计体验的团队里工作过。emil-design-eng等 SKILL 关注的是动画节奏、缓动曲线、阴影层次和交互反馈。pick-ui-library则进一步要求选库时要考虑库自带的动效质量而不是选完再硬补 CSS。例如入场动画应优先用ease-out系列曲线让元素快速进入、缓慢停下阴影用来表达层级比一条实线边框更自然弹窗遮罩用半透明背景加轻微模糊比纯黑遮罩更柔和。这些规则不是玄学而是可以被 Codex 执行的约束。5. UI 库选型对照Codex 执行 pick-ui-library 后应该给出的 8 类结论下面这张表不是让你背库名而是给你一个检查 Codex 输出是否靠谱的参照。实际项目里Codex 应该根据你的技术栈、设计系统和包体积要求调整。| 场景 | 优先候选 | 备选 | 不建议 | 给 Codex 的约束 | | Toast 通知 | sonner | Radix Toast | 手搓setTimeout 固定定位 | 支持堆叠、关闭、暂停、屏幕阅读器播报 | | Dialog/Modal | Radix Dialog | Headless UI Dialog | 无焦点陷阱的div弹层 | 焦点锁定、Esc 关闭、aria-labelledby| | Drawer/Bottom Sheet | vaul | Radix Dialog 自定义手势 | 纯 CSStranslateY无手势 | 拖拽关闭、触摸惯性、安全区域 | | Popover/Dropdown | Radix Popover | Headless UI Popover | 手动监听document.click| 定位、翻转、外部点击、键盘导航 | | Select/Combobox | Radix Select | React Aria Select | 原生select硬套复杂样式 | 键盘选择、搜索、分组、无障碍 | | Tooltip | Radix Tooltip | React Aria Tooltip |title属性冒充 Tooltip | 延迟、定位、触摸设备处理 | | 动画编排 | Motion | CSS transition | 全部用ease-in| 入场ease-out退出更快尊重prefers-reduced-motion| | 基础无样式组件 | Base UI / Headless UI | React Aria | 直接装停更多年的包 | 可访问性、维护状态、与设计系统兼容 |Codex 在pick-ui-library规则下应该先输出“需求拆解”再输出“候选库对比”最后才给安装命令和代码骨架。如果它一上来就pnpm add xxx说明 SKILL 没有被正确读取或者你的提示词太弱。6. 实战让 Codex 改造一个设置页的 UI 选型假设你有一个 React Vite TypeScript 项目设置页需要保存提示、编辑资料弹窗、移动端抽屉和下拉选择。你可以这样给 Codex 下指令请使用 pick-ui-library SKILL改造 src/pages/Settings.tsx。 技术栈React 18 Vite TypeScript Tailwind。 目标 1. 保存成功用 Toast不要手搓。 2. 编辑资料用 Dialog焦点不能跑到背景。 3. 移动端筛选用 Drawer支持拖拽关闭。 4. 语言选择用 Select支持键盘操作。 5. 入场动画用 ease-out阴影层级清晰不要用实线边框硬撑。 输出先给选型对比表再给安装命令再给组件结构和代码。如果配置正确Codex 应该给出类似下面的安装命令pnpm add sonner vaul radix-ui/react-dialog radix-ui/react-select motion然后生成组件骨架。你可以要求它把 Toast、Dialog、Drawer 分成独立组件import { Toaster, toast } from sonner; import * as Dialog from radix-ui/react-dialog; import { Drawer } from vaul; export function SettingsEntry() { return ( Toaster positiontop-right richColors / button onClick{() toast.success(设置已保存)} 保存 /button Dialog.Root Dialog.Trigger asChild button打开对话框/button /Dialog.Trigger Dialog.Portal Dialog.Overlay classNamedialog-overlay / Dialog.Content classNamedialog-content Dialog.Title编辑资料/Dialog.Title Dialog.Description 更新你的显示名称和头像。 /Dialog.Description /Dialog.Content /Dialog.Portal /Dialog.Root Drawer.Root Drawer.Trigger asChild button打开抽屉/button /Drawer.Trigger Drawer.Portal Drawer.Overlay classNamedrawer-overlay / Drawer.Content classNamedrawer-content p移动端设置项/p /Drawer.Content /Drawer.Portal /Drawer.Root / ); }配套的 CSS 不要用实线边框堆层级而是用阴影和半透明遮罩:root { --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); } .dialog-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(6px); animation: overlay-in 180ms var(--ease-out-quart); } .dialog-content { background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 16px; animation: dialog-in 220ms var(--ease-out-quart); } keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }这段代码的重点不是具体数值而是让 Codex 按规则输出Toast 用成熟库Dialog 有焦点管理Drawer 支持手势动画用ease-out层级用阴影表达。执行这些 SKILL 规则时模型会读取你的项目上下文和 SKILL 内容Token 消耗会高于普通问答。如果你的前端项目经常这样跑可以到 Coding Plan 页看更稳定的方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_plan 。7. 排障Codex 不读 SKILL、Base URL 写错、Key 失效怎么查7.1 Codex 不读 pick-ui-library先确认目录和文件名find ~/.codex/skills/pick-ui-library -maxdepth 2 -type f find .codex/skills/pick-ui-library -maxdepth 2 -type f必须能看到SKILL.md。如果文件名是skill.md、README.mdCodex 可能不会按 SKILL 读取。然后重启 Codex 会话并在提示词里明确写“请使用 pick-ui-library SKILL”。7.2 Base URL 报 404 或连接失败检查~/.codex/config.toml中[model_providers.taotoken] base_url https://taotoken.net/api不要写成https://taotoken.net/api/v1也不要带?utm_source...。Base URL 不加 UTM。如果你从某篇旧文章复制了其他中转地址先清掉只保留 TaoToken 的入口。7.3 Key 失效或 401在终端确认环境变量已经生效echo $TAOTOKEN_API_KEY如果输出为空说明当前终端没有读到 Key。重新执行export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell 用$env:TAOTOKEN_API_KEY如果 Key 泄露或误提交去 TaoToken 控制台重新创建https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_keys 。7.4 输出还是很泛不会做选型对比大概率是提示词太短。把场景、技术栈、可访问性要求、动效要求、输出格式都写清楚。例如请使用 pick-ui-library SKILL。 技术栈React TypeScript Tailwind。 场景后台管理系统需要 Toast、Dialog、Drawer、Select。 约束不引入停更包必须支持键盘操作动画入场用 ease-out。 输出选型对比表、淘汰理由、安装命令、组件目录、代码骨架。7.5 不要让 Codex 直接操作生产库UI 选型不需要连接数据库。任何安装命令、构建命令、测试命令都应由你在本地终端执行。Codex 只负责分析和生成配置、代码骨架、对比表。不要让它通过 MCP 或 Agent 直连生产数据库也不要让它执行未经审查的删库、改表操作。8. 如果你同时用 Claude Codesettings.json 和 CC Switch 三件套要单独配本文主体是 Codex但很多人会同时使用 Claude Code。这里特别强调Claude Code 用settings.json和ANTHROPIC_*Codex 用config.toml和TAOTOKEN_API_KEY两者不要混。Claude Code 的~/.claude/settings.json可以这样写{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5 } }再次提醒上面的ANTHROPIC_*只给 Claude Code不要放进 Codex 的config.toml。Codex 不认识ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。如果你用 CC Switch 管理多个供应商三件套要一起改不能只改其中一项API 地址https://taotoken.net/api API KeyYOUR_API_KEY 模型名以 TaoToken 模型对话页展示为准Provider 名称可以写TaoToken但真正影响请求的是 API 地址、Key 和模型名。三件套不一致时最容易出现“能连上但模型不存在”或“返回 404”的情况。Claude Code 的完整接入方式可以看 TaoToken 的 Claude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_claude_code 。9. 从模型对话到 Coding Plan把 Codex pick-ui-library 跑成固定工作流现在回到主线。把pick-ui-library用于 Codex本质上是在做三件事让 Codex 有稳定的模型入口。Base URL 指向https://taotoken.net/apiKey 放在环境变量里。让 Codex 能读到 SKILL。把pick-ui-library放进~/.codex/skills或项目.codex/skills。用清晰的提示词触发选型流程。先需求拆解再候选对比再淘汰理由最后才是安装命令和代码。当你把这套流程固定下来Codex 在前端界面任务里的产出下限会明显提高。它可能仍然不会一次生成完美的设计但至少不会轻易给你手搓 Toast、无焦点 Dialog、ease-in入场动画和实线边框堆层级。pick-ui-library提供的是规则TaoToken 提供的是调用入口真正决定最终效果的是你给 Codex 的场景约束和你自己的设计判断。如果你还没开始建议按下面顺序走一遍先在模型对话页确认可用模型https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_chat如果准备长期跑 Codex 前端工作流看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_plan创建并管理 API Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_keys同时用 Claude Code 的话再读接入文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_claude_code需要回到官网统一管理时从这里进https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex_pick_ui_library_cta装好 SKILL、配好config.toml、把 Base URL 写成https://taotoken.net/api之后你就可以让 Codex 用pick-ui-library去审你的 UI 选型了。它不会替你决定产品审美但能帮你把那些“单看都不算错、堆在一起就是不对”的细节提前拦在代码提交之前。