SuperAPI AI 工具集

frontend-skill

前端与建站

查看项目

更新于 10-16 03:06

技能介绍

用途:当任务质量取决于艺术指导、层级、克制、图像与动效,而非组件数量时使用。目标为交付有意图、高级且当下的界面,默认追求奖项级构图:一个大创意、强图像、稀疏文案、严谨间距与少量令人记住的动效。

主要能力与工作模型:构建前先写三件事——视觉论点(一句话描述情绪、材质与能量)、内容计划(主视觉、支撑、细节、最终行动号召)、交互论点(2-3 个改变页面感觉的动效想法)。每个区块只承担一个任务、一个主导视觉想法、一个主要要点或行动。

默认美学:从构图而非组件开始;偏好全出血主视觉或全画布视觉锚点;品牌或产品名是最响亮的文字;文案短到可秒扫;先用留白、对齐、比例、裁切与对比,再加装饰;最多两种字体,默认一个强调色;默认无卡片布局,改用区块、栏、分隔线、列表与媒体块;把首屏当作海报而非文档。

落地页默认顺序:主视觉(品牌或产品、承诺、行动号召、一个主导视觉)、支撑(一个具体功能、优惠或证明点)、细节(氛围、工作流、产品深度或故事)、最终行动号召(转化、开始、访问或联系)。主视觉规则:仅一个构图;全出血图像或主导视觉平面;品牌优先、标题第二、正文第三、行动号召第四;默认无主视觉卡片、数据条、logo 云、药丸堆或浮动仪表盘;桌面标题约 2-3 行,移动端一眼可读;文字列窄并锚定图像平静区域;图像上文字保持强对比与清晰点击目标。视口预算:若首屏含粘性/固定页眉,页眉计入主视觉,页眉加主视觉内容须在常见桌面与移动尺寸的初始视口内;使用 100vh/100svh 主视觉时减去持久 UI 装饰或改为覆盖页眉。

应用:默认 Linear 式克制——平静的表面层级、强排版与间距、少颜色、密集但可读的信息、最少装饰;仅当卡片本身是交互时才用卡片。围绕主工作区、导航、次要上下文或检查器、一个清晰强调色组织。避免仪表盘卡片马赛克、每区域粗边框、常规产品 UI 后的装饰渐变、多个竞争强调色、无助于扫读的装饰图标。

图像:图像须承担叙事;品牌、场馆、编辑页与生活方式产品至少用一张强真实感图像;偏好现场摄影而非抽象渐变或假 3D;选择或裁切有稳定色调区供文字使用;不用含嵌入标牌、logo 或排版杂乱与 UI 冲突的图像;不生成内置 UI 框架、分屏、卡片或面板的图像;需要多个时刻就用多张图而非一张拼贴;首屏需要真实视觉锚点,装饰纹理不够。

文案:用产品语言而非设计评论;标题承载意义;支撑文案通常一句短句;删减区块间重复;不把提示语言或设计评论放进 UI;每个区块一个职责:解释、证明、深化或转化;若删掉 30% 文案能改善页面就继续删。产品 UI 工具文案:仪表盘、应用界面、管理工具或操作工作区默认用工具文案而非营销文案;优先定位、状态与行动,而非承诺、情绪或品牌声音;从工作表面本身开始:KPI、图表、筛选、表格、状态或任务上下文;除非用户明确要求,不引入主视觉区;区块标题应说明该区域是什么或用户能做什么,如“Selected KPIs”“Plan status”“Search metrics”“Top segments”“Last sync”;避免产品界面上的理想化主视觉句、隐喻、活动式语言与高管摘要横幅;支撑文本一句话解释范围、行为、新鲜度或决策价值;若某句能出现在首页主视觉或广告中,改写至像产品 UI;若某区块无助于操作、监控或决策则移除。试金石:操作者只扫标题、标签与数字,能否立即理解页面。

动效:用动效创造存在感与层级,而非噪音;视觉主导工作至少交付 2-3 个有意图动效:主视觉一个入场序列、一个滚动关联/粘性/深度效果、一个悬停/揭示/布局过渡以锐化可供性。可用时优先 Framer Motion 处理区块揭示、共享布局过渡、滚动关联透明度/位移/缩放、粘性叙事、推进叙事的轮播、菜单抽屉与模态存在效果。动效规则:快速录制中可察觉、移动端流畅、快速克制、全页一致、纯装饰则移除。

硬性规则:默认无卡片;默认无主视觉卡片;简报要求全出血时不用盒装或中列主视觉;每区块不超过一个主导想法;区块不应需要许多微小 UI 装置解释自身;品牌页标题不应压过品牌;无填充文案;除非文字位于平静统一一侧,不用分屏主视觉;无明确理由不超过两种字体;除非产品已有强系统,不超过一个强调色。应拒绝的失败:首印象为通用 SaaS 卡片网格、美图但品牌存在弱、强标题无清晰行动、文字后杂乱图像、区块重复同一情绪陈述、无叙事目的的轮播、应用 UI 由堆叠卡片而非布局构成。试金石:首屏品牌或产品是否明确无误;是否有一个强视觉锚点;仅扫标题能否理解页面;每区块是否一个职责;卡片是否真有必要;动效是否改善层级或氛围;移除所有装饰阴影后设计是否仍显高级。

限制:资料未提供安装命令、平台支持、收费或价格信息,暂未提供。