ui-design
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
Best use case
ui-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "ui-design" skill to help with this workflow task. Context: UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-design Compares
| Feature / Agent | ui-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
用户要求修改页面的 UI 样式（布局、间距、颜色、组件搭配等视觉层面的调整）。通过结构化的协作流程完成修改，确保每一步都对齐目标，不做无效猜测。 ## 核心原则 - **不猜，不抢跑** — 没有对齐目标之前，绝不动代码 - **截图是第一语言** — 主动要求用户提供截图，用截图定位问题 - **ASCII 画方案** — 布局方案用 ASCII 画出来，文字描述容易产生歧义 - **每次只改一个点** — 不要一次改多个地方，逐步逼近目标 ## 工作流程 ### 第 1 步：定位问题 用户说想改某个地方时，先做两件事： 1. **读代码** — 读取相关文件，理解当前实现 2. **描述现状** — 用 ASCII 画出当前布局，向用户确认："我看到的是这样，对吗？" ``` 示例： ┌─────────────────────────────────────────────┐ │ 📈 标题 [🔄] │ │ 副标题说明文字 │ │ 🔍 [搜索框... ] │ ├─────────────────────────────────────────────┤ ``` **禁止**：跳过这一步直接问"你想改成什么样"。必须先让用户确认你理解了现状。 ### 第 2 步：给出方案 提供 2-3 个方案，每个方案包含： - **ASCII 布局图** — 画出改完的样子 - **一句话说明** — 这个方案的核心思路是什么 ``` 示例： 方案 A：搜索和刷新放同一行 ┌──────────────────────────────────────────┐ │ 🔍 [搜索框... ] [🔄] │ └──────────────────────────────────────────┘ 方案 B：刷新挪到标题行 ┌──────────────────────────────────────────┐ │ 📈 标题 [🔄] │ │ 🔍 [搜索框... ] │ └──────────────────────────────────────────┘ ``` **禁止**： - 只给一个方案（用户没有选择余地） - 给超过 3 个方案（选择困难） - 方案只有文字没有 ASCII 图 ### 第 3 步：等用户选择 用户选完方案后，才开始写代码。 **禁止**：用户还没选就开始改代码。 ### 第 4 步：改代码 执行最小改动，只改用户选定方案涉及的部分。 **禁止**：顺手改其他地方、优化代码结构、加注释。 ### 第 5 步：微调 改完后让用户看效果。用户可能会提出微调： - "加个边框" - "颜色太深" - "间距再大一点" 微调是**具体的、小的修改**，直接执行，不需要再走方案选择流程。 如果用户的反馈不够具体（比如"感觉不对"），主动追问： - "是大小的问题、颜色的问题、还是位置的问题？" - "和旁边哪个元素搭配起来不协调？" ## 沟通规范 ### 用户应该提供的 | 信息 | 说明 | |---|---| | 截图 | 标注出想改的区域 | | 问题描述 | "这两个元素搭配不协调"、"间距太大" | | 选择方案 | 从给出的方案中选一个 | ### AI 应该做的 | 阶段 | 输出 | |---|---| | 定位 | ASCII 现状图 | | 方案 | 2-3 个 ASCII 方案图 + 一句话说明 | | 改码 | 最小改动，只改选定方案 | | 微调 | 直接执行具体调整 | ### AI 绝不应该做的 - 用户说"改布局"就直接猜想法然后改代码 - 一次给出大段代码重构 - 微调阶段还在给多个方案让用户选 - 顺手改用户没提到的地方
Related Skills
design-exploration
新功能设计探索流程。当用户有模糊想法要做新功能/新模块时使用。通过"需求收敛 → 技术调研 → ASCII 批量探索 → HTML 设计稿 → 全状态覆盖 → 需求总结"的结构化流程，从模糊想法产出可交付的设计参考文档，作为 PRD 阶段的输入。
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
visual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
react-native-design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
python-design-patterns
Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use when making architecture decisions, refactoring code structure, or evaluating when abstractions are appropriate.
postgresql-table-design
Design a PostgreSQL-specific schema. Covers best-practices, data types, indexing, constraints, performance patterns, and advanced features
mobile-ios-design
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
mobile-android-design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
responsive-design
Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.
sleek-design-mobile-apps
Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects. Covers high-level requests ("design an app that does X") and specific ones ("list my projects", "create a new project", "screenshot that screen").