用途:当任务对视觉质量的要求高于组件数量时使用,适用于落地页、网站、应用、原型、演示或游戏 UI。
主要能力:提供一套前端设计工作模型与默认规范。构建前先写三件事:视觉论点(一句话描述氛围、材质与能量)、内容计划(hero、support、detail、final CTA)、交互论点(2-3 个改变页面感觉的动效想法)。每个区块只承担一个任务、一个主导视觉想法和一个主要结论或行动。
默认规范:从构图而非组件出发;优先全出血 hero 或全画布视觉锚点;品牌或产品名是最响亮的文字;文案短到可秒扫;先用留白、对齐、比例、裁切和对比,再加装饰;最多两种字体,默认一个强调色;默认无卡片布局,用区块、分栏、分隔线、列表和媒体块;把首屏当作海报而非文档。
落地页默认顺序:Hero(品牌或产品、承诺、CTA、一个主导视觉)、Support(一个具体功能、优惠或证明点)、Detail(氛围、工作流、产品深度或故事)、Final CTA(转化、开始、访问或联系)。Hero 规则:仅一个构图;全出血图像或主导视觉平面;品牌页 hero 必须边到边,无继承页面边距、框架容器或共享最大宽度,只约束内部文字/行动列;品牌第一、标题第二、正文第三、CTA 第四;默认无 hero 卡片、数据条、logo 云、药丸堆或浮动仪表盘;桌面标题约 2-3 行,移动端一眼可读;文字列窄并锚定图像平静区域;图像上文字保持强对比和清晰点击目标。
应用 UI:默认 Linear 式克制——平静的表面层级、强排版与间距、少颜色、密集但可读、最少装饰,仅当卡片本身是交互时才用卡片。围绕主工作区、导航、次要上下文或检查器、一个清晰强调色组织。避免仪表盘卡片马赛克、每区域粗边框、常规产品 UI 后的装饰渐变、多个竞争强调色、不改善扫读的装饰图标。
图像:必须做叙事工作。品牌、场地、编辑页和生活产品至少用一张强真实感图像;优先实景摄影而非抽象渐变或假 3D;选择或裁切有稳定色调区域供文字使用;不用带内嵌标牌、logo 或排版杂乱与 UI 冲突的图像;不生成带内置 UI 框架、分屏、卡片或面板的图像;多个时刻用多张图而非一张拼贴;首屏需要真实视觉锚点,装饰纹理不够。
文案:用产品语言而非设计评论;标题承载意义;辅助文案通常一句短句;删减区块间重复;不把提示词语言或设计评论放进 UI;每个区块一个职责:解释、证明、深化或转化;删掉 30% 文案若改善页面就继续删。产品 UI 用实用文案:优先定位、状态和行动,而非承诺、情绪或品牌声音;从工作表面本身开始(KPI、图表、筛选、表格、状态或任务上下文),除非用户明确要求否则不引入 hero;区块标题说明区域是什么或用户能做什么,如“Selected KPIs”“Plan status”“Search metrics”“Top segments”“Last sync”;避免产品表面上的理想化 hero 句、隐喻、活动式语言和高管摘要横幅;辅助文字一句话解释范围、行为、新鲜度或决策价值;若句子能出现在首页 hero 或广告中,改写为产品 UI 语气;若区块无助于操作、监控或决策则移除。
动效:用动效创造存在感和层级而非噪音。视觉主导工作至少 2-3 个有意动效:hero 一个入场序列、一个滚动联动/粘性/深度效果、一个悬停/揭示/布局过渡强化可供性。可用时优先 Framer Motion 处理区块揭示、共享布局过渡、滚动联动透明度/位移/缩放、粘性叙事、推进叙事的轮播、菜单抽屉模态存在感。动效规则:快速录制中可察觉、移动端流畅、快速克制、全页一致、纯装饰则移除。
硬性规则:默认无卡片;默认无 hero 卡片;简报要求全出血时不用盒装或中列 hero;每区块不超过一个主导想法;区块不应需要许多微小 UI 装置解释自己;品牌页标题不应压过品牌;无填充文案;除非文字在平静统一一侧,否则不用分屏 hero;无明确理由不超过两种字体;除非产品已有强系统,否则不超过一个强调色。
拒绝的失败:通用 SaaS 卡片网格作为第一印象;美丽图像但品牌存在感弱;强标题但无清晰行动;文字后杂乱图像;重复同一情绪声明的区块;无叙事目的的轮播;由堆叠卡片而非布局构成的应用 UI。
检验:首屏品牌或产品是否明确无误?是否有一个强视觉锚点?仅扫标题能否理解页面?每个区块是否一个职责?卡片是否真的必要?动效是否改善层级或氛围?移除所有装饰阴影后设计是否仍显高级?
限制:资料未提供具体安装命令、平台支持、收费或价格信息。