SuperAPI AI 工具集

ui-refactor

设计与创作

查看项目

更新于 10-15 12:26

技能介绍

用途

UI Refactoring 是一个战术性的用户界面设计指南技能,用于修复布局、选择颜色与字体,并创建专业的 UI。它把界面设计视为可拆解、可执行的逻辑规则,而不是依赖“艺术天赋”,优先考虑清晰度、层级和系统化。

当用户提出“让这个看起来更专业”之类的需求,或需要调整界面布局、配色、字体时,可使用该技能。

核心工作流

  1. 功能优先:不要从设计“外壳”(导航栏、侧边栏)开始,而应从具体功能入手(例如搜索表单、联系人卡片)。
  2. 低保真:初期忽略颜色、阴影和字体,用粗马克笔或基础线框图以灰度设计,先解决布局与间距问题。
  3. 定义系统:不要使用任意数值,立即为间距、字体和颜色建立受限的系统。
  4. 细化:应用具体战术处理层级、深度和打磨。

领域专项战术

技能提供以下参考文件,用于查询具体实现规则:

  • 让元素突出或融入:参见 hierarchy.md(大小、字重、对比度、语义)。
  • 留白与对齐:参见 layout-spacing.md(网格、间距刻度、密度)。
  • 文字与字体:参见 typography.md(字号刻度、行高、字体)。
  • 颜色与调色板:参见 color.md(HSL、饱和度、可访问对比度)。
  • 图像、阴影与打磨:参见 depth-and-polish.md(光源、素材、收尾)。

快速启发式

  • 限制选择:如果在两个选项之间无法决定,说明选择过多。将输入(颜色、字号、间距)约束到预定义的刻度中。
  • 个性:
    • 严肃/优雅:衬线字体、锐利边角、金色/蓝色、正式语言。
    • 活泼/友好:圆润无衬线字体、大圆角、粉色/橙色、随性语言。
  • 复杂度:不要先为边缘情况设计。先设计“快乐路径”(简单版本),再针对复杂度迭代。

适用场景

适用于需要修复界面布局、选择配色与字体、建立间距与字号系统、提升界面专业度的设计任务,尤其适合希望以系统化规则而非纯审美直觉来改进 UI 的场景。

限制

资料未提供该技能的具体安装方式、支持平台、收费模式或价格信息,暂未提供。