gemini-frontend-design

Gemini 前端设计

出色的网页设计有鲜明的视觉主张，首屏围绕页面的实际用途量身打造，并让排版、比例、色彩、图像和动效构成完整体验，而非依赖装饰性的 UI 外框。开篇就确立清晰的方向，从上到下始终保持一致的精湛水准，并在完成前检查页面的实际渲染效果。

1. 坚定采用量身打造的视觉方向

• 遵循明确的风格要求；否则，根据主题确定美学方向：
  • 当用户要求特定外观、氛围、时代感或克制程度（例如极简、粗野主义、活泼或编辑风格）时，应充分体现这些要求。
  • 当美学方向开放时，应根据主题的真实材质、环境和受众来选择配色、对比度和布局节奏，而不是依赖泛泛的类别印象。
  • 探索米色以外的颜色：模型常常会自动选用暖米色或奶油色搭配铁锈色／陶土色（即使提示词只提到 “手工制作”、“工艺”、“食物”、“温暖” 或某个复古年代），或深石板色搭配霓虹紫色光效。除非设计要求明确指定米色或深色霓虹风格，否则应探索更丰富的色彩范围：大胆的色块组合；深烘焙色、森林色、墨色或海洋深色；冷调建筑石材色或银色；阳光感柔和色彩；或明亮纯净的画廊光感。
• 导航与有目的的配色：
  • 桌面端导航应保持在一行紧凑显示，并让品牌标题、报头或文字标识明显比菜单链接更醒目（字号更大或字重更粗）。对于以主视觉为核心的页面，让主视觉区域、图片或渐变无缝延伸至顶部边缘（y = 0），并置于无边框页眉栏后方；如果页眉在滚动时固定，则滚动后应与页面内容清晰区分，避免内容尴尬地被导航链接遮挡。
  • 在现有代码库中，应遵循其既有框架和设计令牌；从头开始时，应定义清晰的主题令牌（:root CSS 变量或 Tailwind @theme），用于页面背景、低对比度次级表面、主要文本、弱化文本（对比度达到 WCAG AA 4.5:1），以及一种经过审慎选择的强调色。只有在真正的交互状态或语义状态中，才使用额外的状态颜色。
• 严格控制正文的 3 种字号，并灵活处理首屏内容：
  • 整个项目最多使用 2 种字体：要么使用 1 种适配性强、可覆盖多种字重的无衬线字体，要么采用有明确设计意图的 2 种字体组合，并通过 <link rel="preconnect">、@font-face 或 next/font 清晰加载。不要为价格、计时器或计数额外添加第 3 种等宽字体；除非构建的是代码、文档或终端工具，否则应在正文字体上使用 font-variant-numeric: tabular-nums。
  • 有意选择字体：选择符合主题特质的字体，不要默认给每个创意类或消费类设计要求都搭配展示型衬线字体和通用无衬线字体；几何风格、新无衬线风格或富有表现力的无衬线展示字体，可能更适合作为主要字体。
  • 页面正文最多限定 3 种字号（例如 --text-heading、--text-body、--text-sm，或 3 个统一的工具类比例级别）；<h3> 子标题、按钮和标签应通过字重、字体系列和文本颜色加以区分，而不是另设 20px-24px 的中间字号级别（只有在用户明确要求高密度仪表板或多列数据表时，才允许使用第 4 种紧凑字号）。首屏主视觉展示文字（或页面的主 <h1>）以及导航栏品牌文字标识不计入这 3 种字号限制，因此可使用醒目的大型建筑感字级；但首屏上方不得出现小于 13px（0.8125rem）的文字。
  • 正文段落和列表使用统一字号：所有正文段落和正文项目符号／编号列表都应使用相同的正文字级；不要将连续段落拆分成一个放大的 .lead 段落和其下较小的段落，也不要把正文项目符号列表缩小到说明文字的字号。UI 标签和表格标题使用句首字母大写格式（避免使用拉开字距的 ALL CAPS 微型标签），正文宽度不超过 65ch，展示文字的字距收紧至 -0.02em 到 -0.05em。

2. 让开场界面匹配内容形式（值得时再打造醒目的主视觉）

• 当即时呈现是重点时，跳过主视觉横幅：并非每个网站都适合用全屏主视觉横幅开场。新闻首页、博客、仪表板、分析控制台、文档、搜索或目录索引、实用工具以及极简简历都应直接呈现实时内容、报头 + 故事网格、工作区或排版精美的文档页面——绝不要把实际文章、控件或数据压到 100vh 的营销横幅下方。让醒目的报头／标题比例、利落而富有张力的网格和主视觉图片撑起首屏。
• 需要主视觉的页面（品牌、产品、店铺、活动、作品集、长篇故事），不要再用 50/50 分栏模板：不要把首屏主视觉拆成两栏：一侧放置左对齐的 H1 + 长段落 + 按钮 + 带下划线的链接 + 水平线 + 3-4 列底部统计数据，另一侧放置媒体框。把 <h1> 困在半宽栏中会削弱其存在感，让所有网站看起来都像同一套模板——让标题和主视觉占据视口的全部宽度、居中铺陈，或营造纵深感。
• 让主视觉文案简练有力，为大字留出空间：在主视觉主导的页面中，让超大展示字体（字数允许时使用 clamp(3.5rem, 7.5vw, 8rem)，行高紧凑，设为 0.9-1.0）或全幅图片承担主要表现。为 <h1> 搭配最多 1-2 行简短说明文案（不超过 25 个词）和一个明确的主要操作（或一个即时交互画布）——主视觉底部绝不要再加上 3-4 项 KPI／规格页脚条或水平分隔行。
• 主视觉空间布局示例（可自由调整、组合或创新——切勿按业务类型机械套用）：
  • 居中恢弘标题 + 宽幅交互舞台：宽幅居中展示的 <h1>，横跨视口宽度的 70%-92%（可选择在 <h1> 行内的字词之间嵌入镂空人像、动态视觉卡片或动画 token），搭配 1-2 行简洁居中文案和一个按钮；下方呈现宽阔（80%-100%）的交互工作台、触感式预览或全幅舞台，并使其首屏可见。
  • 全幅摄影或动态画布主视觉：从 top: 0 开始，以无边框页眉为背景，铺满视口边缘（width: 100%，min-height: 100dvh）的摄影、肖像或交互式流体／着色器画布；将展示字体和 CTA 居中或锚定在地平线位置，清晰地置于高对比度的留白区域（例如下方三分之一区域或正中央）。
  • 层叠纵深与前景遮挡：超宽或恢弘的展示字横跨屏幕边缘，置于中央镂空主体、雕塑感产品或交互对象之后（使用 z-index 进行纵深分层），并将醒目的标题和主要操作锚定在下方地平线处。
  • 满版海报或贯穿两角的视觉编排：使用超大、紧密堆叠的海报式字体占据屏幕大部分区域，搭配醒目的色块、顶部边缘的绘画式渐变、延伸至视口边缘之外的图形，或在开放空间中营造从角到角的对角标题张力。
• 富有表现力／动感的主视觉排版：在有助于提升主视觉表现时，运用有意设计的文字动效——逐行／逐词错落显现、弧形 <svg><textPath> 丝带、细微的字重或字距响应，或行内动画 token——同时确保标题在静止时清晰可见且易于阅读（绝不能卡在 opacity: 0），并遵循 prefers-reduced-motion。
• 让首屏以下的内容保持同等水准：将首屏的色彩张力、表面工艺和定制交互一路延续到页脚；通过全幅舞台、交互工具、不对称编辑式分栏和聚焦阅读段落来调整节奏，而不是从首屏开始就落入通用的三列卡片布局。

3. 艺术指导的图像与适度的动效

• 自定义视觉素材（generate_image）：
  • 在控件密集的工作区中，避免使用会分散注意力的装饰性照片。若图像确有必要，且有图像生成工具（例如 generate_image）可用，请生成自定义视觉素材并保存在项目内，使用相对于项目的路径，每个项目使用一张独特的视觉素材。若没有图像生成工具，请精心制作专属的内嵌 SVG、CSS/Canvas 视觉素材，或使用用户提供的素材——切勿猜测外部图像 URL，也不要硬编码本机文件系统路径。
  • 让生成图像的宽高比（"16:9"、"4:5"、"3:2"、"1:1"）与 CSS 容器匹配，确保整组图像的光线与配色一致，并围绕主体所属的真实领域撰写 1-3 句平实描述。设计全出血式主视觉照片或抠图主体时，应留出干净的负空间，或让主体与背景清晰分离，以便叠加或分层的文字轻松达到 WCAG AA 对比度要求，而无需使用模糊的全屏深色遮罩。
• 滚动与 UI 动效：
  • 在能提升叙事效果时，可考虑采用连贯且由内容驱动的滚动体验（例如固定舞台随滚动逐步展示实时示意图或产品视图，或通过 animation-timeline / requestAnimationFrame 实现与滚动联动的渐显效果），并妥善适配笔记本电脑与手机屏幕。在实用工具、新闻流、食谱、数据视图或侧边栏导航菜单中，应保持原生且即时的滚动体验。
  • 交互过渡应简洁迅速（140ms-240ms，使用类似 cubic-bezier(0.22, 1, 0.36, 1) 的平滑缓出效果，切勿使用 ease-in 或 transition: all），对 transform / opacity / clip-path 添加动画，避免闲置时循环浮动，并遵循 @media (prefers-reduced-motion: reduce) 设置。

4. 应避免的 UI 与文案模式

• 不要在标题前添加眉题、装饰性标签或主视觉规格条： 章节应直接以 <h1> 或 <h2> 开头，不要在标题上方放置 .eyebrow/.kicker 标签、ALL CAPS 引导语或 "地点 · 批次 · 状态" 之类的行；不要在标题上方、图片上或卡片内添加非交互式的 装饰徽章、标签或类别标记，无论其形状如何（圆角胶囊或 方形／带边框的盒子）；也不要在主视觉区域底部加上 3-4 列的 统计信息／元数据栏。应通过纯文字排版层级传达卡片和章节元数据， 并将带边框或胶囊形状留给交互控件（或数据表和 API 参考中具有 实际语义的状态单元格）。
• 不要堆满按钮或嵌套卡片：营销和内容章节最多放一个主要 CTA 按钮 （除非工作流确实需要两个不同操作，否则不要总是为每个主要按钮 自动配上第二个带下划线的链接或幽灵按钮）。访客需要在模式、 尺寸、筛选条件或设置之间选择时，应使用非按钮式选择控件， 例如相连的分段切换控件、标签页、单选按钮、开关、<select> 或 直接画布交互，而不是一组彼此独立的带边框按钮。使用留白、 1px 分隔线或表面色调区分内容，不要在卡片内再嵌套带边框的卡片。
• 不要添加装饰性编号或伪造的遥测信息：除非步骤确实构成顺序， 否则不要在标题前加上 01、02、[ 01 / 04 ] 或罗马数字； 省去虚构的 "LIVE" 圆点、"SCROLL" 提示或旋转的边缘文字。
• 文案应直接面向客户：清晰说明产品的功能及其帮助用户的方式， 删除哲学式宣言、填充词（“无缝”、“提升”、“焕然一新”）、 每个名词前堆叠的形容词，以及对自身设计的自我评论。标题应以 用户收益而非原始规格开头（"轻量外壳"，而不是 "2.6 kg 机舱重量"）， 标题应保持完整，不要用 <br><em> 拆分斜体，也要避免在生成的文案中 使用 em 破折号或两侧带空格的 en 破折号（始终原样保留用户提供的文本）。

5. 交付前检查清单与整页视觉评审

1. 完成前，逐项审查代码和文案：

   • 开篇格式契合度：内容／工作区类格式（新闻、博客、文档、仪表板、工具、简历）应直接呈现实际内容，不设营销主视觉横幅；主视觉页应采用醒目的非分栏构图，并延伸至 y = 0，辅助文案不超过 25 个单词，设置一个主要操作，且底部不设 KPI／规格条。
   • 字体排版规范：字体系列最多 2 种（除非制作代码、文档或终端工具，否则使用 tabular-nums，而非第 3 种等宽字体）；主视觉下方正文的字号层级最多 3 种（仅在要求制作密集型仪表板／表格时可用 4 种；主视觉 <h1> 和导航栏品牌字标不计入）；所有段落和列表的正文大小保持一致；UI 标签采用句首字母大写格式；首屏不出现小于 13px（0.8125rem）的文字。
   • 不添加任何装饰性 UI 杂项：各区块直接以 <h1>／<h2> 开头（不添加眉题）；不添加任何形状的装饰性非交互标签、徽章或类别标记（无论是圆角还是方形／矩形）；不添加装饰性的 01／02／罗马数字标题前缀或虚假的 "LIVE"／"SCROLL" 提示；每个内容区块最多设置一个主要 CTA 按钮（模式／筛选／尺寸选项使用非按钮控件）；不添加嵌套卡片框。
   • 文案与过渡规范：标题（<h1>–<h3>）应以用户收益而非原始数字或规格开头（例如 "Instant local reasoning"，而不是 "256 GB RAM Tier"）；标题不得通过 <br><em> 斜体拆分；HTML 和 JS 中生成的文案不得含有破折号或带空格的短破折号；CSS 过渡应明确指定属性（不得使用 transition: all／transition-all）；并遵循 @media (prefers-reduced-motion: reduce) 设置。

2. 检查不同区块和视口下渲染的网站：

   • 若有浏览器或截图工具可用，请运行本地开发服务器或 HTTP 服务器，以便加载 Web 字体和项目资源；截取桌面端（开篇视口，以及在真实桌面视口高度下滚动至首屏以下的区块）和 390x844 移动端视图，并直接检查渲染后的截图。
   • 确认桌面端导航保持单行、滚动后的页眉分隔清晰、文字和视觉元素之间没有冲突、直至页脚都保持鲜明的视觉表现和 3 级正文层次，并确保桌面端和移动端均无水平溢出或显示文字被裁切。集中进行一轮修复。