arrange

概述

什么是 Arrange 技能？

Arrange 是一项专注于提升数字界面布局、间距和视觉节奏的 UI 设计技能。它帮助你识别并修正单调的网格、不一致的间距、薄弱的视觉层次以及拥挤或对齐不良的元素。Arrange 非常适合希望打造更有意图、视觉吸引力和用户友好布局的设计师和开发者。

谁应该使用 Arrange？

• 希望优化视觉层次和布局结构的 UI/UX 设计师。
• 致力于解决间距、对齐或构图问题的前端开发者。
• 处理感觉拥挤、平淡或视觉混乱的网页或应用界面的团队。

Arrange 解决的问题

• 单调或重复的网格布局
• 任意或不一致的间距和内边距
• 薄弱或不清晰的视觉层次
• 拥挤的用户界面
• 对齐和分组问题

使用方法

安装步骤

1. 使用以下命令安装 arrange 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill arrange
   

2. 安装完成后，首先查看 SKILL.md 文件，了解详细的工作流程和指导。

入门指南

• 从 SKILL.md 中的必备准备部分开始。这包括调用 /frontend-design 以收集关键的设计背景和原则。如果没有设计背景，先运行 /teach-impeccable。
• 通过分析间距、视觉层次和网格结构来评估当前布局。使用提供的检查清单识别薄弱环节。
• 系统地规划并实施布局改进，重点关注分组、节奏和清晰的结构。

关键文件

• SKILL.md：主要工作流程和评估指南
• README.md、AGENTS.md、metadata.json：如有，提供额外背景和参考
• 任何 rules/、resources/ 或 scripts/ 文件夹，包含辅助材料

最佳实践

• 根据具体项目和设计工具调整 arrange 工作流程。
• 当用户或利益相关者提到布局问题、界面拥挤或构图不清时，使用 arrange。
• 将 arrange 与其他设计技能结合，全面提升 UI。

常见问题

什么时候应该使用 arrange 技能？

当你遇到感觉不协调、拥挤、单调或缺乏清晰视觉层次的 UI 布局时，使用 arrange。它在设计评审或新功能发布前尤其有用。

使用 arrange 前需要做哪些准备？

必须运行 /frontend-design 以收集设计背景和原则。如果项目缺乏设计背景，先按照 SKILL.md 中的必备准备部分运行 /teach-impeccable。

arrange 能否与任何设计系统或框架配合使用？

可以，arrange 提供的原则和工作流程可适配任何设计系统、前端框架或自定义 UI 项目。

哪里可以找到更多细节或示例？

打开仓库的 Files 标签，浏览完整文件树，包括 SKILL.md 及任何支持脚本或参考资料，获取更深入的指导。