十四个手上功夫:无障碍、配色、布局、字体、细节、文案,外加压测、剖面图解和多方案对比,哪块薄弱补哪块。
怎么用
装好后按需点名:「帮我查一下这个表单的无障碍」「把这套颜色起个名字并算算对比度」「这块布局在窄屏和翻译之后会怎样」「只评审这次改动引入了哪些界面问题」。要整体过一遍就说「整界面评审」,它会出一份按严重程度排序的清单。
核心用法
指明要补哪一块基本功,或者让整界面评审出一份排序清单;给设计稿就让它照着搭,给网址或截图就让它拆解讲解。
触发场景
表单和弹窗键盘走不通、读屏念不清楚;颜色各页对不上、深浅分不清;窄屏和长文案一压就错位;按钮和报错的话让人看不懂下一步;改完一轮不确定有没有把原来好的改坏。
优劣特点
优点:拆得细,能只补薄弱那一块;无障碍按通用标准逐条对,不靠感觉;评审给排序,知道先修哪个;原本就适配多种助手。限制:管的是界面手艺,不替你定产品和内容;压测、状态铺开、多方案对比会真的生成临时页面,需要项目能跑起来;画剖面图解那条和做界面关系不大,用不上可以不管。
适用人群
自己做产品界面、上线前想认真过一遍细节的人。不适合只要一套模板、不打算逐条改的人。
详细说明
这是一整套做界面的基本功,拆成十四个各自独立的小技能,可以只叫其中一个。六个打底:无障碍(键盘焦点、读屏播报、表单、动效与放大)、配色(生成配色、语义化命名、对比度)、布局(分组、对齐、阅读顺序、随尺寸变化)、字体排版(层级、行距、断行、截断、标点)、界面细节(圆角、阴影、图标状态、动画数值)、界面文案(按钮、报错、空状态)。另外几个负责评审和验证:整界面评审出一份排序报告、改动评审只看这次动了什么、压测组件、铺开所有状态、多方案对比、照着设计稿搭界面、拆解别人做好的界面、把东西画成剖面图解。
常见问题
它是做什么的?
十四个手上功夫:无障碍、配色、布局、字体、细节、文案,外加压测、剖面图解和多方案对比,哪块薄弱补哪块。
支持哪些工具?
这个技能可以装进 Claude Code、Codex、OpenClaw、Hermes。
怎么用?
装好后按需点名:「帮我查一下这个表单的无障碍」「把这套颜色起个名字并算算对比度」「这块布局在窄屏和翻译之后会怎样」「只评审这次改动引入了哪些界面问题」。要整体过一遍就说「整界面评审」,它会出一份按严重程度排序的清单。
源码在哪里?
源码地址:https://github.com/jakubkrehel/skills
怎么安装?
安装在星算助手客户端里完成 —— 由它决定装进 Claude Code、Codex 还是别的工具,并写好对应配置。