Agent Skills
返回列表
前端界面精修

前端界面精修

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_17062593/frontend-improving-skills。

技能介绍

要解决什么问题

功能已经跑通的前端，常见痛点是间距随意、层级不清、移动端一缩就乱，以及 hover/loading 时布局抖动。若在大改视觉的同时动路由、状态或数据契约，很容易把原有用户路径和测试一起弄坏。

本技能面向的是：在明确保留产品意图与既有行为的前提下，把界面打磨到更接近可上线、可维护的水准，而不是换皮或重做产品逻辑。

技能如何工作

执行时会先审视当前 UI 结构、样式、路由与组件边界，并判断产品形态（仪表盘、SaaS、内容站、电商等），再按优先级动手：

  • 设计系统优先：统一 spacing scale、字体层级、色彩语义（背景/表面/主操作/危险/成功等）、控件与空态/加载/错误态，以及响应式规则
  • 视觉层级：每屏一个主焦点；面板内避免 hero 级标题；优先用间距、对齐与对比，而非堆边框和阴影
  • 布局约束：棋盘格、工具栏按钮、计数器等固定格式 UI 需明确尺寸；卡片不嵌套卡片；主区块不必全部做成浮动卡片
  • 交互与可访问性：熟悉控件对应熟悉任务；hover / focus-visible / disabled / loading 等状态可区分；键盘焦点可见、正文对比度足够

实现上遵循仓库既有框架、目录与 styling 约定；React 场景下尽量不改数据流，视觉抛光阶段避免大范围重构。收尾前按清单验证：构建/检查通过、主屏无破图与明显布局错误、桌面与窄屏连贯、主操作与表单仍可用。

适用边界

  • 默认不改用户流程、状态、数据契约、无障碍意图与测试，除非你明确要求行为变更
  • 色彩上刻意回避「整页单色系、泛滥紫蓝渐变、泛用深色 slate、橙棕模板感」等，除非现有品牌必须保留
  • 装饰性 orb、bokeh、通用抽象 hero SVG、 stock 感模糊背景等资产会被 discouraged；优先用项目已有图标库（如已安装则倾向 lucide）
  • 若本地无法跑 dev server 或检查，应在结论中说明未执行的验证项及原因

使用场景

  • 功能与测试已通过，上线前需统一间距、色彩角色与空态/错误态，且不能改动接口契约与既有路由。
  • 内部 SaaS 或运营后台可用但层级发虚，要在保留 React 状态与数据流的前提下做一轮视觉抛光。
  • 桌面版正常，窄屏下按钮文字溢出或 hover 导致布局抖动，需按固定尺寸与响应式规则逐项收敛。
  • 设计 token 零散、页面充斥 one-off 样式，希望 consolidated 成组件 variant，又避免视觉阶段做大范围重构。

适合人员

  • 负责把功能 MVP 交给业务验收的前端，典型诉求是在截止日前让主流程页看起来像可上线产品而非 demo。
  • 独立维护小公司 SaaS 仪表盘的全栈开发，典型诉求是少动业务逻辑、优先统一 spacing 与控件状态样式。
  • 设计系统文档已有但页面未对齐的前端工程师，典型诉求是把 typography 与色彩语义落到现有组件上。
  • Side project 从「能跑」要对外展示的维护者，典型诉求是补齐移动端布局与键盘 focus 可见性而不改产品意图。