布局

使用 frontend-design 构建有鲜明视觉主张、可直接投入生产的前端界面。这个 frontend-design 技能适用于着陆页、仪表盘、应用壳和各类组件，尤其适合层级、字体排版、动效和整体质感与实现同样重要的场景。它还包含面向 design-first UI 工作的安装与使用指引。

使用 design-system skill 生成或审核 UI 系统，从现有代码中提取 tokens，并在真实仓库中检查样式一致性。

ux-designer 是一套结构化的 UX 设计技能，覆盖用户研究、无障碍、信息架构、交互流程、线框图指导和 UX 文案。它通过 `AGENTS.md` 与聚焦的规则文件，帮助团队把粗略的产品想法转化为更清晰、基于评估标准的设计决策。

design-review 是一款面向 UX 的设计 QA 技能，用于审核线上界面，发现间距、层级、视觉一致性和交互问题，并通过带验证的迭代方式逐步修正。它支持在实现前进行 plan-mode 审查，适合你想要一份针对具体源代码改动的 design-review 指南，而不是泛泛而谈的建议时使用。

design-consultation 是一项 design-consultation 技能，用于把粗略的产品想法转化为完整的设计方向。它会生成 DESIGN.md 作为单一事实来源，并提供预览，以及关于字体、颜色、间距、布局和动效的系统级指导。适合新产品和需要统一起点的 UI 界面。

mobile-ios-design 技能可帮助智能体基于 Apple HIG 原则、SwiftUI 模式、导航建议、无障碍和自适应布局，产出更符合 iOS 原生体验的 UI 指导，适用于 iPhone 和 iPad。

react-native-design 是一项聚焦 React Native UI 模式的技能，涵盖 StyleSheet 样式、类型化的 React Navigation，以及 Reanimated 3 在跨平台界面中的用法。

使用 responsive-design 技能规划并实现自适应 UI 布局，涵盖 container queries、fluid typography、CSS Grid、Flexbox 以及 mobile-first breakpoints，内容来自 wshobson/agents 仓库。

typeset 通过修正字体选择、层级、字号、字重和可读性来提升 UI 排版，让文字更有意图感。若 UI 设计中的文案显得普通、不统一或难以快速扫读，而你又希望用更清晰的排版体系减少试错，就使用 typeset 技能。

quieter 是一项用于打磨 UI 设计的 refinement 技能，适合在界面显得过于强烈、嘈杂或造成感官负担时使用，在保留清晰度、层级关系和品牌意图的前提下降低视觉攻击性。它最适合在父级 `$impeccable` 技能之后使用，帮助团队先判断强烈感的来源，再做有针对性的调整。

polish 是一项用于最终复核的 UI 审查技能，专门在发布前检查对齐、间距、一致性、token 使用和微细节问题。它最适合那些功能已经可用，但整体感觉“差一点，还不够精致”的界面、流程或组件。你可以用它提升上线就绪度、设计系统对齐度和整体质量，而不必做不必要的重设计。

当界面显得扁平、拥挤，或布局过于机械时，layout skill 可帮助改进间距、层级和整体构图。它适合处理布局、对齐和视觉节奏相关问题，提供的是面向 UI Design 的实用布局指导，而不是泛泛的样式建议。尤其适用于需要做结构性调整、强化分组关系、优化阅读顺序的场景。

distill 可通过去除干扰、薄弱层级和冗余选项来简化杂乱的 UI 设计，让核心任务更清晰。适合在某个界面需要有纪律地做减法、理清优先级，并进行一轮聚焦式简化时使用。

harden skill 用于把 UI 设计和界面规范打磨到可上线状态，重点检查边界情况、空状态、错误处理、超长文本、本地化、权限限制以及其他真实环境中的失败场景。若你在做面向 UI Design 的 harden，希望减少布局意外并补齐更完整的交互与行为规则，这个技能会很合适。

使用 delight skill 为成功、加载、空状态和引导流程加入得体的 UI 润色、micro-interactions 与产品个性，同时不牺牲可用性或分散用户注意力。

layout 技能用于审查并优化 UI 的构图、间距、层级、对齐和视觉节奏。它尤其适合界面拥挤或结构薄弱的页面，但使用前依赖 /impeccable 先完成上下文收集。

brandkit 是一款面向品牌设计工作的高端品牌套件图像生成技能，适用于 logo 系统、品牌识别 deck、视觉规范板和带明确艺术指导的品牌展示。它专为创业公司、开发者工具、安全、游戏、消费级应用和奢侈概念等场景生成统一、工作室风格的结果而设计。当你想要的是完整、精致的品牌世界，而不是通用的 AI moodboard 时，就该用 brandkit。

industrial-brutalist-ui UI设计技能用于打造机械感、高密度界面，融合瑞士风格网格、强烈的字体对比、实用主义配色和模拟纹理。这个 industrial-brutalist-ui 指南适合看板、编辑系统和作品集页面，帮助它们呈现克制、明确的控制台式视觉气质。

bolder 可在不牺牲可用性的前提下，让过于安全、平淡的 UI 设计更有辨识度。了解何时适合使用 bolder、必须先执行的 $frontend-design 前置步骤，以及如何通过更有力的 prompts、问题诊断和可控的视觉强化来取得更好的设计效果。

arrange 可帮助诊断并优化 UI 布局、间距与视觉层级。适合用这个 arrange 技能修复界面拥挤、网格重复、构图薄弱等问题；使用前需先完成 $frontend-design 配置，并可按需补充 $teach-impeccable 上下文。

typeset skill 用于审查并优化 UI 排版，重点改进字体选择、层级、字号、字重与可读性。最适合产品 UI、仪表盘和落地页。使用前需先具备 /frontend-design 上下文；如果没有任何设计上下文，则还需要先运行 /teach-impeccable。

polish skill 可帮助团队在发布前进行最后一轮 UI 质量检查。适合在界面功能已基本完成、设计上下文也已明确之后使用，用来发现间距、对齐、交互状态、文案以及边缘场景等细节问题。

normalize skill 用于审查 UI 功能，并将其重新对齐到你的设计系统。了解 normalize 的安装选项、所需的 frontend-design 准备工作，以及它在页面、路由和组件中的实际用法。

distill 是一项用于 UI 设计精简的 skill，帮助你把页面、组件和流程收束到最核心的目标上。适合用来减少杂乱、视觉噪音和功能膨胀，但要注意，distill 依赖 /frontend-design，某些情况下还需要先使用 /teach-impeccable。