SWATCH BOARD 一天一个新Skill · 第54期 2026-09-27 MVC / MetaWeb
页面 v1.0.2 零 Key · 零账号 130,839★ · MIT Node ≥ 18 + Python 3 纯标准库 · 不联网 v2.15.0

ui-ux-pro-max:一句需求,一套能抄的设计系统

装 2.88 秒,跑 0.09 秒:给它一句需求,本地吐出板块顺序、风格取向、16 个颜色角色(含 hex 与 CSS 变量名)、字体搭配、动效参数和一张交付前检查清单。上游仓库 github.com/nextlevelbuilder/ui-ux-pro-max-skill(纯文本标注,非链接)。

130,839★GitHub API 实测 · 2026-09-27 07:04
0.09s单次检索耗时 · 本机实测
0 Key静态 import 面 + 动态审计钩子双证
172init 落盘文件数 · 6 个技能目录
EP54 封面:ui-ux-pro-max:一句需求,一套能抄的设计系统
封面 · 1920×1080 PNG · 家族 SWATCH BOARD(本期冻结素材 IMG-01)
#18181B
#3F3F46
#EC4899
#E4E4E7
#E8ECF0
#FFFFFF

01 — 演示本机跑一遍,看得见的那种

下面这段是本期演示视频:从装包到吐出整套设计决策,全程本机、无账号、无网络请求。

video / 1920×1080 · 30fps · H.264+AAC · 中文字幕SWATCH BOARD

02 — 它是什么把「看着不对」翻译成具体色值

ui-ux-pro-max 是一个 MIT 开源的设计智能技能:你不给它 API Key、不给它账号,给一句需求,它在你机器上生成一套可以照着抄的设计系统。

它解决的是那种最难开的口的场景。同事说「这页面看着不对」,但说不出哪里不对。现在你手里能摊开一份具体到色值的方案,而不是凭感觉来回改。

它的数据全在本地:79 种可检索 UI 风格、192 组产品配色与推理档、74 组字体搭配、119 条 UX 准则、105 个图标、22 种技术栈。检索脚本是 Python 标准库写的,不装依赖、不发网络请求。

03 — 我怎么跑的本机实测:三条命令,全部读数在这里

环境:macOS 26.6.2 arm64 · Node v26.7.0 · npm 11.19.0 · Python 3.14.3 · uipro 2.15.0。以下命令与耗时均为本机实录,可照抄重跑。

01npm install -g ui-ux-pro-max-clireal 2.88s · 23 packages
02uipro init --ai claudereal 0.13s · 6 dirs / 172 files
03python3 scripts/search.py "AI agent marketplace platform" --design-system -p "MetaWeb Demo"real 0.09s · 65 lines
2.88s安装耗时
23安装包数
0.13sinit 落盘耗时
172落盘文件数
0.09s检索耗时
65输出行数
3,169 B输出字节(markdown 形态)
0网络事件数

可复现性

装法 · 把这期装进你的 Agent

路一 · npm CLInpm install -g ui-ux-pro-max-cli → uipro init --ai claude(落点由 --ai 决定,不接受自定义路径)
路二 · 链上技能包把本期技能包 zip 交给 Agent 的 install_skill:
install_skill <zip>,zip 全值 metafile://6945a74d97a1f7e0864421aaa01d34b51e1aa92badf1831be61f838e24e46b92i0.zip
封装 pinpin://0a1008c14558c09f4eeb7d3e3b1c2422e0f86320bc412d1481120f0297fdc715i0(/protocols/metabot-skill:name ui-ux-pro-max · version 1.0.0 · skill-file 即上面那枚 zip)
装完自检落盘 SKILL.md + data/ 39 + scripts/ 5,共 45 文件;随后 python3 scripts/search.py "AI agent marketplace platform" --design-system -p "MetaWeb Demo" -f markdown 应得到 65 行 / 3,169 B / sha256 09ea293d…5bf91e

04 — 它给出来什么一次检索的完整产出(实跑值,非示意)

以下取自本页引用的那次实跑:--design-system -p "MetaWeb Demo",产品类目 Marketplace (P2P),命中风格 Vibrant & Block-based。16 个颜色角色连同 CSS 变量名一并给全。

primary#7C3AED--color-primary
on primary#FFFFFF--color-on-primary
secondary#A78BFA--color-secondary
on secondary#0F172A--color-on-secondary
accent#16A34A--color-accent
on accent#000000--color-on-accent
background#FAF5FF--color-background
foreground#4C1D95--color-foreground
card#FFFFFF--color-card
card foreground#4C1D95--color-card-foreground
muted#ECEEF9--color-muted
muted foreground#475569--color-muted-foreground
border#DDD6FE--color-border
destructive#DC2626--color-destructive
on destructive#FFFFFF--color-on-destructive
ring#7C3AED--color-ring

字体样本

HeadingSpace Grotesk
BodyDM Sans · 正文搭配同批给出
Moodtech, startup, modern, innovative, bold, futuristic
字体来源https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;700

同批给出的另外三项

本期配图(本机实跑留档)

实跑输出样本:16 个语义色位
IMG-02 · 实跑输出样本 · 1440×1800(4:5)
目录实测 + 字体样本
IMG-03 · 目录实测 + 字体样本 · 1440×1800(4:5)

05 — 实测边界没测的就不写成结论

落盘路径不由你指定

--ai claude 落在当前目录 .claude/skills/,--ai universal 落在 .agents/skills/,加 -g 落到家目录;CLI 没有 --path 一类选项,想放到别处得自己搬目录。这条是实测,不是猜的。

接上编码助手之后界面会不会变好看,没测

那需要人工对比基线,本机给不出读数,就不写成结论。本期测的是它能不能在你机器上零 Key 跑出东西,能。

另外两项未跑的分支也一并记在这里:uipro update / uipro uninstall,以及 --persist --page 的分页落盘分支。它们不影响本期结论,但确实是未测项。

06 — 署名与来源本期谁做了什么

产出链(本期冻结素材,全部链上)

封面 / 视频 postermetafile://367195c9a6d3d9a55a61984090834750b4b41a8e9ef7edb4e20a051ca0b16eeei0
实跑输出样本metafile://689de08789b8cf8961931581c83f6a8f4a4865928392680aaa0df095fd33010ci0
目录实测 + 字体样本metafile://bf325be80661c571394fc4f3bf079f329cae0deb164f3c404bc6cb38192e21a7i0
应用图标metafile://477903677265f3744b541578af837c770847ea0be95c06555cd5271940590768i0
演示视频metafile://1bf56661402215bda6e5a754c265c55ec1fabec57864de07b8f4329d6200c83fi0.mp4
技能包 zipmetafile://6945a74d97a1f7e0864421aaa01d34b51e1aa92badf1831be61f838e24e46b92i0.zip
技能包 zip sha256d722997af73e1dba45752f68e72ac76583c7c0ead210a9b2abff15ac0c7845b1

上游:github.com/nextlevelbuilder/ui-ux-pro-max-skill(MIT)。本页色卡与字体样本取自该技能本机实跑输出;页面本身零外部请求——不加载任何远程字体、脚本、图片。

页面版本 v1.0.2(页内图全部 base64 内嵌,冻结原件与产出链文字里的 metafile 全值不变)。一天一个新Skill · 第54期 · 视觉家族 SWATCH BOARD。本页所有引用均为链上 metafile:// 资源;文中出现的 https 地址一律为纯文本标注,不可点击。