Skip to content
← 标签

#Frontend (6)

设计与前端nextlevelbuilder/ui-ux-pro-max-skill精选

把设计知识变成可检索的本地数据:79 风格 / 192 配色 / 119 UX 准则

编辑判断它最准的一句自我定位是:模型不是不会写 CSS,是没有审美数据库。10 类设计规则按严重度排序,Accessibility 与 Touch & Interaction 排 CRITICAL 第一第二、Charts 排最后,这个排序本身就是立场。Design System Generator 走五路并行检索,且明写「Do not persist unverified output」——生成的设计系统必须验证后才允许落盘。

v2.13.0,MIT,12.9 万 star,官网 uupm.cc。它不给模型讲道理,而是塞进一批结构化目录让 agent 动手前先查:79 种 UI 风格、192 套带推理理由的配色、74 组字体搭配、119 条 UX 准则、105 项图标建议、17 套 GSAP 预设、25 种图表类型、22 个技术栈、34 种落地页 pattern。

Any agent
npx ui-ux-pro-max-cli init --ai claude
Pythonnextlevelbuilder12.9万
把设计知识变成可检索的本地数据:79 风格 / 192 配色 / 119 UX 准则
设计与前端Leonxlnx/taste-skill精选

Taste Skill:一仓 13 个反 slop 前端 skill,把「AI 味」写成可数的硬规则

编辑判断最值得学的是把规则写成可数的机械判据:eyebrow ≤ ceil(段数/3)、bento 格数 = 内容条数、全页 0 个 em-dash、配色族跨项目轮换,每一条都直接打在「模型重复自己」这个点上,而不是停在形容词。边界它自己也说得诚实:v2 自报 experimental 仍在迭代,§13 明确不管 dashboard、数据表、多步表单、代码编辑器与原生移动端,仓里唯一的测试守的是 skill.sh 这个 shell helper 的 source 语义,不是设计规则本身。

一个 MIT 仓库装 13 个 skill:10 个输出代码,3 个只出参考图,一条 npx skills add 就能装进 Claude Code / Codex / Cursor。默认的 design-taste-frontend v2(experimental)是 1228 行 SKILL.md:先要求模型输出一行「设计判读」,再拧 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 三个旋钮,然后按 14 章硬规则实现——企业简报装官方设计系统包、审美借鉴必须在注释里标注、全页 0 个 em-dash、eyebrow 配额按段数算、bento 格数等于内容条数,最后逐格跑 50 多项起飞前检查。仓里还带 research/laziness 文献目录,用对照实验解释「模型为什么会偷懒」。

Claude CodeCodexCursor
npx skills add https://github.com/Leonxlnx/taste-skill
JavaScriptLeonxlnx9.5万
Taste Skill:一仓 13 个反 slop 前端 skill,把「AI 味」写成可数的硬规则
设计与前端wheresryan22/anatomy

anatomy:把技术概念造成一台真机器——零依赖等距工程图 skill,自带 12 项几何审计

编辑判断最值得抄的是它自带证伪工具:kit/audit.mjs 十二项检查(间隙、实体间隙、端子、悬空头、支撑、折弯、自相交、拥挤、替身形状、抖动、落座、深度序)加 scripts/lines.mjs 的「line ends: 0」,把「看着还行」变成可数的失败行,而且明写「用替身形状把审计哄安静本身就是 bug,coverage 这一项专抓它」。审美也被写成数字:倒角 0.4-1.6、螺钉 0.4-0.55 的点、主体占卡片 55-65%、设备像素比上限 1.5、3D 折弯半径 R ≥ 2r/sin²(e−θmax)。CI 把每个示例两个主题都重建一遍并要求 git diff 为空,kit 的兼容性因此是机器保证。边界同样诚实:不是图表库(没有坐标轴与数据系列),只画机器、仪器、工具与家具,3D 自报 beta 且 380 零件约 20 fps,一张图要一整个长会话。

一个标准 Agent Skill:让 Claude Code / OpenCode / Codex 解释技术概念时不画方框箭头,而是发明一台真机器(弹子锁=缓存键、龙门绘图机=一个共享的 GPU context),再用约 16,200 行零依赖 kit 画成四色调等距 SVG,可选 WebGL 着色器与 beta 的 3D 模式。八个示例连构建产物一起提交,CI 在 macOS + Node 22 上逐个重建并要求逐字节相同。

Claude CodeOpenCodeCodex
npx skills add wheresryan22/anatomy -g -a claude-code
JavaScriptwheresryan224665
anatomy:把技术概念造成一台真机器——零依赖等距工程图 skill,自带 12 项几何审计

作为亚马逊联盟会员,我们可能从符合条件的购买中获得佣金。