frontend-prime

终极前端技能

每个输出都必须经过精心设计，绝不流于普通，更不能有“AI 垃圾感”。

---

1. 先设计，再编码

在编写任何代码之前，先确定：

1. 美学方向（选一个，并与产品受众相匹配）： 极简主义 · 编辑式繁复风 · 复古未来主义 · 自然有机风 · 奢华精致风 · 趣味活泼风 · 粗野主义 · 装饰艺术风 · 暗黑忧郁风 · 低保真杂志风 · 手工质感风 · 瑞士／国际主义风 · 新拟态玻璃风 · 工业风 · 柔和粉彩风

2. 一个令人难忘的元素：滚动动画、大胆的字体设计或微交互——总之要有让人印象深刻的东西。

3. 然后彻底贯彻。 敷衍的设计 = 普通的输出。

---

2. AI 垃圾感黑名单

这些特征会让输出立刻显得像 AI 生成的。绝不使用：

• 白色卡片上的紫／蓝渐变
• 每个元素都用完全相同的 rounded-xl
• 完全居中、对称，毫无视觉张力的布局
• 所有元素都用 text-gray-600
• 三列整齐排列、高度完全相同的卡片网格
• 彩虹色或均匀分布的配色方案
• 配有图库插画占位图的通用首屏

务必做到：

• 加载有辨识度的 Google Fonts（Instrument Serif、DM Sans、Clash Display、Bricolage Grotesque、Syne、Fraunces、Cabinet Grotesk、Satoshi、Young Serif、Outfit）
• 以一种主色承担 80% 的视觉效果，再搭配一种鲜明的强调色
• 采用不对称布局、打破网格的元素和强烈的尺寸对比
• 通过渐变网格、噪点纹理、玻璃拟态或纵深层次营造氛围
• 将充足的留白作为设计元素
• 大标题使用负 letter-spacing，标题使用 text-wrap: balance
• 正文文本设置 max-width: 65ch、line-height: 1.5–1.7

---

3. 色彩与主题——正确处理

使用具有语义名称的 CSS 自定义属性定义颜色。绝不在组件中硬编码十六进制值。

[data-theme="light"] {
  --bg-primary: #fafafa; --bg-secondary: #ffffff;
  --text-primary: #18181b; --text-secondary: #52525b;
  --accent: #2563eb; --border: #e4e4e7;
}
[data-theme="dark"] {
  --bg-primary: #09090b; --bg-secondary: #18181b;
  --text-primary: #fafafa; --text-secondary: #a1a1aa;
  --accent: #3b82f6; --border: #27272a;
}

深色模式规则：层级越高，表面颜色越浅；将强调色的饱和度降低约 15%；使用边框而非阴影区分层级；提供浅色／深色／系统主题切换；将设置持久化到 localStorage，并在绘制前应用。

---

4. SEO——Claude 总会忘记

每个页面都需要：

<title>Page Title — Brand</title>
<meta name="description" content="150-160 chars">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title/description/image/url" ...>
<meta name="twitter:card" content="summary_large_image">

另外还需要：JSON-LD 结构化数据、sitemap.ts + robots.ts、每页一个 h1、标题层级不得跳过、描述性 alt 文本、简洁的小写连字符 URL，以及用于国际化的 hreflang。

在 Next.js 中：使用带有 metadataBase、openGraph、twitter 和 alternates.canonical 的 metadata 导出。

---

5. 快速提醒

• 动效：入口动画采用错开效果；所有交互元素都要有悬停状态；微交互使用 0.2s ease；始终遵循 prefers-reduced-motion
• 移动端：采用移动端优先设计；用 clamp() 实现流式字号／间距；使用 dvh 而非 vh；触控目标为 44×44px
• 无障碍：使用语义化 HTML；操作使用 <button>／链接使用 <a>；图标按钮添加 aria-label；对比度达到 4.5:1；支持完整的键盘导航
• 性能：使用 font-display: swap；延迟加载图片并设置尺寸；使用 content-visibility: auto；LCP<2.5s
• 表单：始终显示标签；在失去焦点时验证；提供有帮助的错误消息；设置正确的 input type + autocomplete
• 错误：为每个区块设置错误边界；自定义 404/500 页面；用 toast 提供反馈（成功消息自动消失，错误消息持续显示）
• 安全：设置 CSP 响应头；绝不使用未经净化的 dangerouslySetInnerHTML；验证 href 中的 URL；身份验证使用 httpOnly cookie；在服务端进行验证