技能说明
来自 hueyexe/frontend-agent-skills 的 ui-visual-composition，专注网页和产品界面的层次、间距、字体、色彩、深度、图片与真实状态。它把视觉设计当成帮助用户理解和行动的工具，同时要求使用设计令牌、响应式布局、焦点状态和可访问性检查。仓库 README 收录 9 项前端 UX/UI 技能，采用 MIT 许可证，并提供可按单项安装的命令；当前 GitHub 星标为 9。
关于此技能
用层次、间距、字体、颜色、深度和状态把界面变得清楚、好看且能承受真实内容。
核心能力
先定任务和层次
先确认页面要帮助用户完成什么，再用顺序、分组、大小、留白和对比建立视觉重点。
建立可复用的视觉系统
把字体、间距、颜色、圆角、边框和阴影整理成一致的设计令牌，减少一次性装饰。
补齐真实状态
把空状态、加载、错误、禁用、焦点和窄屏行为一起纳入视觉设计，并检查可访问性。
适用场景
打磨落地页和后台界面
改善页面结构、排版、色彩、密度和视觉状态，让界面更容易理解和操作。
审查 AI 生成的网页
找出模板感、层次不清、装饰过度、状态缺失和真实内容一多就崩的问题。
整理前端视觉规范
把零散的样式选择沉淀为类型、间距、颜色和组件状态的可复用规则。
使用步骤
- 01
确认页面任务和内容
识别用户、主要任务、内容层级、必须操作和现有组件约束。
- 02
先用结构建立层次
在不依赖装饰的情况下处理顺序、分组、留白、网格和主要行动。
- 03
应用视觉令牌
统一字体、色彩、间距、深度、边框和状态样式，并保留现有设计系统的约束。
- 04
渲染并检查边界状态
在桌面、窄屏和真实内容下检查溢出、对比度、焦点、空态、错误和动效降级。
常见问题
它只是让页面更漂亮吗？+
不是。它要求每个视觉选择服务于层次、理解、可访问性或产品语境，不能用装饰掩盖可用性问题。
能配合现有设计系统使用吗？+
可以。默认保留项目已有组件、令牌、字体和技术栈，只补足缺失的视觉规则。
它能替代用户研究或交互设计吗？+
不能。它覆盖视觉构图和实现质量；需要深度研究、信息架构或复杂交互流程时，应配合对应技能。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Cursor · OpenCode
已提供来源链接
命令可直接复制
2026/09/09
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills@latest add hueyexe/frontend-agent-skills --skill ui-visual-composition