Skip to content
设计与前端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 味」写成可数的硬规则
设计与前端cathrynlavery/diagram-design精选

Diagram Design:把编辑级图表品味写成 45 种图型与 32 个机器校验器的 Agent Skill

编辑判断最值得抄的是它把「品味」拆成三类可判定的机器契约:颜色是语义角色加对比度契约(verify-contrast.py 对每个角色在它真实所处的背景上算 WCAG,半透明色先合成再量),几何是 4px 网格加每图 ≤9 节点、≤12 箭头、≤2 个 accent 的预算,数字是 HTML 里的 data-value / data-carry / data-status 声明加 32 个 verify-* 校验器重算。我本地实测:把 shipped waterfall 示例的一个 delta 从 −38 改成 −36,verify-waterfall.py 立刻报「'FY26 plan' (bar 6): declares 236 but the walk arrives at 238」;mermaid_extract.py 对 9 节点 fixture 吐出节点/边普查、hub 度数、入口与终点、可折叠组与预算旗标;对抗性 Excalidraw fixture 里的「IGNORE ALL PREVIOUS INSTRUCTIONS」只留下被转义的惰性标签,2 个链接与 1 个 embed 进 discarded 列表。边界它自己说得同样诚实:README 明说输出质量取决于模型、同一 prompt 两次排版可能不同、产物不是可 diff 的源格式,「Git 里每 sprint 都变的文档请用 Mermaid」;PNG 导出要一次性装 Playwright 加 Chromium;9 节点预算意味着复杂系统必须先拆 overview 加 detail;210 个预置示例还是旧皮肤下生成的,重生成是挂着的 v5.1 任务。

Cathryn Lavery 的 diagram-design(MIT,54,318 stars)让 agent 用一句自然语言产出单文件 HTML+SVG 的编辑级图表:45 种图型各有独立 reference,语义模式先于版式;六条连线硬规则、4px 网格与每图 ≤9 节点的复杂度预算把「品味」变成可判定条款;.drawio / Mermaid / Excalidraw 只抽取不渲染,按 format×size×detail×audience 四个旋钮重画并交保真清单;每张图的 HTML 带 data-* 元数据契约,32 个 verify-* 校验器逐条审计数字与几何。

Claude CodeCodexCursor+2
npx skills add cathrynlavery/diagram-design
HTMLcathrynlavery5.4万
Diagram Design:把编辑级图表品味写成 45 种图型与 32 个机器校验器的 Agent Skill

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