What is ui-design?
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。 Source: yunshu0909/yunshu_skillshub.
·ui-design
*
ui-design
✓UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
Installation
How to Install ui-design
Quickly install ui-design AI skill to your development environment via command line
- Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
- Run Installation Command: Copy and run this command: npx skills add https://github.com/yunshu0909/yunshu_skillshub --skill ui-design
- Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Source: yunshu0909/yunshu_skillshub.
SKILL.md
View raw用户要求修改页面的 UI 样式（布局、间距、颜色、组件搭配等视觉层面的调整）。通过结构化的协作流程完成修改，确保每一步都对齐目标，不做无效猜测。
| 截图 | 标注出想改的区域 | | 问题描述 | "这两个元素搭配不协调"、"间距太大" | | 选择方案 | 从给出的方案中选一个 |
| 定位 | ASCII 现状图 | | 方案 | 2-3 个 ASCII 方案图 + 一句话说明 | | 改码 | 最小改动，只改选定方案 | | 微调 | 直接执行具体调整 |
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。 Source: yunshu0909/yunshu_skillshub.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/yunshu0909/yunshu_skillshub --skill ui-design- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-26
- Updated
- 2026-03-10
Quick answers
How do I install ui-design?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/yunshu0909/yunshu_skillshub --skill ui-design Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Where is the source repository?
https://github.com/yunshu0909/yunshu_skillshub
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-26