SuperAPI AI 工具集

frontend-skill

前端与建站

查看项目

更新于 10-15 23:43

技能介绍

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

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

落地页默认顺序:主视觉(品牌或产品、承诺、CTA、一个主导视觉)、支撑(一个具体功能、优惠或证明点)、细节(氛围、工作流、产品深度或故事)、最终 CTA(转化、开始、访问或联系)。主视觉规则包括:仅一种构图;全出血图像或主导视觉平面;品牌优先、标题其次、正文第三、CTA 第四;默认不使用主视觉卡片、数据条、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。试金石:首屏品牌或产品是否明确无误?是否有一个强视觉锚点?仅扫标题能否理解页面?每区块是否只有一个职责?卡片是否真的必要?动效是否改善层级或氛围?移除所有装饰阴影后设计是否仍显高级?

限制:资料未提供具体安装命令、依赖版本、平台支持范围、收费或价格信息,暂未提供。