📦 Frontend Skill — 设计精美网页

先构图，再组件。

最适合

• 首屏冲击力强的精品落地页
• 强调品牌调性的官网与产品营销界面
• 需要层级与氛围的动态界面
• 需要安静、高信噪比视觉结构的应用/产品 UI

不适合

• 纯后端任务，无 UI 输出
• 以无障碍/安全审计为主要目标（请单独处理）
• 信息密度高的企业表单，且视觉叙事非目标
• 无清晰信息架构的“加更多卡片”需求

60 秒起飞检查

1) 用一句话定义视觉论点（情绪/材质/能量）。 2) 明确各区块职责：hero → 佐证 → 细节 → 最终 CTA。 3) 明确交互论点：2–3 个动态瞬间。 4) 选定字体系统（最多 2 款字体）和 1 个强调色。

核心流程

1) 落地页模式

• 首屏先放一个主导视觉锚点。
• 严格层级：品牌 → 标题 → 正文 → CTA。
• 默认避免 hero card 与卡片拼图。
• 文案短且可扫读。默认区块顺序：

1. Hero 2. 佐证/特性 3. 细节/故事/深度 4. 最终 CTA

2) 应用/产品 UI 模式

• 优先处理定位、状态、操作。
• 先搭工作区：导航 + 主界面 + 次要上下文。
• 仅当卡片本身是交互时才用卡片。
• 保持色彩克制与字体驱动的层级。

3) 图像模式

• 叙事重要时，用真实场景图。
• 为文字可读性保留平静色调区。
• hero 图内避免杂乱标语/排版。
• 除非明确要求，否则避免合成拼贴风。

4) 动态模式

只交付 2–3 个有意图的动效：

• Hero 入场，
• 滚动/粘性深度，
• 悬停/揭示/布局过渡且具 UX 价值。

动效必须移动端流畅、录屏可见；若为纯装饰则删除。

失败恢复手册

• 屏幕像通用 SaaS → 去掉卡片网格，恢复单一视觉锚点。
• 好看但品牌弱 → 把品牌行提到标题之上并放大。
• 标题强但行动弱 → 精简到 1 个主 CTA + 1 个备用。
• 布局嘈杂 → 去掉竞争点缀，减区块，收紧文案。
• 动效花哨 → 每区块只留 1 个有目的的过渡。

护栏

• 每区块只表达一个主导概念。
• 默认不用 hero card。
• UI 文字中无填充文案或提示/元注释。
• 优先用留白、比例、对比、裁剪，而非额外装饰。
• 移动端首屏一眼可读。
• 拒绝分屏 hero，除非一侧安静且适合文字。

石蕊测试

• 首屏能否一眼认出品牌/产品？
• 是否有一个强烈视觉锚点？
• 用户扫读标题后能否理解页面流程？
• 每个区块是否只有一项任务？
• 去掉装饰后是否仍显高级？

作者

Vassiliy Lakhonin