前端与 UI

pick-ui-library

给一个前端任务,只推荐一个精挑细选、态度鲜明的库。

这是什么

一个需要显式调用的查询 Skill,从一张精选清单里为你说明的任务匹配唯一推荐库,覆盖基础组件、动效、图表、虚拟列表、状态和样式。

Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly i
来自上游 SKILL.md

它对设计意味着什么

  • 每个任务只给一个推荐,不用对着一堆选项纠结。
  • 先看 package.json,能复用项目里已有的库就复用。
  • 揪出手搓的下拉和提示条,换成无障碍的基础组件。

包含哪些内容

  • How to use this
  • UI components and primitives
  • Motion and visuals
  • Charts
  • State and styling
  • Common mismatches to catch

如何安装

pick-ui-library

  1. 克隆这个仓库。

    git clone https://github.com/emilkowalski/skills
  2. 把 Codex 指向这个 Skill 文件。

    skills/pick-ui-library/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 得显式调用,它不会自己触发。

  2. 说任务而不是库名,比如「我要做提示条」。

  3. 它点名一个库,讲清用法,再帮你接进去。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。

Open Design 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS、Windows 与 Linux