frontend-design

这项技能旨在指导你创建独特、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并以非凡的细致程度打磨美学细节，做出富有创意的选择。

技术栈识别

识别项目的技术栈，并采用相应的实现方式。动手编写前，先阅读现有配置文件（package.json、tailwind.config.*、globals.css、Blade 布局）。

Next.js / App Router 项目

• 默认使用服务器组件；仅在需要状态或交互时使用 'use client'
• 如果项目自带 CSS 设计系统，就使用它——不要引入 Tailwind
• 如果项目使用 Tailwind，就使用它——不要另行引入一套并行的自定义系统
• 优先使用结合 Intersection Observer 的纯 CSS 动画，而非动画库
• 复用现有设计令牌（--color-*、--space-*、--font-*、--ease-*），不要自行发明新的令牌

Laravel 项目（Blade + Alpine / Livewire）

• 使用带组件语法（<x-button>、<x-layout>）和插槽的 Blade 模板
• Tailwind CSS 是标准方案——除非项目已有自定义 CSS，否则不要额外添加
• 使用 Alpine.js 管理客户端状态；如果项目中有 Livewire，也可以使用它
• 如果项目使用 Tailwind JIT，请记住：新工具类必须出现在被扫描的文件中，才能打包进资源文件。添加新类后运行构建。

独立页面（落地页、工具、微型网站）

• 使用纯 HTML/CSS/JS，自包含且无需构建步骤
• 创作自由度最高——大胆的美学实验最适合在此施展

设计思考

编写代码前，先理解上下文并确定明确的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 调性：与项目现有美学风格保持一致；如果是从零开始，就选定一个方向：极简主义、奢华精致、编辑／杂志风、复古未来主义、粗野主义／原生风、装饰艺术／几何风、工业／实用主义等。
• 约束：使用什么技术栈？服务器组件还是客户端组件？有哪些现成的设计令牌？
• 差异化：什么能让人记住这个界面？有什么细节会让人眼前一亮？

至关重要：选择明确的概念方向，并精准贯彻。大胆繁复和精致极简都行得通——关键在于有意为之，而不是强度大小。

然后编写可用的代码，确保它：

• 达到生产级水准且功能完备
• 视觉出众、令人难忘
• 风格协调，具有明确的审美立场
• 每个细节都经过细致打磨

前端美学指南

重点关注：

• 字体排印：选择契合场景的字体。如果项目已有成熟的字体搭配，就沿用它；否则，选择独特且富有个性的字体——避免使用平淡无奇的默认字体（Arial、Roboto，以及非刻意选用的系统字体）。搭配展示字体与精致的正文字体。
• 色彩与主题：采用协调统一的配色方案，并使用 CSS 变量保持一致性。与其采用谨慎、均匀分布的配色，不如使用主导色并搭配鲜明的强调色。
• 动效：优先使用纯 CSS 动画。聚焦于影响显著的时刻——一次精心编排、带有错落渐显效果的页面加载，比零散的微交互更能带来惊喜。使用滚动触发效果和出乎意料的悬停状态。一个可靠的默认设置是：缓动曲线 cubic-bezier(0.16, 1, 0.3, 1)，持续时间 400ms。
• 空间构图：尝试出人意料的布局、不对称、重叠、斜向流动、打破网格的元素，以及宽裕的留白或经过控制的密集排布。
• 背景与视觉细节：营造氛围与层次感。在有助于设计的地方运用渐变网格、噪点纹理、几何图案、多层透明效果、戏剧化阴影、装饰边框和颗粒叠加。

2026 年美学基准（区分高端设计与泛泛的 AI 垃圾内容）

2026 年主流的网页美学是克制有度，而非追逐炫目的潮流。发布前，请用以下标准审视设计：

基础原则（先设定这些）：

• 用 OKLCH 而不是 HEX/HSL 构建色彩。 OKLCH 在感知上均匀——相同的亮度值在不同色相下看起来一样亮，渐变不会变得浑浊，深浅色调也能保持原有色相。这是色彩工作流中最重要的实用升级（参见 references/design-tokens.md）。
• 以近中性色为基础，搭配一种克制的强调色。 Linear/Stripe/Vercel 的模式：屏幕以中性色为主，品牌色只占 10%，用于 CTA 和强调，而非成为使用最多的颜色。
• AI 设计的头号破绽是“科技直男渐变”——近黑背景上的紫→蓝网格渐变（源自 OpenAI/Anthropic/Midjourney 的风格，如今在 ProductHunt 上随处可见）。避免使用。选择具有品牌特色的渐变体系，并用带有微妙色调的近黑色（暖炭灰、深海军蓝）替代 #000。

推荐：

• 将排版作为结构，而非装饰——在明确的比例体系中建立连贯的层级
• 按 4/8px 网格有意安排间距；留白是刻意设计的元素
• 使用克制的配色，以鲜明对比取代高饱和度
• 将编辑级品质的图像作为内容处理，而非图库装饰
• 让动效增强含义——一套协调的页面加载和随滚动触发的显现效果，胜过零散的微小点缀
• 将性能视为美学的一部分——快速的 LCP 和稳定的 CLS 让人感觉更高端

避免：

• 无谓的动画、滚动劫持、为了视差而做的视差效果
• 用装饰性字体代替缺失的层级结构
• 过度饱和的渐变大杂烩（尤其是白底薰衣草色的 SaaS 模板风格）
• 泛泛的图库图片、毫无生气的 3D 球体、默认表情符号图标
• “看起来不错，但加载要 8 秒”的设计

灵感来源（按问题查找，而非漫无目的地浏览）

遇到具体的 UI 问题，不知道如何解决时，可以参考已上线产品的解决方案，再开始从头设计。把它们当作参考，而非模板：

• SaaS 落地页 → saaspo.com、saaswebsites.com、land-book.com、lapa.ninja、landingfolio.com
• 真实产品 UI / SaaS 仪表板 → mobbin.com、saasframe.io、designvault.io、refero.design、interface-index.com
• 真实用户流程（从引导到结账的视频） → pageflows.com、uisources.com、theappfuel.com
• 微交互 / 细节设计 → designspells.com、60fps.design、detailsmatter.framer.website、nicelydone.club、ripplix.com
• 深色模式产品 UI → darkmodedesign.com、godly.website、awwwards.com
• 主视觉 / CTA / 导航子模式 → supahero.io、cta.gallery、navbar.gallery
• 移动应用 UI → Mobbin（移动端）、appshots.design、scrnshts.club、paywallpro.app
• 获奖创意网页 → awwwards.com、thefwa.com、siteinspire.com、hoverstat.es
• 电子邮件 → reallygoodemails.com · 数据可视化 → datavizproject.com

**使用方法：**研究其中的模式（为什么主视觉显得高端？字体节奏如何？动效放在哪里？）。不要逐像素照抄。目标是建立个人视觉词汇，而不是收集临摹素材。

应避免的反模式

• 千篇一律的 AI 美学：模板化布局、可预测的组件模式
• 陈词滥调的配色方案：不加思考地套用白底薰衣草色 SaaS 渐变
• CSS 足以胜任时使用动画库
• 项目已有自定义设计系统时使用 Tailwind
• Laravel/Tailwind 项目中编写自定义 CSS
• 现有设计令牌适用时添加新的 CSS 变量
• 在不需要状态或交互的组件上添加 'use client'
• 发布 UI 前不检查 LCP/CLS —— 在 2026 年，慢就是丑

参考文档——按需加载

references/ 中有四份深入参考文档。任务需要时，阅读相应文档——不要一开始就全部加载。

• references/design-tokens.md — OKLCH 色阶、三级令牌架构、可直接使用的 Tailwind v4 @theme 代码块、间距／字体／圆角比例，以及通过亮度控制深色模式层级。搭建设计系统或定义令牌时加载。
• references/premium-rubric.md — 12 项高级质感筛选标准（前 600 毫秒、字体节奏、色彩规范、分层阴影、焦点环、空状态、标志性细节），以及明确列出的反 AI 垃圾设计 FAIL/PASS 判据。发布前用于自评构建成果。
• references/motion-library.md — 缓动曲线目录（含精确的 cubic-bezier）、按意图划分的时长、不对称的进入／退出规则、可直接复制的模式（悬停抬升、交错显现、模态框进入、闪光），以及 prefers-reduced-motion 代码块。添加动画或交互时加载。
• references/imagery-and-icons.md — AVIF→WebP→JPEG <picture> 级联、srcset/sizes 预算、CLS 预防、主视觉预加载、图标库比较（含 currentColor/ARIA 接线），以及基于 OKLCH 的艺术指导。处理图像或图标时加载。

实现说明

• 编写新代码前，先阅读现有的 CSS/Blade/组件代码，遵循项目惯例
• 如果项目中有 BRAND_GUIDE.md、DESIGN.md 或类似文件，先阅读
• 性能很重要：使用自托管字体、尽量减少 JS，并尽可能使用纯 CSS 动画
• 显示／滚动触发类通常会在添加 .visible 类之前使用 opacity: 0 —— 不要在包装元素和子元素上重复添加触发类

请记住：Claude 能够进行非凡的创意创作。不要有所保留——放开思路并全力投入，展现真正独特的愿景所能创造的成果。但始终要尊重项目既有的模式。