SuperAPI AI 工具集

anthropic-frontend-design

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:在构建新 UI 或重塑现有界面时提供视觉设计指导,帮助确定美学方向、字体排印与整体设计决策,使界面具有针对具体主题的独特视觉识别,而非套用模板化风格。

主要能力:

  • 从主题本身出发做设计:先明确产品/主题、受众与设计的主要任务,再据此选择配色、字体与布局。
  • 设计原则:首屏(hero)应呈现主题世界中最具代表性的内容;字体承载页面个性,需刻意选择字体并建立清晰的字号层级;正文行宽默认小于 80 字符,衬线体可略长并配更大行高。
  • 视觉结构即信息:轮廓、边框、编号、分隔线等结构元素应编码内容信息而非装饰;编号标记仅在内容确为序列(如步骤、时间线)时使用。
  • 动效克制:非用户触发的动效应少而精,用于吸引注意;响应式、键盘焦点可见、尊重减少动效、色彩可访问性等作为质量底线。
  • 文案写作:文字是设计内容而非装饰,从最终用户视角命名,默认使用主动语态,按钮与结果用词一致,错误与空状态给出明确指引,语气口语化、句式简洁。

使用方式:资料给出两阶段流程。先根据设计简报做一份简短设计计划,包含颜色(4–6 个命名十六进制值)、字体及其角色、布局概念(可用一句话描述与 ASCII 线框图比较,并给出对齐方式)、以及让页面独特的高层原则;随后对照简报审查该计划,若某部分像通用默认方案则修改并说明改动原因,确认相对独特性后再写代码。写代码时注意 CSS 选择器特异性,避免类之间相互抵消(尤其区块与元素选择器的内外边距)。构建过程中自我批判,环境支持时可截图审查。

适用场景:新建界面、改版现有界面、需要为具体主题建立独特视觉识别的设计任务。

限制:资料未提供安装命令、平台支持、收费或价格信息;也未给出具体代码示例。资料中提到的常见 AI 生成风格特征(如暖米色背景配高对比衬线体与陶土色强调、近黑背景配单一亮色强调、报纸式细线布局、SaaS 卡片套件、全大写眉标等)仅作为需避免的默认倾向,若简报明确要求某种外观则应以简报为准。