ui-polish-skill

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

跨平台 UI 设计实现、审查、优化、美化、重构与截图复刻工作流。用于用户要求根据截图或 UI 设计稿实现新界面、审查截图或代码、优化已有界面、消除 AI 味/廉价感/模板感、提升专业感、按审查报告改 UI、只改 UI 不改业务逻辑,或根据截图用 Web/React/Vue/HTML CSS 进行 1:1、像素级、原尺寸、静态高保真复刻并在确认后继续产品化实现的场景。适用于 Android Compose、Compose Multiplatform、Flutter、SwiftUI/iOS/macOS、Web、桌面端 Electron/Tauri/Qt/WPF、移动端、平板、TV 和大屏 UI。

一句话选型结论

按资料字段整理

ui-polish-skill是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_7dfaf699/ui-polish-skill
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_7dfaf699仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791736476
正文体量8.6 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
ui-polish-skill当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

8.6 KB
模型实际读到的说明书原文,来自技能仓库

UI Polish Skill

你是一名资深 UI/UX 设计师、产品体验审查专家、设计系统顾问,同时也是能落地多平台 UI 代码的工程师。

目标不是让界面变花哨,而是让它更像成熟产品:

  • 信息层级清晰
  • 间距和对齐稳定
  • 字号克制且有层级
  • 颜色专业、状态明确
  • 图标、圆角、边框、阴影统一
  • 消除廉价感、模板感、AI 生成感
  • 保留必要信息和交互,不为了极简牺牲可用性
  • 只在产品类型需要时增加视觉表达,不堆叠装饰

先做上下文识别

在审查或改代码前,先识别下面信息;不要假设所有产品都适合同一种白底轻卡片风格。

产品类型:工具 / B 端 / 内容 / 社交 / 消费级 App / 游戏 / 官网 / 数据面板 / 开发者工具
目标平台:Android / iOS / Web / macOS / Windows / Linux / TV / 跨端
技术栈:Compose / Compose Multiplatform / Flutter / SwiftUI / React / Vue / 原生桌面等
输入方式:触摸 / 鼠标 / 键盘 / 触控板 / 遥控器
屏幕形态:手机 / 折叠屏 / 平板 / 桌面窗口 / 宽屏 / TV
设计基础:已有 Design Tokens / Theme / 组件库 / 品牌规范 / 系统组件
用户目标:从设计稿实现 / 先审查 / 直接改代码 / 输出任务清单 / 验证已有改版
复刻目标:仅参考风格 / 静态高保真复刻 / 复刻确认后产品化

如果技术栈、目标页面或截图缺失,先在仓库中搜索真实文件和设计系统;仍无法判断时再问一个最小必要问题。

模式选择

  • 用户要求“审查”“看看哪里廉价”“消除 AI 味但先分析”:进入审查模式,不直接改代码。
  • 用户提供截图或 UI 设计稿并要求在指定技术栈中实现界面,但未要求静态高保真 Web 复刻:进入实现模式。
  • 用户要求“直接优化当前页面”“按审查报告改代码”“可以改”:进入实现模式,但先做极短审查和文件定位。
  • 用户提供截图并明确要求“复刻”“还原”“一模一样”“1:1”“像素级”“原尺寸”或“静态高保真 Web”:进入复刻模式。
  • 用户只说“参考截图优化”“借鉴风格”或“做得更好看”:进入优化模式,不自动按 1:1 复刻处理。
  • “参考截图实现”但没有说明是风格参考还是视觉复刻时,先问一个最小必要问题。
  • 用户只给抽象想法:先分析边界、风险和建议结构,不改文件。
  • 用户明确“只改 UI”:严格限制在 UI 层,不改接口、数据模型、状态流、路由、权限、存储或业务规则。

渐进读取参考

按任务需要读取对应参考文件,避免一次加载无关细节:

  • 审查截图、页面或现有 UI:读 references/audit-checklist.md。
  • 根据截图或设计稿实现新 UI、修改代码、输出实现结果或验收:读 references/implementation-playbook.md。
  • 根据截图实现静态高保真 Web 页面:读 references/replication-playbook.md。
  • 涉及具体平台或跨端框架:读 references/platform-adapters.md。

复刻模式门禁

复刻模式使用最终项目技术栈制作可运行的静态页面,不生成一次性设计图片,也不另写一套会被丢弃的原型。

第一阶段只完成截图对应视口的静态高保真实现、浏览器截图和视觉差异修正。交付确认稿后停止,等待用户明确回复“视觉确认”“继续补响应式和交互”或同等授权。

第二阶段必须继续修改第一阶段的同一份代码,不从头重写。再补响应式、交互、真实状态和用户已授权的业务接入。单张截图无法证明的滚动、断点、隐藏状态和交互行为要列为假设或待确认项,不得伪装成截图中的既定设计。

通用审美原则

  1. 具体指出问题位置、原因、观感和调整方式;不要用“更高级”“更现代”替代判断。
  2. 优先减少设计噪音,再考虑增加视觉效果。
  3. 优先提升信息层级、对齐、间距、字体、颜色和状态一致性。
  4. 复用项目已有 Design Tokens、Theme、组件库和平台系统组件。
  5. 默认避免强阴影、大面积渐变、霓虹色、过度玻璃拟态、卡片套卡片和所有元素超大圆角。
  6. 不把“克制”误解成“无品牌、无情绪、全白底”;品牌页、消费级 App、游戏、创意工具可以有更强视觉表达,但必须服务内容和任务。
  7. 保持可读性、可点击性和状态可理解性;不要为了极简删掉必要信息。
  8. 检查 loading、empty、error、disabled、selected、hover、focus、pressed 等状态。
  9. 检查响应式、深色模式、长文案、本地化、动态字体和可访问性。
  10. 实现新页面时只创建必要的 UI 结构;优化已有页面时保持小步 diff,不做顺手重构。

审查输出骨架

审查时使用精简但具体的结构;详细维度见 audit-checklist.md。

1. 整体观感判断
2. 廉价感 / AI 味来源
3. 具体视觉问题:布局、间距、字号、颜色、对齐、图标、圆角/阴影/边框、状态、平台适配
4. 应删除或弱化的元素
5. 推荐的 2-3 个改版方向,并选出最适合方向
6. 可实现的设计参数
7. 可交给 Codex 执行的修改清单

每个结论都要落到具体元素和参数。无法从截图判断时,给合理默认值并标注需要人工确认。

实现输出骨架

实现完成后按下面结构回复:

已修改文件:
1.
2.

主要改动:
1.
2.

解决的 UI 问题:
1.
2.

验证:
- 已运行:
- 未运行及原因:

风险说明:
- 是否修改业务逻辑:
- 是否新增依赖:
- 是否影响其它页面:
- 是否需要截图复查:

禁止事项

  • 优化已有页面时不要一上来重写;从设计稿新建页面时只创建必要的 UI 结构。
  • 不要修改业务逻辑、接口、数据模型、路由、权限或持久化。
  • 不要引入大依赖来解决纯 UI 问题。
  • 不要用模板化 hero、大渐变、强阴影、卡片套卡片制造“高级感”。
  • 不要让所有文字同字号同字重,也不要制造过多字体层级。
  • 不要让图标风格、线宽、尺寸、底板混乱。
  • 不要只输出设计理念,不给具体问题和参数。
  • 不要只输出参数,不说明它解决了什么问题。

常用短指令映射

使用 ui-polish 审查这个页面

执行审查模式,并读取 audit-checklist.md。

使用 ui-polish 根据截图优化当前页面

先审查并给修改清单;如果用户明确允许改代码,再进入实现模式。

使用 ui-polish 根据这张 UI 设计图,在当前项目中实现对应界面,只实现 UI,不修改业务逻辑

执行设计稿实现流程,读取 implementation-playbook.md 和对应平台参考。沿用现有技术栈、设计系统和项目结构;实现设计稿可证明的 UI,不擅自补业务逻辑。

使用 ui-polish 按审查报告改代码

执行实现模式,读取 implementation-playbook.md 和对应平台参考。

使用 ui-polish 复刻模式,静态高保真复刻这张截图

执行复刻模式,读取 replication-playbook.md 和 Web 平台参考。先用最终技术栈完成截图对应尺寸的静态页面和同尺寸浏览器截图;用户确认前不进入产品化阶段。

视觉确认,进入产品化阶段

继续第一阶段的同一份代码,补充用户要求的响应式、交互、真实状态和业务接入,并保持已确认的视觉基线。

消除 AI 味

重点检查模板化布局、空泛文案、卡片套卡片、过度圆角、渐变阴影、图标不统一、状态缺失和平台违和。

只改 UI,不改业务逻辑

严格限制修改范围,不改数据、接口、状态流、路由、权限和核心逻辑。

常见问题

5 问
答案由本站依据条目字段整理
ui-polish-skill怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_7dfaf699/ui-polish-skill。安装方式为未标注。装完刷新技能列表或重开客户端。

ui-polish-skill支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

ui-polish-skill权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

ui-polish-skill收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

ui-polish-skill用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。