前端设计技能

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

目标：交付有目的性、高级感和符合当下趋势的界面。默认采用获奖级别的构图：一个核心创意、强有力的图像、精炼的文案、严谨的间距以及少量令人印象深刻的动效。

工作模式

在构建之前，先写好三样东西：

• 视觉主题：用一句话描述氛围、材质和能量
• 内容计划：主视觉、支撑内容、细节、最终行动号召
• 交互主题：2-3 个能改变页面感觉的动效创意

每个部分只承担一项任务、一个主导的视觉创意和一个核心结论或行动。

美观的默认规则

• 从构图开始，而不是从组件开始。
• 优先使用全屏宽的主视觉或全画幅的视觉锚点。
• 让品牌或产品名称成为最显眼的文字。
• 保持文案足够简短，能在几秒钟内扫读完毕。
• 在添加装饰性元素之前，先利用留白、对齐、比例、裁剪和对比度。
• 限制设计系统：最多两种字体，默认只使用一种强调色。
• 默认不使用卡片布局。改用区块、分栏、分隔线、列表和媒体块。
• 将第一个视口视为一张海报，而不是一份文档。

落地页

默认结构顺序：

1. 主视觉区：品牌或产品、承诺、行动号召，以及一个主导的视觉元素
2. 支撑区：一个具体的功能、优势或证明点
3. 细节区：氛围、工作流程、产品深度或品牌故事
4. 最终行动号召：转化、开始、访问或联系

主视觉区规则：

• • 只使用一种构图。
  • 全屏宽图片或主导的视觉平面。
  • 规范的全屏宽规则：在品牌落地页上，主视觉本身必须边缘到边缘，不受页面内边距、框架容器或共享最大宽度的限制；只约束内部文字/操作列的宽度。
  • 顺序：品牌第一，标题第二，正文第三，行动号召第四。
  • 默认不要在主视觉区内放置卡片、数据条、Logo 云、药丸式按钮或浮动仪表板。
  • 确保标题在桌面上大约占 2-3 行，在手机上也能一眼读完。
  • 将文本列保持较窄的宽度，并锚定在图像的平静区域内。
  • 所有覆盖在图像上的文字必须保持高对比度和清晰的可点击区域。

如果去掉图片后第一个视口仍然有效，说明图片太弱。如果隐藏导航栏后品牌消失了，说明层次结构太弱。

视口预算：

• • • 如果首屏包含一个固定/粘性头部，那么该头部会计入主视觉区的高度。头部加上主视觉区的内容必须在常见的桌面和移动设备尺寸下，完全适应初始视口。
    • 当使用 100vh/100svh 的主视觉区时，需要减去持久存在的 UI 元素的高度（例如 calc(100svh - header-height)），或者将头部覆盖在主视觉区之上，而不是将其堆叠在正常文档流中。

应用界面

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

• • • 平静的表面层次
    • 强有力的字体排印和间距
    • 很少的颜色
    • 密集但可读的信息
    • 最少的装饰性元素
    • 仅当卡片本身就是交互元素时才使用卡片

对于应用界面，围绕以下要素组织：

• • • 主要工作区
    • 导航
    • 次要上下文或检查器面板
    • 一个用于表示操作或状态的清晰强调色

避免：

• • • 仪表盘式的卡片马赛克
    • 每个区域都有粗边框
    • 在常规产品界面后使用装饰性渐变背景
    • 多个相互冲突的强调色
    • 不能帮助快速扫读的装饰性图标

如果一个面板在不使用卡片样式的情况下，仅靠布局就能表达清楚含义，那就去掉卡片样式。

图像

图像必须承担叙事工作。

• • • 对于品牌、活动场地、社论页面和生活方式类产品，至少使用一张有说服力的、看起来真实的图片。
    • 优先使用现场拍摄的照片，而不是抽象的渐变或虚假的 3D 物体。
    • 选择或裁剪具有稳定色调区域的图片来放置文字。
    • 不要使用包含内置标牌、Logo 或与界面冲突的排版杂乱的图片。
    • 不要生成带有内置 UI 框架、分割线、卡片或面板的图像。
    • 如果需要展示多个时刻，请使用多张图片，而不是一张拼贴图。

第一个视口需要一个真实的视觉锚点。装饰性纹理是不够的。

文案

• • • 使用产品语言，而不是设计评论。
    • 让标题承载主要含义。
    • 支撑性文案通常应为一到两个短句。
    • 避免在各部分之间重复信息。
    • 不要在界面中包含提示语或设计评论。
    • 赋予每个部分一个职责：解释、证明、深化或转化。

如果删除 30% 的文案能让页面更好，那就继续删。

产品界面中的实用文案

当工作内容是仪表盘、应用界面、管理工具或操作工作区时，默认使用实用文案而非营销文案。

• • • 优先传达方向指引、状态信息和操作，而不是承诺、氛围或品牌语气。
    • 从工作界面本身开始：关键绩效指标、图表、筛选器、表格、状态或任务上下文。除非用户明确要求，否则不要引入主视觉区。
    • 区块标题应说明该区域是什么，或者用户可以在那里做什么。
    • 好的标题示例：“选定的关键绩效指标”、“计划状态”、“搜索指标”、“顶级细分”、“上次同步”。
    • 避免在产品界面使用宏大的标题、隐喻、营销活动风格的语言以及高管摘要式的横幅，除非特别要求。
    • 支撑性文本应用一句话解释范围、行为、数据新鲜度或决策价值。
    • 如果一句话可以出现在首页主视觉或广告中，请重写，直到它听起来像产品界面文案。
    • 如果一个区块不能帮助某人操作、监控或决策，就移除它。
    • 检验标准：如果一个操作者只扫读标题、标签和数字，他们能立即理解页面吗？

动效

使用动效来增强存在感和层次感，而不是制造噪音。

对于视觉主导的工作，至少交付 2-3 个有意的动效：

• • • 一个主视觉区的入场序列
    • 一个与滚动联动、粘性定位或体现景深的效果
    • 一个悬停、揭示或布局过渡，能增强功能的可发现性

当可用时，优先使用 Framer Motion 来实现：

• • • 区块的滚动揭示
    • 共享的布局过渡
    • 与滚动联动的透明度、位移或缩放变化
    • 粘性讲故事效果
    • 能够推进叙事的轮播，而不仅仅是填充空间
    • 菜单、抽屉和模态框的呈现效果

动效规则：

• • • 在快速录屏中能被注意到
    • 在移动端流畅运行
    • 快速且克制
    • 在全页面保持一致
    • 如果只是装饰性目的，则移除

硬性规则

• • • 默认不使用卡片。
    • 默认不在主视觉区使用卡片。
    • 当简报要求全屏宽时，不使用带内边距或居中列的主视觉。
    • 每个部分不超过一个核心创意。
    • 每个部分不应需要很多细小的界面元素来解释自己。
    • 在品牌页面上，标题不应压过品牌。
    • 不使用无意义的填充文案。
    • 不使用分屏主视觉，除非文本位于平静、统一的一侧。
    • 没有明确理由，不超过两种字体。
    • 除非产品已有非常完善的色彩系统，否则不超过一种强调色。

拒绝这些失败设计

• • • 第一印象是普通的 SaaS 卡片网格
    • 漂亮的图片但品牌存在感弱
    • 强有力的标题但没有清晰的操作指引
    • 文字背后是杂乱的图像
    • 重复相同情绪陈述的区块
    • 没有叙事目的的轮播
    • 由堆叠的卡片而非布局构成的应用界面

检验标准

• • 品牌或产品在首屏是否一目了然？
  • 是否有一个强有力的视觉锚点？
  • 仅通过扫读标题，页面能否被理解？
  • 每个部分是否只有一个职责？
  • 卡片真的有必要吗？
  • 动效是否提升了层次感或氛围？
  • 如果移除所有装饰性阴影，设计是否仍然显得高级？