Make Interfaces Feel Better:打磨 UI 的细节

jakubkrehel/make-interfaces-feel-better

用具体规则打磨前端界面的排版、嵌套圆角、阴影、图标、点击区域与克制动效,并输出快速或完整审查。

最近更新于:

查看 GitHub 项目
npx skills add jakubkrehel/make-interfaces-feel-better
3,997Stars169Forks仓库最近推送

关于这个 Skill

通过一个入口和排版、表面、动画、图标、性能五份配套指南,审查或实现界面细节。流程先识别现有样式体系,再落实具体修正,并说明实际检查过的范围。

为什么推荐

面向现有组件的设计工程 Skill,沿用项目当前样式系统。审查结果包含位置、修改建议、原因与实际验证范围。

适合用来做什么

  • 打磨存在细微对齐与一致性问题的组件。
  • 审查悬停、焦点、按下、加载与空状态。
  • 获得按优先级排列、可直接实施的修改建议。

沿用现有样式体系改进细节

指南覆盖同心圆角、视觉对齐、结构边框、分层阴影、文本换行、等宽数字与一致的图标状态,修改应符合组件及其周围设计体系。

交互部分强调可中断过渡、克制的按压反馈、有目的的入场顺序与明确的过渡属性,并区分有用动效和重复干扰。

已核对的 Skill 与配套指南作者文章:界面细节

选择快速或完整审查

报告说明范围与覆盖情况,按原则归类问题,指出源码位置,并记录验证结果与结论;未检查状态会明确标注。

快速

检查主要路径,仅报告高、中严重程度问题,最多五项。

完整

覆盖请求范围中的五类细节,最多十五项;这是上游默认模式。

已核对的 Skill 与配套指南

安装并提出具体审查任务

示例请求:以 quick 模式审查结账按钮和摘要卡片,保留当前 CSS 体系,并给出受影响的文件位置。

命令用途与使用时机
npx skills add jakubkrehel/make-interfaces-feel-better安装 Skill 与五份配套指南。

官方仓库与安装说明已核对的 Skill 与配套指南

使用前需要了解

  • 能读取 Markdown Skills 与相关前端文件的编程助手。
  • 保留 SKILL.md 引用的 Markdown 指南,安装完整上游 Skill 目录。
  • 沿用现有 CSS、Tailwind 或 CSS-in-JS;检查真实状态和动效需要浏览器。

支持的 Agent

Claude CodeCodex CLICursorGitHub CopilotDeepSeek HarnessGemini CLIGrok BuildHermes AgentOpenCodePiKiroRovo DevQoderMistral VibeGoogle Antigravity

资料与来源

原始资料见下方链接;文中的上手建议由 SkillHey 编辑整理。