---
url: https://blog.hanfucn.com/products/qson-ui-skills.md
description: >-
  qson-ui-skills 是 Qson 的 UI 设计效果 skill 家族：总索引 + 11 个分类 skill、百余条目，每条含实现说明与 AI
  描述词，配套 100 分制设计评审标准。公开仓库，任何 AI 编程工具可用。
---

# qson-ui-skills

> 把踩过的 UI 效果，收成可复用的设计资产。

一套 UI 设计效果 skill 家族：每个效果都写成给人看的规范、给 AI 编程工具用的实现说明与描述词——弹窗怎么定点弹出、卡片怎么甩动翻页、转场怎么收尾，都沉淀成装上就能用的 skill。

## 家族名册

| 分类 skill | 内容 |
|---|---|
| qson_ui（总索引） | 名册、注册表与收纳流程，只索引不收效果 |
| qson_ui_popup | 弹窗 ×6 |
| qson_ui_layout | 布局 |
| qson_ui_cards | 卡片与按钮 ×8 |
| qson_ui_feedback | 提示反馈 ×8 |
| qson_ui_components | 组件 ×12 |
| qson_ui_transitions | 转场与手势 ×14 |
| qson_ui_dashboard | Dashboard 与后台 |
| qson_ui_micro | 动态图标与微交互 |
| qson_ui_web | Web 效果 ×10 |
| qson_ui_principles | 审美原则与评审标准 |
| qson_ui_workflow | 收纳与整理工作流 |

配套评审标准：设计成熟度 10 条 × 10 分，100 分制、80 分达标线。

## 使用

公开仓库：[github.com/Qson8/qson-ui-skills](https://github.com/Qson8/qson-ui-skills)

仓库 README 里有两种装法：人工安装（克隆后复制到你的 skills 目录），或把安装话术整段发给你的 AI 助手、让它自己装完并实测汇报。