SuperAPI AI 工具集

design-systems

设计与创作

查看项目

更新于 10-16 05:45

技能介绍

用途:这是一个为网页设计提供美学方向指引的技能,帮助在字体、色彩、动效和空间构图等创意决策上形成鲜明、可记忆的视觉风格,避免趋同的通用“AI 感”设计。

主要能力与框架:先理解设计语境,再确定一个大胆的美学方向。流程包括四步:目的(解决什么问题、谁使用、希望用户采取什么行动)、基调(不从固定风格清单中挑选,而应从网站主题、行业、文化与受众推导方向,像被专门聘请的设计师一样研究视觉参考、情绪板与真实世界的空间、材料和文化物件)、约束(技术框架、性能、无障碍要求、品牌规范、内容要求)、差异化(什么让设计难忘)。

绝对规则:生成内容中任何位置都不得使用表情符号,包括标题、正文、按钮文字等。

前端美学要点:字体选择应避免 Inter、Roboto、Arial、系统字体、Space Grotesk 等常见或过度使用选项,优先将特色展示字体与精致正文字体配对,字号使用一致比例(如 1.25 或 1.333),正文最小 16–18px。色彩强调统一美学,采用主导色加锐利点缀,避免紫色渐变白底、均匀彩虹色、低对比方案和通用蓝 #007bff;建议比例为 60% 主导、30% 次要、10% 点缀。动效应与网站个性一致,优先 CSS 方案,覆盖入场、悬停、持续微动、滚动触发、背景动画和文字效果等类别;每个站点选择 2–3 种技法并保持一致、克制,入场动画遵循自上而下、从左到右的阅读顺序,并始终包含 prefers-reduced-motion 无障碍处理。空间构图可运用非对称、重叠、对角线、破格和负空间。背景与视觉细节可考虑渐变网格、噪点纹理、几何图案、层叠透明、戏剧阴影、装饰边框和颗粒叠加;图标应使用与主题一致的自定义 SVG。

复杂度匹配:极繁设计需要丰富动画、多层视觉与密集样式;极简设计需要克制、精准、留白与细节考究。生成多个设计时不得收敛到相同选择,应在配色、字体、布局和氛围上有意义地变化。

限制:资料未提供安装命令、收费、平台支持或具体使用步骤等事实。