智能体
website ·
设计工程Agent Skills开源，累计安装超16万次
开源分享设计工程师审美经验Skills，包含6个领域skill（UI打磨、字体、色彩、可访问性、布局、文案）和5个流程skill（整体审查、变更评审、组件压测、变体探索、界面逆向），提供具体操作规范和知识，累计安装超16万次。
AI推荐理由 该开源项目将设计经验编码为可复用的Agent技能，能提升AI在设计任务中的表现，对从事前端或设计工具开发的AI从业者有直接参考价值。
80
浏览 24,769
点赞 296
评论 41
转发 65
正文
[开源分享] 设计工程师审美经验 Skills
作者 [@jakubkrehel](https://x.com/jakubkrehel)
地址 [github.com/jakubkrehel/sk…](https://github.com/jakubkrehel/skills)
6 个领域 skill：UI 打磨、字体、色彩、可访问性、布局、文案，提供"用哪个值、归谁管"的知识
5 个流程 skill：整体审查、变更评审、组件压测、变体探索、界面逆向，提供"证据优先、只读、不越权"的操作规范
6 个领域 skill（知识，better-\* 前缀，模型可自动调用）
better-ui：表面、图标、动效等视觉打磨
better-typography：文字渲染、字阶、换行、截断、标点
better-colors：色板结构、token 命名、格式、对比度测量
better-accessibility：语义、键盘、焦点、表单、读屏
better-layout：分组、对齐、间距、响应式、逻辑属性、RTL
better-writing：产品文案、术语、语气
5 个流程 skill
better-interface：编排器：按 accessibility → layout → writing → typography → colors → ui 顺序调用领域 skill，统一严重度、合并、限 15 条、给出 Block/Approve
interface-review：变更评审：解析 diff 范围、扩展"爆炸半径"、读 - 行找回归、把发现分类为 Introduced / Regression / Pre-existing，再交给 better-interface
break：把一个组件在临时页面上渲染出所有极端场景（超长文本、空态、320px 宽等），只观察不评判
variant：为一个 UI 片段构建 3 个在单一轴上刻意不同的变体，挂在真实页面的 ?variant= 切换器后，列出取舍表，不选优
explain-interface：逆向解读别人的网页效果：按绘制顺序找图层栈，每个结论标注 Measured / Derived / Inferred 三级证据
Jakub Krehel@jakubkrehel
令人难以置信的是，我的 skills 已被安装超过 160,000 次。
我最初是为自己构建它们的。我对如何做某些事情有很好的想法，但每当我在项目之间切换时，我都不得不一遍又一遍地解释它们。
Skills 经常受到批评，这可以理解，因为有很多是完全糟糕的。
但也有一些是真正有用的，帮助你把事情做得更好，并让你从中学习。
这就是我努力构建的那种。
[您的浏览器不支持视频标签。](https://video.twimg.com/amplify_video/2095535923853197312/vid/avc1/2424x1604/sKSt1Nn-X3yJbRO6.mp4?tag=29)
[🔗 在 Twitter 上查看](https://x.com/jakubkrehel/status/2095536111804150211/video/1)
[🔗 查看引用的推文](https://x.com/jakubkrehel/status/2095536111804150211)
查看原文（中文正文为 AI 翻译）
[开源分享] 设计工程师审美经验 Skills
作者 [@jakubkrehel](https://x.com/jakubkrehel)
地址 [github.com/jakubkrehel/sk…](https://github.com/jakubkrehel/skills)
6 个领域 skill：UI 打磨、字体、色彩、可访问性、布局、文案，提供"用哪个值、归谁管"的知识
5 个流程 skill：整体审查、变更评审、组件压测、变体探索、界面逆向，提供"证据优先、只读、不越权"的操作规范
6 个领域 skill（知识，better-\* 前缀，模型可自动调用）
better-ui：表面、图标、动效等视觉打磨
better-typography：文字渲染、字阶、换行、截断、标点
better-colors：色板结构、token 命名、格式、对比度测量
better-accessibility：语义、键盘、焦点、表单、读屏
better-layout：分组、对齐、间距、响应式、逻辑属性、RTL
better-writing：产品文案、术语、语气
5 个流程 skill
better-interface：编排器：按 accessibility → layout → writing → typography → colors → ui 顺序调用领域 skill，统一严重度、合并、限 15 条、给出 Block/Approve
interface-review：变更评审：解析 diff 范围、扩展"爆炸半径"、读 - 行找回归、把发现分类为 Introduced / Regression / Pre-existing，再交给 better-interface
break：把一个组件在临时页面上渲染出所有极端场景（超长文本、空态、320px 宽等），只观察不评判
variant：为一个 UI 片段构建 3 个在单一轴上刻意不同的变体，挂在真实页面的 ?variant= 切换器后，列出取舍表，不选优
explain-interface：逆向解读别人的网页效果：按绘制顺序找图层栈，每个结论标注 Measured / Derived / Inferred 三级证据
Jakub Krehel@jakubkrehel
It’s incredible that my skills have been installed more than 160,000 times.
I originally built them for myself. I had a pretty good idea of how I wanted to do certain things, but whenever I hopped between projects, I had to explain them over and over again.
Skills often get a bad rap, and it’s understandable because there are a lot that are complete slop.
But there are also some that are genuinely useful, help you do things better and let you learn from them.
That’s the kind I try to build.
[Your browser does not support the video tag.](https://video.twimg.com/amplify_video/2095535923853197312/vid/avc1/2424x1604/sKSt1Nn-X3yJbRO6.mp4?tag=29)
[🔗 View on Twitter](https://x.com/jakubkrehel/status/2095536111804150211/video/1)
[🔗 View Quoted Tweet](https://x.com/jakubkrehel/status/2095536111804150211)