🔥 jakubkrehel/skills：帮助构建优秀界面的 Agent Skills 集合

英文标题：🔥 jakubkrehel/skills

jakubkrehel/skills 是一组面向 Agent 的界面设计与开发技能，覆盖 UI、排版、色彩、无障碍、布局和产品文案等领域。该项目提供了从单项改进到综合界面审查、组件压力测试和多方案迭代的多种技能模块。开发者可通过 npx skills 或插件市场安装，将这些规则和工作流接入 Agent，以提升产品界面的一致性、可用性与设计质量。

打开原文相关 3 · 机会 3

中文

这是一个 Agent skills 集合，涵盖 UI、排版、色彩、无障碍、布局、产品文案等内容，帮助你构建出色的界面。

这些 skills 所涵盖的主题，也是我在个人网站以及设计工程杂志 Interfaces中撰写的内容。

帮助构建优秀界面的 Skills

better-interface：将所有 better-* skills 合并为一次综合审查。
better-ui：全面改进项目中的 UI，涵盖同心圆角、视觉对齐、情境化图标、点击区域、动画等内容。
better-typography：改进项目中的排版，涵盖字号层级、间距、尺寸、可变字体、OpenType 功能、换行、文本截断等内容。
better-colors：帮助你构建色彩系统，并解答项目中的各类颜色问题。你可以生成调色板、使用语义化 token、在不同格式间转换、检查对比度等。
better-accessibility：帮助项目符合无障碍标准与最佳实践。
better-layout：帮助处理分组、对齐、阅读顺序及其他构成优秀布局的细节。
better-writing：专注于改进项目中的产品文案，并使其保持一致。
interface-review：从UI、排版、布局、色彩、文案和无障碍等多个类别审查你的工作，并对发现的问题给出详细分析。由用户调用。
explain-interface：帮助你了解某个动画、设计或 UI 元素是如何在 Web 上构建的。由用户调用。
break：在临时页面中渲染你选择的组件的所有状态和场景，并对其进行压力测试。由用户调用。
variant：为你正在开发的组件构建多个变体，并帮助你迭代。由用户调用。

npx skills add jakubkrehel/skills

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

English / 原文

A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.

These skills are contain topics that I write about on my personal website and my design engineering magazine, Interfaces.

Skills that help build great interfaces

better-interface: Combines all of the better-* skills into a single review.
better-ui: Improves UI in your project across the board. Covers things like concentric border radius , optical alignment , contextual icons , hit areas , animation and more.
better-typography: Improves type in your project. Covers type scale , spacing , sizing , variable fonts , OpenType features , wrapping , truncation and more.
better-colors: Helps you build a color system and answer anything about color in your project. You can generate palettes , use semantic tokens , convert between formats , check contrast and more.
better-accessibility: Helps your project comply with accessibility standards and best practices.
better-layout: Helps with grouping , alignment , reading order and other details that make a great layout.
better-writing: Focuses on improving and product copy in your project and making it consistent.
interface-review: Reviews your work across multiple categories like UI , typography , layout , color , writing and accessibility and gives you a detailed analysis of the findings. User-invoked.
explain-interface: Helps you figure out how an animation, design or a piece of UI was built on the web. User-invoked.
break: Renders a component you choose in every state and scenario on a temporary page and stress tests it. User-invoked.
variant: Builds multiple variants of a component you're working on and helps you iterate. User-invoked.

npx skills add jakubkrehel/skills

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