页面能跑，但总觉得差点意思。这10个Skill把「还行」拆成可执行的细节。
很多页面不是不能用，是「还行」——能点、能看，但就是没质感。问题往往不在功能，而在细节：风格没定、层级不清、颜色和间距随手写、状态没反馈、跳转生硬。
假设你要做一个产品落地页，功能已经能跑，但看起来像模板。这时候别急着改代码，先按顺序过一遍：先定风格和规范，再对齐现有页面的设计基准；然后重写基础组件、换掉手写控件，把视觉细节统一；接着补微交互和页面过渡，让操作有反馈、跳转不生硬；最后在真实浏览器里核对断点、无障碍和最终呈现。
顺序很重要。先定方向再动手，否则改完还是像模板；先统一组件再补动效，否则动效会放大原本的不一致。下面五张卡片按这个工作流拆开，每张两个Skill，负责一段。
先定下页面的视觉风格、配色和字体方向，避免成品落入模板感
逐条核对界面代码的无障碍与设计规范，找出层级和对比度上的硬伤
在真实浏览器里检查响应式断点和视觉错位，把布局问题定位到具体元素
给按钮、开关等控件补上点击与切换的微交互反馈
实现页面切换时的过渡动画，让跳转不再生硬
按可访问、可组合的标准重写按钮和导航等基础组件
用现成组件库替换手写控件，统一表单和导航的视觉细节
从现有页面提取配色、字体和间距规则，作为细节打磨的基准
生成设计规范文件，约束排版和配色的取舍标准
用 Playwright 截图核对打磨后的界面在真实浏览器中的最终呈现