jakubkrehel/skills

一组覆盖 UI、排版、色彩、无障碍、布局与产品文案的 agent skills，帮助你构建出色的界面。

这些 Skills 涵盖了我在 my personal website 以及我的设计工程杂志 Interfaces 上撰写的主题。

帮助构建优秀界面的 Skills

• better-interface: 将所有 better-* skills 整合为一次覆盖无障碍、布局、文案、排版、色彩与 UI 打磨的综合审查。
• better-ui: 打磨项目中的界面表面、图标与动效，提供关于圆角、视觉对齐、阴影、图标状态与动画的精确数值。
• better-typography: 设置并审查产品中文字的呈现方式，从字号阶梯与间距到字体特性、换行、截断与标点。
• better-colors: 帮助你为项目构建并检查色彩系统。它可以生成调色板、命名语义 token、在不同格式间转换并测量对比度。
• better-accessibility: 依据 WCAG 2.2 审查并修复项目中的键盘与焦点行为、ARIA、可访问名称、表单、屏幕阅读器播报、动效与缩放。
• better-layout: 帮助你处理分组、对齐、阅读顺序、响应式结构以及译文所需的预留空间，让布局在缩放、翻译或镜像后依然稳固。
• better-writing: 撰写并审查你的界面文案，从标签、错误提示到空状态与确认提示，使其符合产品的语气并告诉用户下一步该做什么。
• interface-review: 审查某个分支、pull request 或未提交的更改，找出其中引入或回退的界面问题，覆盖无障碍、布局、文案、排版、色彩与 UI。由用户调用。
• explain-interface: 解释一个网站、视觉效果或动画是如何构建的，可基于线上 URL 或截图。由用户调用。
• break: 在一个临时页面上，以所有可能触达该组件的场景渲染你选择的组件并对其进行压力测试。由用户调用。
• build-design: 根据 Figma 文件或设计图构建 UI，使其与设计一致，并使用项目中已有的 token 和组件。
• state-machine: 在一个临时页面上渲染你所选组件的所有状态，附带 mock 数据和切换器，方便你逐个处理每个状态。由用户调用。
• variant: 为你正在开发的组件构建多个变体，帮助你迭代并从中挑选一个。由用户调用。

安装

npx skills add jakubkrehel/skills

Claude Code plugin

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces