#Design System (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万

设计与前端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万

设计与前端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万

Nutlope/hallmarkMIT

Hallmark：让编码 Agent 按设计约束建页面

Hallmark 把素材核验、设计流程、浏览器门禁与改版接线检查装进编码 Agent，降低页面模板化与事实幻觉。

Design SystemAI Coding

CSS35k1.8k70

GLips/Figma-Context-MCPMIT

Framelink MCP for Figma:把设计稿压成模型能吃的上下文,而不是一张截图

即 Figma-Context-MCP,npm 包名 figma-developer-mcp,TypeScript,MIT,第三方实现(不是 Figma 官方的 Dev Mode MCP)。对外只有两个工具:get_figma_data(只读)与 download_figma_images(可用 –skip-image-downloads 整个关掉,且只在 –image-dir 之内写文件)。工具面窄是刻意的,工程量全在背后那条 fetch → simplify → serialize 管线:simplify 用可组合抽取器(layout / text / visuals / component,另有 allExtractors、layoutAndText、contentOnly、visualsOnly、layoutOnly 五档组合)在单次树遍历里把 Figma 原始响应压成语义化的布局与样式,支持 maxDepth 与 nodeFilter,输出 tree(默认,最省 token)/ yaml / json 三档。最值得同行学的是它把「压缩有没有效果」做成每次调用都算出来的指标:rawSizeKb 对 simplifiedSizeKb、rawNodeCount 对 simplifiedNodeCount、组件与实例与文本与图片节点数、namedStyleCount(源码注释直说数值高是设计系统成熟度信号)、hasVariables(有没有用上 Figma Variables)、以及 fetch/simplify/serialize 三段分开的耗时;同一批钩子还驱动 MCP progress 通知与心跳,大文件拉几十秒时客户端不会看起来像卡死。细节里全是判断:node ID 支持普通与深层嵌套实例两种形状、depth 的工具描述写着「除非用户明确要求不要用」、代理默认值刻意不在无代理变量时装 EnvHttpProxyAgent 以免陈旧变量把流量导到会返 403 的中间人、stdio 模式没设 image-dir 会在启动时警告。凭据支持 FIGMA_API_KEY 或 FIGMA_OAUTH_TOKEN,遥测可用 –no-telemetry / DO_NOT_TRACK=1 关且上报会脱敏。15.9k★。它不生成任何前端代码——产物是设计事实,翻译成 React/Vue/SwiftUI 的是你的 coding agent。未用自己的 Figma 文件跑过,也未做「截图 vs 结构化数据」的准确率对照,记为待复现。

MCPFigma

TypeScript16k1.3k65

AI 编程设计与前端C

Figma Make:以设计系统为上下文入口的 prompt-to-app,回路终点是托管 URL 而非你的仓库

Figma Make 是 prompt-to-app 这条赛道里唯一以「你已在维护的设计文件」为第一上下文的:挂载 team libraries、组件、variables 与 styles,打包成 Make kit 供团队复用;编辑用 edit tool 点选元素、draw tool 圈画区域、annotations 逐元素下指令,把「我说的是哪个按钮」从文字描述变成视觉指点。但回路终点是 Figma 托管的 URL(AWS + Cloudflare),不是你的 GitHub 仓库——有 code editor、能导出代码,却没有 PR→CI 这条路。成本按 credits 计:Professional Full seat 3,000/月、中等 app 约 75+/次、plan mode 另计一次,额度是「几次对话」而非「几个 app」。发布即公开且无法限制访问,预览内拿不到摄像头/麦克风,第三方素材权利归你。

设计系统 + Make kit上下文入口厂商宣称 · 2026-09

产品Figma官网

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