Lidessen's land
← All Skills
npx skills add lidessen/readme --skill ui-improvementGitHub ↗
SKILL.mdMarkdown

UI Improvement

把界面做成可以使用、可以阅读、会回应的作品。先理解人在做什么，再决定内容怎样 相处，用字、色、形、空间与变化把关系做出来。功能成立以后，美感仍值得单独判断： 比例、节奏和气质是否完整，不能由“没有溢出”或“操作成功”代替回答。

采用一个跨领域设计者的工作视角：建筑看动线、尺度与空间归属；工业设计看操作 暗示、材料与接合；平面设计看版面、字形和视觉重量；交互设计看行为、时间和返回。 这些视角帮助作决定，不要求把每页都做成建筑、器物或海报。给新人解释做法时， 用具体画面串起观察、选择、制作与回看，入门示范见设计手册。 扫描发现范围与共性，试作解决审美未知，复验检验关系是否成立；局部成功不代替 任务要求的多页面覆盖或用户接受。

恢复本批任务与现场

确定目标、修改边界、已接受方向、基线与预览能力，续接已有观察，不重新发明整套设计。 局部目标直接处理；发现风格缺口不自动授权全产品改版。规范、组件 owner 与实现检查 来自项目，设计方向来自任务和当前有效表达，不绑定品牌、设计系统或特定 design skill。

从真实入口梳理页面、组件用法、内容及相关状态。同构重复可分组，差异保留；记录已看、 源码推断与未看，不能以清单存在代替覆盖。也保留切换、重绘和返回前后需维持的对象、 草稿与操作位置，不让页面清单漏掉接合处。按影响、共性与当前未知选择深挖点。

从画面判断缺口在哪一层

先核对任务动线与表达载体：用户为完成什么，需知道什么、比较什么、决定什么， 怎样进入、行动和返回。控件能运行不证明选型适当，页面漂亮也可能迫使不必要的 跳转、反复展开或重新定位。涉及选择控件、页面／面板／dialog、步骤与信息架构时， 读交互结构与载体，先改受损关系再打磨表面。

以下三层处理视觉表达，不把交互动线缩成间距问题，也不把 CSS 属性固定分箱；颜色有可读性约束，布局有操作和响应式约束， 间距与圆角也能参与风格。

  • 基础秩序：可检查的尺度、对齐、间距、控件和响应式关系。具体规则来自用途， 不设全产品唯一参数，也不以所有坐标相等为目标。
  • 风格框架：整体气质落实为颜色、字体、形状、表面层次和布局节奏的关联选择。 风格名和 token 清单不能证明这些选择相互支撑。
  • 局部搭配：在框架内组织内容、主次与视觉锚点，允许角色和密度带来差异， 但要与所在区域及整体相接。

基础秩序成立后，仍主动判断整体是否有设计完成度；不等用户指出“不精致”才进入。 若各部件单独正确、合起来仍像默认组件拼装，或参数打磨没有改变观感，使用 构图与搭配试作。它通过画面诊断和有区分力的试作 发展审美判断，不把软装简化成挑皮肤，也不默认全部去框、变小或变淡。 延续产品语言不等于保护旧构图。诊断涉及整体组织时，允许用相同真实内容重编完整区域， 再与保守修饰对照；不能用参数打磨声称已解决内容关系。 能指出缺口却缺少表达做法时，读视觉修辞，从官方案例 选择相容的构图与搭配手法，转译到真实内容；它是制作素材，不是需逐项满足的清单。 具体到阴影、色组、虚线/实线、圆角和动效的制作，读表面与动效配方， 选择成组材料并映射项目已有角色，参数先作试作起点，不写成通用规范。

未收到具体问题也先看真实画面。按区域职责由整屏进入分组和原比例局部，再回到整体； 滚动看完整页面，包括导航、身份、说明与收尾。按内容角色判断轴线、间距、比例和重量， 对照邻近正常用法；数学等距与盒子居中不代替字形的光学平衡。

沿阅读和操作路线看文字轮廓，含说明、状态、输入与动作旁的文字。无溢出仍可能有 孤字、标点短尾或失衡行长；按内容角色调整宽度、字级或换行，复看邻近尺寸，保留原文。 把同一事实的值、文字、图形、行动和预览连起来看，变化或取消后核对它们是否同步； 动作图标与标签也要描述当前操作。

主动按组成与用法差异选代表性的完整控件组，在原比例局部核对“文字—附属图形—内缘” 的留白、重量及同行基线，不等工具警报或用户指出位置。看闭合、展开、焦点与选中状态， 保住原生语义和键盘行为，再决定调整样式或复用已有组件。DOM 量不到的绘制部件仍回看 实际局部；功能能用或没有碰撞不能证明工艺完成，确实看不到的状态才保留待验。

需要定位或解释疑点时读非视觉量测与交互探测， 用已有脚本读取计算样式、盒模型、文字和邻接关系，并按需截取带周边的局部。 工具提供事实和观察缺口，设计判断决定查哪里、修什么；候选警报与数值通过都不直接验收。

没有明显错位，仍可能只是把内容放进了剩余空间。说明它应传达什么，再看现有形式 是否形成了可辨的组成部分。克制也应有关系，不因图形少判错，不以次要内容为由免去 设计判断。记录位置、症状、情境与影响，分开观察、原因猜测和审美偏好。

用完整表达建立或恢复风格

从空间关系进入制作：先摆真实标题、内容与动作，认出主体和它的邻接关系；再把 版面主次译成字重、字色、行长和停顿；让表面、轮廓、阴影与操作暗示配合；最后 完成展开、反馈与返回中的变化。这是判断依赖，不是强制分阶段：上层已成立就从 实际缺口进入，细节反过来暴露空间问题时也可重编，不要求每次清空样式重做。

基础问题按规则修正；已有风格成立就恢复其关系，直接打磨局部。风格缺失或互相矛盾时， 先在允许范围内制作完整用法，不让每个角落各自发明样式。

需要建立风格或打破方案趋同时，读 设计语言种子， 按用途选择具体参考对象，在真实内容中生长；已有有效框架时不必换种子。选定后需要 把语言发展成布局、字色形、状态与跨尺寸关系时，读设计决定指引。先理解对象 服务什么、怎样组织内容与行动，再提炼字、色、形、层次和变化如何承载这些原则。 种子保留形神关系与适用边界，不是皮肤菜单；品牌宣传与产品工作区分别分析。 建立或还原语言时，以当前官方已发布参考和实际画面为主，记录平台、版本与核实日期； 分批上线与旧版分别判断。按需用当前设计参考 核实对象，未知保留待核。还原另看角色关系、排版节奏与关键形态的辨识度，原则相近或 功能合理不证明形神到位。缺画面就补参考，已有参考仍欠精致时用 参考工艺对照将差异转成制作决定。 分析新对象时核对构建基础：任务与信息架构、视觉原则、主题／组件实现、资产和生成 指导分别提供什么。模型常见输出、厂商品牌和默认组件样式不自动成为设计语言； 模型及 Agent 产品的取舍例子见 构建基础分析。

从内容与使用情境提出要形成的气质及阅读骨架：谁是主角，哪些是概览、操作、辅助或 收尾，颜色、字形、表面与节奏怎样共同表达这些角色。先做成包含主次与邻接关系的画面， 实际看成立与否，再沉淀可复用选择；不要先写完全部 token 再把内容填进去。

有效方向尚未形成时，试作组织逻辑有差异的表达，比较得到什么、牺牲什么；已有有效 方向不为凑候选重复制作。缺偏好边界时给具体对照，缺视觉做法时查看职责相近的成熟 用法，优先利用项目已有好例子。借关系重新制作，不复制整套风格或把参考名气当证据。

风格框架保存关联选择及适用条件，不保存某页参数作为通用模板。字体、形状或色面 可以表达归属与气质；不同角色不必同一容器，也不能仅因框线相似就强行拆散。探索与 克制都服务效果，装饰多少本身不是质量标准。 装饰可以表达温度、节奏和个性，不因删去后功能仍能运行就认定该删；保留时看它 与整体是否相容、是否损害关键内容和操作。艺术表达与功能关系可以共同决定取舍。

在框架内打磨局部

把局部当作接合处看：标题与正文、轮廓与留白、图标与字形、表面与输入、说明与 动作是否共同表达一种关系。整块定位与内部对齐分别决定，数学等距不代替光学平衡。 不要只问某个阴影或颜色是否漂亮，也问它让这里像什么、怎样使用，以及与周围是否配合。

试作前说明用户会从形式直接认出什么，以及它与所在区域有什么关系，再用完整编排 实现判断。候选只换边线、字号或强调位置而内容关系未变，仍是同一构图的打磨，不能 靠给差异起名声称有新组织。理由自洽不代表画面成立，无明确收益可以撤回整套表达。

视觉锚点不能靠假身份、状态或无功能按钮充实画面。用真实长度和有关状态比较整体 形状、比例、节奏、角色辨认与注意代价。归位可以解决所属关系，但不证明原位置的 表达已成立；两者难以区分时，在相同空间约束下另作对照。

检查当前表达是否完成它的用途：快速把握、密集扫读、逐段比较和连续填写需要不同 组织。样式协调仍可能留下无意义的阅读、滚动或动作。必要时重组前景与回查材料， 保留必要正文和入口，不靠删内容或默认折叠所有长文制造精简。

传播、复验与交付

先在负责位置完成一段用法，复看完整区域与相关动作，再沿消费者差异传播。共享组件、 主题与页面编排各归其 owner；传播相同语义和有效关系，密度与构图参数可按情境变化。 同构用法抽样发现根因，保留未看差异；单页漂亮不能代替用户要求的全量覆盖。

共享修改进入不同消费者，核对实际涉及的长内容、窄屏、明暗、空态或错误态，不要求 不存在的状态。退步先检查复用条件，收缩共享改变或修接合，不逐处堆补丁，也不另建 设计系统来统一外观。

响应式按内容容纳能力判断，不能只看一宽一窄两张端点图。并排区域要给正文、字段、 导航和行动留出真实可用宽度；接近容纳极限时实际调整窗口，看压缩后的行长、动作与 留白是否仍成立，再决定何时重组。断点来自这种关系，不沿用常见设备宽度作为依据。 结构改变后，重新辨认实际滚动容器、操作入口和返回位置；CSS 改成上下排列不证明 阅读与编辑的接续也跟着成立。不需穷举像素，选择会改变组织的边界查看即可。

对照基线复看发现问题的局部与整屏。局部改善不能破坏邻接、状态含义、必要内容或 功能。主题切换、入场或重排有有限过渡时，稳定画面在有关过渡完成后复看；中间帧 的混合颜色不直接证明最终主题故障。过渡过程另实际观察，不能以稳定可读或禁用动效 的截图宣称动态效果通过。 点击完成不等于可见后果成立，外框不溢出不等于内部没有挤压。 沿本批已经记录的症状逐项回看，说明消除、改善或仍存在；参数变化与旁边的问题修好， 不能代替原症状的结果。只看新警报会漏掉无法量测却已经观察到的视觉问题。 同一对象有多个操作时，沿每次完成与返回核对反馈邻接、改变的事实及仍未提交的草稿； 结果文字准确也可能因位置误导用户。必要时回看交互结构参考，不只复看初始画面。 经常配对的动作要走完往返：从所读内容进入批注、从比较对象进入编辑，再回到原对象。 单向入口可点不证明整条路线顺畅；观察是否反复滚动、重找上下文或依赖页首操作， 按任务频率决定是否补就近返回、调整邻接或保留现状，不给所有页面强加浮动工具栏。 字体、颜色与表面关系在相关主题和内容中仍应成立，用户否定的方案保留为反例， 不靠重写理由验收。

交代实际覆盖、共同根因、有效选择、消费者差异、回归、保留项和下一入口。代码检查、 视觉判断、交互观察与用户接受分别记录；无法看页面就保留待验，不称实际复看通过。 预算不足保留可续接的观察和决定，不创建永久扫描状态或默认定时运行。