SuperAPI AI 工具集

frontend-design

设计与创作

查看项目

更新于 11-03 18:56

技能介绍

用途

该技能用于在构建新 UI 或重塑现有界面时提供视觉设计指导,目标是产出有辨识度、有明确意图、不带模板感的设计方案。它把使用者定位为一家设计工作室的设计负责人:客户已拒绝陈词滥调或模板化的提案,付费购买的是独特视角,因此需要在配色、字体与版式上做出针对具体需求的、有主见的取舍,并在合理时承担审美风险。

主要能力

  • 以主题为依据:若需求未说明产品/主题,先自行确定并向客户确认;可提出一个具体主题、受众与设计的主要任务作为提案。主题所在行业、题材、材质与语境是独特视觉选择的来源。
  • 首屏设计:首屏是观者最先看到的内容,应以主题世界中最具代表性的元素开场,形式可以是标题、图片、动画、实时演示或交互时刻;并提醒“大数字+小标签+渐变”是默认做法,除非确实最优否则不用。
  • 字体系统:使用一到两种字体家族,两种时须明显区分;有意选择字体而非随手默认,按《The Elements of Typographic Style》的默认指引设定清晰的字号层级,并有意识地使用字重、字宽与字距;标题文字本身应作为设计的主动部分。默认行长少于 80 字符,衬线正文行高略高于无衬线。
  • 避免生成痕迹:列出应避免的默认排版处理,例如只给标题中单个词加斜体/加粗/变色、标签全大写、在内容上方添加不必要的排版标签。
  • 结构即信息:轮廓、边框、编号、眉标、分隔线、标签等结构装置应编码有用信息而非装饰;编号标记(01/02/03)仅在内容确为序列时使用。
  • 动效克制:非用户触发的动效应少而有目的,只用于吸引注意;一次编排好的加载序列或揭示效果优于零散特效;逐段淡入上滑、每张卡片悬停过渡是通用默认且易被读作 AI 生成;回应用户操作(打开、展开、确认)的动效是可取的。
  • 文案即设计内容:文案应服务理解与使用;从终端用户视角命名,用用户能懂的简单语言而非系统实现方式;默认主动语态,按钮名称与全流程一致;错误与空状态应说明发生了什么、如何修复,语气与品牌和受众匹配,每个文字元素只承担一项职责。

使用方式

工作分两遍进行。

第一遍:制定设计方案。 基于客户设计需求头脑风暴一个简短的设计计划,形成紧凑的令牌系统:

  • 颜色:以 4–6 个命名十六进制值描述核心基础色板。
  • 字体:字体及其角色。
  • 布局:用一句话文字描述与 ASCII 线框图构思并比较布局概念,包含对齐指导(左对齐、居中还是两端对齐)。
  • 原则:让该页面独特的高层指导。

第二遍:对照需求审查后构建。 在编写代码前审查计划:若某部分读起来像对任何相似页面都会产出的通用默认(可通过对类似提示走一遍看是否得到相近结果来检验),而非针对本需求的取舍,就修改该部分并说明改了什么、为什么。确认设计计划的相对独特性后,才按修订后的计划编写代码。

编码时注意 CSS 选择器优先级结构,避免类之间相互抵消(尤其是 .section 这类基于类的选择器与 .cta 这类基于元素的选择器,常发生在区块间距的 padding/margin 上)。

适用场景

适合新 UI 的视觉方向设定、现有界面改造时的审美重塑、需要摆脱模板感的页面设计,以及涉及配色、字体、版式、文案与动效取舍的前端设计任务。文档还记录了一组当前 AI 生成设计常见的趋同特征作为校准参考,例如近 #F4F1EA 的暖奶油底色配高对比衬线标题与陶土色强调、近黑底配亮酸绿或朱红强调、零圆角密集分栏的报纸式版式、千篇一律的圆角卡片加同一柔和灰影、以及无论主题都出现的全大写眉标、用中点连接的信息串、“WORD — 片段”式标签、近黑代替纯黑、小数据标签用等宽字体、链接与按钮后加“→”等。这些在特定需求下都合理,但属于默认而非选择;当需求明确了视觉方向时,应严格遵循需求原文,包括它要求采用其中某种外观。

限制与质量底线

  • 把大胆用在一处:让一个元素成为记忆点,其余保持安静克制,删去不服务需求的装饰。
  • 建立不声张的质量底线:移动端响应式、可见键盘焦点、尊重减弱动效、视觉可访问、配色协调。
  • 在构建过程中自我批判,环境支持时截图复核;可借鉴“出门前照镜子摘掉一件配饰”的克制思路。
  • 若便于记录,可简要记下已尝试过的方向供后续参考。
  • 每次运行技能结束时,回顾是否有步骤失败或需变通、用户是否做过有意义的纠正或拒绝、是否发现后续运行可能需要的信息;只有构成有意义改进时才提出变更,且应用前须征得用户同意。
  • 文档还提到一个面向 Matt 自有 UI、用户旅程或动效工作的本地界面分支:在该项工作前先读其界面流程,由它在当前工程阶段内选择适用的设计、UX、动效与创意引擎参考,并保留既有计划与验收关口;上文提供方的视觉指导仅作辅助参考。其本地附录与参考文档经过有意适配,并非完整的 Impeccable/LottieFiles 插件安装,不含其自动化与一刀切动效规则,来源与更新策略记录了经审查的来源与兼容性选择。

支持平台、收费方式与价格等具体信息暂未提供。