frontend-skill

前端技能

当工作的质量取决于艺术指导、层级、克制、图像和动效，而非组件数量时，请使用此技能。

目标：打造感觉深思熟虑、高级且与时俱进的界面。默认采用堪称获奖作品的构图：一个核心创意、出色的图像、精简的文案、严谨的间距，以及少量令人难忘的动效。

工作模型

开始构建前，先写下三项内容：

• 视觉主张：用一句话描述氛围、质感和活力
• 内容计划：主视觉、辅助内容、细节、最终 CTA
• 交互主张：2-3 个能改变页面感受的动效构想

每个版块只承担一项任务，呈现一个主导视觉概念，并传达一个主要信息或行动。

精美设计的默认原则

• 从构图入手，而不是从组件入手。
• 优先采用通铺式主视觉，或以铺满画布的视觉元素作为锚点。
• 让品牌或产品名称成为最醒目的文字。
• 文案要精简到几秒内即可扫读完毕。
• 添加装饰元素前，先利用留白、对齐、比例、裁切和对比。
• 精简设计系统：最多使用两种字体，默认只用一种强调色。
• 默认采用无卡片布局，改用版块、分栏、分隔线、列表和媒体区块。
• 把首屏当作海报，而不是文档。

落地页

默认顺序：

1. 主视觉：品牌或产品、承诺、CTA，以及一个主导视觉元素
2. 辅助内容：一项具体功能、优惠或证明
3. 细节：氛围、工作流、产品深度或故事
4. 最终 CTA：转化、开始、访问或联系

主视觉规则：

• 只采用一种构图。
• 使用通铺式图片或占主导地位的视觉区域。
• 标准通铺规则：品牌落地页的主视觉必须从边缘延伸至边缘，不得沿用页面内边距、带边框的容器或共享的最大宽度限制；仅限制内部文字和操作栏的宽度。
• 品牌名称优先，其次是标题、正文，最后是 CTA。
• 默认不使用主视觉卡片、统计条、Logo 墙、药丸按钮堆叠或悬浮仪表盘。
• 桌面端标题控制在约 2-3 行，移动端则应让人一眼就能读清。
• 文字栏应保持窄幅，并放在图像中视觉平静的区域。
• 图像上的所有文字都必须保持足够的对比度，并确保点击目标清晰。

如果移除图片后首屏仍然有效，说明图片不够有力。如果隐藏导航栏后品牌就消失了，说明层级不够清晰。

视口空间规划：

• 如果首屏包含粘性或固定页眉，页眉也要计入主视觉的空间预算。页眉与主视觉内容的总高度必须适配常见桌面端和移动端屏幕的初始视口。
• 使用 100vh/100svh 主视觉时，应减去持续显示的 UI 装饰（calc(100svh - header-height)），或将页眉叠加在主视觉上，而不是在常规文档流中堆叠。

应用

默认采用 Linear 风格的克制设计：

• 平和的表面层级
• 清晰的排版与间距
• 少量色彩
• 信息密集但易读
• 最少的装饰元素
• 仅在卡片本身就是交互对象时使用卡片

对于应用 UI，请围绕以下内容组织布局：

• 主要工作区
• 导航
• 次要上下文或检查器
• 一种明确用于操作或状态的强调色

避免：

• 仪表盘卡片拼贴
• 每个区域都使用粗边框
• 在常规产品 UI 背后使用装饰性渐变
• 多种相互争抢注意力的强调色
• 无助于快速浏览的装饰性图标

如果某个面板可以改成普通布局且不损失含义，就去掉卡片样式。

图像

图像必须服务于叙事。

• 对于品牌、场所、编辑类页面和生活方式产品，至少使用一张有质感、看起来真实的图片。
• 优先选择实景摄影，而不是抽象渐变或虚假的 3D 物体。
• 选择或裁切图片时，应确保有一块色调稳定的区域供文字使用。
• 不要使用嵌有标识牌、Logo 或排版杂乱元素的图片，以免干扰 UI。
• 不要生成内置 UI 框架、分屏、卡片或面板的图片。
• 如果需要呈现多个时刻，请使用多张图片，而不是一张拼贴图。

首屏需要一个真实的视觉锚点。仅有装饰性纹理是不够的。

文案

• 使用产品语言，而非设计评论。
• 让标题传达核心意思。
• 辅助文案通常应是一句简短的话。
• 删除各部分之间重复的内容。
• 不要把提示词或设计评论放进 UI。
• 每个部分只承担一种职责：解释、证明、深入说明或促成转化。

如果删掉 30% 的文案能改善页面，就继续删。

产品 UI 的实用文案

如果制作的是仪表板、应用界面、管理工具或运营工作区，默认优先使用实用文案，而非营销文案。

• 优先传达定位、状态和操作，而非承诺、情绪或品牌语调。
• 从实际工作界面本身入手：关键绩效指标、图表、筛选器、表格、状态或任务背景。除非用户明确要求，否则不要引入主视觉区。
• 区块标题应说明该区域的内容或用户可以在此进行的操作。
• 好的示例：“已选指标”“计划状态”“搜索指标”“热门细分”“上次同步”。
• 除非特别要求，否则在产品界面中避免使用理想化的主视觉文案、隐喻、活动式语言和高管摘要横幅。
• 辅助文本应用一句话说明范围、行为、数据时效性或决策价值。
• 如果一句话可以出现在首页主视觉或广告中，就重写，直到它听起来像产品 UI。
• 如果某个区块不能帮助用户操作、监控或决策，就删除它。
• 检验标准：如果操作人员只浏览标题、标签和数字，能否立即理解页面？

动效

用动效营造存在感和层次，而非噪音。

视觉表现为主的设计至少应包含 2–3 处有意设计的动效：

• 主视觉中的一个入场序列
• 一个与滚动联动、粘性定位或景深效果
• 一个能强化可供性的悬停、揭示或布局过渡效果

在以下场景中，优先使用 Framer Motion（如果可用）：

• 区块显现
• 共享布局过渡
• 与滚动联动的透明度、位移或缩放变化
• 粘性叙事
• 推进叙事而非单纯填充空间的轮播
• 菜单、抽屉和模态框的呈现效果

动效规则：

• 在快速录制的视频中清晰可见
• 在移动设备上流畅
• 快速且克制
• 在整个页面中保持一致
• 如果纯属装饰，就移除

硬性规则

• 默认不使用卡片。
• 默认不使用主视觉卡片。
• 如果需求要求全出血布局，就不要使用带框或居中列式主视觉。
• 每个区块最多表达一个主导理念。
• 不应需要许多细小的 UI 元素才能解释一个区块。
• 品牌页面上的标题不应压过品牌本身。
• 不要使用填充文案。
• 除非文字位于平静统一的一侧，否则不要使用分屏主视觉。
• 除非有明确理由，否则字体不超过两种。
• 除非产品已有成熟的配色体系，否则强调色不超过一种。

应避免的失败模式

• 首屏就是通用的 SaaS 卡片网格
• 图片很漂亮，但品牌存在感薄弱
• 标题有力，却没有明确的行动
• 文字背后是杂乱的图像
• 各区块反复表达相同的情绪
• 轮播没有叙事目的
• 应用 UI 由堆叠的卡片组成，而非合理布局

检验标准

• 品牌或产品在首屏是否一目了然？
• 是否有一个鲜明的视觉锚点？
• 只浏览标题就能理解页面吗？
• 每个区块是否各司其职？
• 卡片真的有必要吗？
• 动效是否改善了层次或氛围？
• 如果去掉所有装饰性阴影，设计是否仍显高级？