跳到正文
Skill 技能库搜索

给 AI 编码助手装设计能力的高分 GitHub 仓库：中文名、一句话简介、分类与星数都标在卡上，点仓库名直接跳 GitHub。star 为 设计前沿 当日重验值（逐条打开确认存活）。222 个仓库按设计 / 出图 / 视频 / 写作 / 办公 / 工程 / 空间分了类，点上方标签只看一类；其中 222 个精选条目有中文名与中文简介，其余为情报池收录（简介取自仓库 README 原句）。最前面另有「采集池·新收录」43 个，是采集侧过完设计落点闸门的工具快照（不按星数筛、不进新闻时间线）。

数据核对 2026-09-30 · 用法：`npx skills add 仓库名` 或按 README 安装

采集池·新收录 · 6 个

采集侧 GitHub 源里**过了「设计落点」闸门**的仓库：能映射到 8 大类之一、且没命中安全类黑名单。 与上面两区的区别是**不按 1000 星筛** —— 这一页是工具清单，星数门槛在这里不适用。

快照 2026-10-04 · 只读展示，不进新闻时间线

设计·界面 · 6

  1. 01
  2. 02
  3. 03
    设计·界面Agent 技能包★1,709

    可像 PPT 一样直接拖拽的设计编辑器

    salgum1114/react-design-editor · GitHub ↗

    像做 PPT 一样直接拖拽操作的设计稿编辑器（React + Ant Design + Fabric.js）。

  4. 04
  5. 05
  6. 06

设计·界面 · 24

  1. 01
    设计·界面Agent 技能包★131,641

    UI-UX 极客设计技能

    ui-ux-pro-max-skill · GitHub ↗

    给 AI 助手装上跨平台 UI/UX 设计规范，一句话出接近专业水准的界面初稿。

    拿来干什么：门店小程序、获客落地页没有设计师时，AI 直接出接近专业水准的界面初稿。

    README 摘句

    跨平台 UI/UX 设计智能技能，README："An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks"，`ui-design` 话题榜首。作者 nextlevelbuilder（另有付费 Premium 版）。MIT，268 commits。

  2. 02
    设计·界面Agent 技能包★42,012

    Emil 界面技能集（含 apple-design）

    emilkowalski/skills · GitHub ↗

    把 Apple WWDC 讲座的弹簧动效、毛玻璃与 reduced-motion 打包，让页面长出苹果感。

    拿来干什么：自己的官网、案例页想做出"苹果感"的弹簧动效与克制视觉语言——本站 09-30 苹果化改版用的就是它。替掉"凭感觉调参数"的动效试错，规范由 WWDC 讲座内容背书。

    README 摘句

    Motion 动画库作者 Emil Kowalski（曾任职 Vercel、Linear，Sonner 作者）的技能集，README 自述 "For designers and engineers to help them build better user interfaces"。含 apple-design（Apple WWDC 设计讲座的 Web 实现：弹簧参数、毛玻璃配方、reduced-motion）、动画词汇、动效审查等十余个技能。MIT，54 commits。

  3. 03
    设计·界面Agent 技能包★12,689

    Garden 生产级技能集

    garden-skills · GitHub ↗

    ConardLi 维护的中文生产级 Agent 技能合集，主打一页式介绍页与讲义网页。

    拿来干什么：中文场景的一页式介绍页、讲义网页——国产生态里成体系的中文设计技能少见。

    README 摘句

    ConardLi（"code秘密花园"博主）维护的生产级 Agent Skills 合集，README："A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents"。MIT，142 commits。

  4. 04
    设计·界面Agent 技能包★577

    重构 UI 技能

    refactoring-ui-skill · GitHub ↗

    把《Refactoring UI》每页规则逐条查过，变成 AI 能直接套用的间距层级配色决策。

    拿来干什么：没设计背景的页面"一眼土"——按经典规则调间距层级配色。

    README 摘句

    《Refactoring UI》规则逐页核对封装的 Claude Code 技能，README："Every rule and CSS value in this skill was cross-checked page-by-page against the book. It's not a summary — it's the book's decisions, made once, ready to apply."。MIT（仅限仓库内容），2 commits。

  5. 05
    设计·界面Agent 技能包★2,335

    落地页设计技能集

    ai-design-skills · GitHub ↗

    设计师 elaya 的落地页技能集，内置 intake 提问结构与转化文案框架。

    拿来干什么：落地页从"会写代码"到"会转化"——内置 intake 问题与转化文案结构。

    README 摘句

    设计师 elaya 的 AI 设计技能集，README："A growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf"。MIT 无需署名，3 commits。

  6. 06
    设计·界面Agent 技能包

    中文 Figma UI 技能集

    ye-susu/ui-design-skills · GitHub ↗

    设计系统、图标、流程连线、需求四条链路的中文 Figma 技能集，国内中文参考稀少。

    拿来干什么：Figma 工作流的中文技能稀缺——想让自己的 Agent 按 Figma 规范画图的团队，这是少有的中文参考实现。

    README 摘句

    中文 Figma UI 设计技能集，README 自述"一组用于 Figma UI 设计的 Agent Skills"，作者自述"根据个人工作流程整理而来，并非通用方案"。四个子技能：design-system-use、icon-generate、flow-connect、requirement-design（主流程，可调度其余三者）。MIT，3 commits，0★ 观察位。

  7. 07
  8. 08
  9. 09
    设计·界面Agent 技能包★23k

    自然语言描述即出界面

    wandb/openui · GitHub ↗

    自然语言描述 UI，实时渲染并生成代码

  10. 10
  11. 11
    设计·界面Agent 技能包★8.5k

    手绘界面草图转编程提示词

    lnkiai/m3e-canvas · GitHub ↗

    浏览器内手绘 Material 3 界面草图 → vibe-coding 提示词

  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
    设计·界面Agent 技能包★781

    人机实时协作设计画布

    kgoedecke/doop · GitHub ↗

    Paper.design 开源替代：人机实时协作设计画布，内建 MCP

  18. 18
    设计·界面Agent 技能包★205

    可自托管的 AI 平面设计软件

    hyscaler/HyCanvas · GitHub ↗

    免费可自托管的 AI 原生平面设计软件（社媒图）

  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
    设计·界面Agent 技能包★2

    零幻觉的界面代码库

    HoloNova/holo-ui · GitHub ↗

    Agent-First 的 UI 代码库与设计令牌，零幻觉导向

  24. 24
    设计·界面Agent 技能包★2,267

    头部 App 套路对照技能

    Appllama/appllama-skills · GitHub ↗

    把头部 App 的真实界面与流程变成工作方法，小程序照着赢家做设计。

    拿来干什么：门店小程序、客户自助页没有设计师时，有一套可对照的标准，不靠拍脑袋。

    README 摘句

    把头部 App 的真实界面、流程与 UI 套路变成 Agent 的工作方法——照着已经赢的那些应用做设计，做到模拟器可验的完成度。

设计·生成底座 · 2

  1. 01
    设计·生成底座平台底座★98,751

    开源版 Claude Design

    open-design · GitHub ↗

    本地优先的设计生成工作台，能出原型、幻灯片、图片与视频，自带 MCP。

    拿来干什么：不依赖官方额度的设计生成流水线——自选模型跑方案，数据留本地。

    README 摘句

    自称"开源版 Claude Design"（对 Anthropic 2026 年 4 月闭源产品的社区替代），nexu-io 维护，本地优先桌面/网页应用 + MCP 服务器，产原型、幻灯片、图片、视频等真实文件。Apache-2.0，3,707 commits，生态 277 插件/151 设计系统。

  2. 02
    设计·生成底座Agent 技能包★4,224

    宝玉本地 Claude Design

    baoyu-design · GitHub ↗

    把 Claude Design 打包成可移植技能跑在本地 Agent 上，客户文件不出本机。

    拿来干什么：Claude Design 的生成质量留在本地——客户文件保密敏感的团队适用。

    README 摘句

    把 Claude Design 打包成可移植 Agent Skill 的社区项目，README："Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop…"。作者 Jim Liu（宝玉），声明与 Anthropic 无关联。MIT，77 commits。

设计·网页 · 2

  1. 01
    设计·网页Agent 技能包★2,862

    滚动叙事网站技能

    scroll-craft · GitHub ↗

    做高端沉浸式滚动叙事页，从叙事节奏到视觉落地标准一次讲清。

    拿来干什么：品牌故事页、案例长图滚动页——"工厂实力""改造历程"的沉浸式讲述。

    README 摘句

    高端滚动叙事网站技能，README："An agent skill for building premium, immersive, scroll-driven websites, with a real design standard"。作者 nateherkai。MIT，15 commits。

  2. 02
    设计·网页Agent 技能包

    界面质感升级技能

    ui-ux-glowup · GitHub ↗

    把任意网页原地升级到 Linear/Stripe 质感，保留品牌色后截图自查（观察位）。

    拿来干什么：已有获客页"能用但不好看"，推倒重来成本高——原地升级的路线；本站列为观察位。

    README 摘句

    把任意网页界面升级到 Linear/Stripe 质感的 Agent 技能，README："An AI agent skill that upgrades any web interface to the level of the best-designed sites on the web"——保留品牌色，优化结构、排版、间距，再截图自查。作者 tpvn99。MIT，7 commits，含 Node/Playwright 审计脚本。

设计·动效 · 1

  1. 01
    设计·动效素材清单★4,397

    CSS 转场动效库

    transitions.dev · GitHub ↗

    43+ 精制 CSS 转场动效，CSS 库 + CLI + Agent 技能三位一体，改参数即用。

    拿来干什么：方案展示页的转场、效果图切换——成熟参数直接用，页面立刻"贵"起来。

    README 摘句

    43+ 精制 CSS 转场动效合集，CSS 库、npm CLI 与 Agent Skill 三位一体（README："an interactive collection of reusable CSS transitions"）。作者 Jakubantalik，443 commits。

设计·iOS 规范 · 1

  1. 01
    设计·iOS 规范规范库

    Apple HIG 规范库

    apple-design-skill · GitHub ↗

    把 Apple HIG 拆成 principles/materials/layout/accessibility 多文件规范库。

    拿来干什么：做 iOS 质感界面时的"字典"，与本站改版同源

    README 摘句

    把 Apple HIG 拆成 principles/materials/layout/accessibility/components 多文件的可移植规范库，含 Liquid Glass

设计·品牌视觉 · 2

  1. 01
    设计·品牌视觉Agent 技能包★846

    Logo 设计技能

    logo-design-skill · GitHub ↗

    从 brief 到生产级 SVG 与品牌规范的体系化技能，配 1,400+ SVG 参考库。

    拿来干什么：工作室/门店品牌初稿——从 brief 到 SVG 到使用规范由 Agent 完成，终稿人工把关。

    README 摘句

    体系化 Logo 设计技能（README："turns Claude … into a disciplined identity designer, from the first brief to production-ready SVG files and brand guidelines."），含原理/流程/工艺文档、Python 工具链与 1,400+ SVG 参考库（约 1,200 品牌，141 个教学范例）。MIT（skill 部分），21 commits。

  2. 02
    设计·品牌视觉Agent 技能包★5,698

    IP 吉祥物 Logo 技能

    ip-as-logo-skill · GitHub ↗

    一句话生成极简圆润的 IP 吉祥物标志，单文件零依赖，配站 ipaslogo.com。

    拿来干什么：品牌吉祥物、小程序头像、门店 IP 形象的初稿——几分钟拿到可讨论的第一版，再决定是否找设计师深化。

    README 摘句

    生成"极简、圆润、微新拟物"IP 吉祥物标志的 Agent 技能（README："extremely simple, cute, company-ready IP mascots"），单 SKILL.md、零依赖，配套站 ipaslogo.com。MIT，30 commits。

设计·素材 · 1

  1. 01
    设计·素材素材清单★3,080

    CSS 背景图案库

    pattern-craft · GitHub ↗

    100+ 现代 CSS 背景图案与渐变片段，复制到项目即用，无版权负担。

    拿来干什么：物料背景、小程序头图底纹免找素材——几何、噪点、渐变现成参数，无版权负担。

    README 摘句

    100+ 现代 CSS 背景图案与渐变片段库（Next.js 站点），README："Effortlessly enhance your websites and apps with 100+ modern CSS background patterns and gradient snippets."。作者 megh-bari，Vercel 赞助。MIT，182 commits。

设计·组件参考 · 1

  1. 01
    设计·组件参考素材清单★203

    液态玻璃聊天 UI

    liquid-glass-chat-ui · GitHub ↗

    两套液态玻璃风聊天 UI cookbook：动效头像、随键盘浮动输入栏、可逆手势。

    拿来干什么：给自家 AI 客服、导购机器人换一套"苹果液态玻璃"质感的现成参考——动效头像、随键盘浮动的输入栏、可逆手势都有实现可抄。

    README 摘句

    液态玻璃风聊天界面示例库（Expo React Native），README："Explore liquid-glass chat UIs with animated portraits, interactive stories, and floating composers."、"Two chat cookbooks. Glass portraits, reversible gestures, and conversations that move with the keyboard."——Appllama 组织的 UI 研究项目，@jaimintf 创建，声明非 Apple 官方产品。MIT，2 commits，iOS 专用。