frontend-design

这项技能将指导你创建独具特色、达到生产级品质的前端界面。编写真正可用的代码，并以极高的审美标准精心打磨细节。

示例提示词

• “根据需求说明构建首屏主视觉区”
• “创建一个具有斯堪的纳维亚风格的卡片组件”
• “我想要日式杂志的感觉。请构建布局。”
• “构建设置页面。选择合适的风格即可。”

编写代码前

1. 先探索现有代码库。 重点检查以下内容：

   • 组件目录：components/、ui/、shared/，列出每个组件的名称及其 props/API
   • CSS 变量 / 设计令牌：名为 tokens.css、variables.css、theme.css 的文件，或包含自定义属性的 :root 声明
   • Tailwind 配置：tailwind.config.js 或 tailwind.config.ts，检查 theme.extend 中的自定义值
   • UI 框架主题：Material UI createTheme、Chakra extendTheme、shadcn 的 globals.css 和 components.json
   • Storybook：.storybook/ 目录或表明组件已有文档的 *.stories.* 文件
   • 字体加载：Google Fonts 链接、@font-face 声明、字体导入
   • 布局模式：现有页面如何处理网格、容器、断点和间距
   • package.json 中的 UI 依赖：tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion 等
   • 如果存在与要构建的内容相同或部分匹配的组件，请扩展或组合使用。不要创建重复组件。

2. 了解上下文：

   • 这个界面要解决什么问题？谁会使用它？
   • 预期的情感基调是什么？
   • 有哪些硬性约束（框架、设备、性能、无障碍性）？

3. 确定美学方向。 用户可能会指定一种方向（参见下文的设计理念），也可以由你根据上下文选择合适的方向。在编写代码前，说明你的选择及原因。

设计理念

当用户指定一种理念或描述某种氛围时，请将以下内容作为具体的实现指南。每种理念都定义了字体、颜色、布局、间距、动效和细节处理方式。

Dieter Rams（功能主义）

少即是多。每个元素都各有用途。任何装饰都必须具有功能。

• 字体：简洁的无衬线字体（Helvetica Neue、Suisse Intl、Akkurat）。标题字距紧凑。正文行高宽松。严格采用单一字号体系。
• 颜色：克制。以单色为主，仅使用一种功能性强调色。背景采用白色或浅灰色。颜色用于传达信息，而非装饰。
• 布局：严格的网格。清晰的功能层级。组件遵循空间系统对齐。不要为了不对称而刻意采用不对称布局。
• 间距：统一、合乎规律的刻度（以 4px/8px 为基准）。内边距宽裕。元素间留白充足。
• 动效：尽量少。只使用有明确目的的过渡（状态变化、内容显现）。不添加装饰性动画。
• 细节：优先使用细腻的边框和分隔线，而非阴影。对齐精准。圆角应谨慎且统一使用。

瑞士 / 国际主义排版

以结构体现客观性。网格至关重要。内容为王。

• 字体：选用有力的无衬线字体（Neue Haas Grotesk、Univers、Aktiv Grotesk）。标题与正文之间形成鲜明的字号对比。小标题采用全大写，并加宽字距。
• 颜色：高对比度。以黑、白和一种主色为主。将大胆的色块作为构图元素。
• 布局：严谨的多栏网格。平衡的不对称构图。文本与图像相互呼应。元素之间必须严格对齐。
• 间距：由网格模数决定。栏间距是设计的一部分，而非事后补充。
• 动效：页面过渡和滚动触发的内容显现应遵循网格。不使用俏皮的弹跳效果。
• 细节：将线条（水平线）用作结构元素。不使用渐变。不使用阴影。扁平化正是设计要旨。

日式极简主义（间）

留白也是内容。克制传达精致感。宁静胜过喧闹。

• 排版：纤细字重的无衬线字体或优雅的衬线字体（Noto Sans、Cormorant）。宽松的行高（1.8-2.0）。较小的正文搭配大面积留白边距。
• 色彩：低饱和的自然色调（暖灰、石色、鼠尾草绿、和纸色）。以细微的色调变化取代强烈对比。近乎单色。
• 布局：不对称但平衡。内容偏离中心。大面积空白是刻意设计的。内容仿佛浮在空间中。
• 间距：极致留白。内边距和外边距是感觉“正常”时的 2-3 倍。让元素自在呼吸。
• 动效：缓慢、柔和的淡入淡出（400-600ms）。不弹跳、不超调。使用不透明度过渡，而非位置变化。
• 细节：发丝细的边框。微妙的纹理（纸张颗粒、亚麻）。不使用锐利的阴影。效果柔和、漫射。

粗野主义 / 原始风

结构清晰可见。不加修饰。反美学本身就是美学。

• 排版：系统字体、等宽字体（JetBrains Mono、IBM Plex Mono、Courier）或风格强烈的展示字体。混用不同字号。文字本身就是纹理。
• 色彩：以黑白为主。如果使用色彩，则采用原始且冲突强烈的色调（工程黄、警示橙、终端绿）。不使用渐变。
• 布局：边框清晰可见。盒模型直接呈现。块状堆叠。刻意保留粗粝感。内容至上，美观靠后。
• 间距：紧凑或刻意参差不齐。内边距带有压缩感。
• 动效：不使用动效，或采用突兀的效果（状态瞬间变化、硬切）。不使用缓动。
• 细节：轮廓清晰可见。默认浏览器表单元素也可以是刻意设计的一部分。纯文本界面。除非有实际功能，否则不使用图标。

斯堪的纳维亚风格

温暖而克制。功能之美。默认注重易用性。

• 排版：圆润、友好的无衬线字体（Nunito、Poppins、Circular、Cera Pro）。中等字重。舒适易读的字号。
• 色彩：自然色盘。暖白、柔和的蓝色、低饱和绿、陶土色。搭配柔和的点缀色。不用纯黑（使用炭灰色）。
• 布局：简洁开阔。以卡片为基础。圆角（8-12px）。布局舒适宽松。
• 间距：宽松但不过度。一切都显得亲切、整洁。
• 动效：柔和自然的缓动。轻微的悬停上移。内容平稳就位。
• 细节：柔和阴影（大模糊、低不透明度）。圆润的元素。灰色中带暖调。适合搭配插画。

装饰艺术 / 几何风格

大胆对称。装饰精确。彰显格调与奢华。

• 排版：几何展示字体（Futura、Poiret One、Josefin Sans）。全大写标题搭配极宽字距。正文使用衬线字体形成对比。
• 色彩：浓郁深沉。金色/香槟色、翡翠绿、海军蓝、酒红色、黑色。金属质感点缀（金色渐变、闪烁效果）。
• 布局：对称居中。突出纵向中轴线。装饰性边框与框架。层次分明。
• 间距：结构严谨、庄重正式。内边距如同建筑结构般经过设计。
• 动效：优雅呈现。错落的入场动画。视差层次。
• 细节：几何图案（人字纹、太阳光芒、扇形）。装饰性边框。纹理（大理石、拉丝金属）。英雄区域采用醒目的大字排版。

新孟菲斯风格

活泼混乱。反企业风。形状本身就是角色。

• 排版：混用不同字重和风格。字体冲突是刻意为之。超大标题。文字倾斜排布。
• 色彩：大胆的原色与霓虹色。高冲突搭配（粉色和黄色、蓝色和橙色）。不使用低饱和色调。纯色，不使用渐变。
• 布局：打破网格。元素相互重叠。将形状（圆形、三角形、曲线）用作构图元素。刻意采用不对称布局。
• 间距：部分区域密集，其他区域留白。节奏不规则。
• 动效：弹跳、活泼。夸张的悬停效果。元素摇摆、旋转或弹出。
• 细节：粗边框。以几何形状装饰。图案（圆点、短线、锯齿线）。搭配硬边缘、亮色的投影。

编辑／杂志

以内容为主导的设计。排版承担主要表现力。每个页面都是一组跨页版面。

• 排版：标题使用展示型衬线字体（Playfair Display、Fraunces、Instrument Serif）。正文使用简洁的无衬线字体（DM Sans、Source Sans）。采用戏剧性的字号对比（主视觉标题为 72-120px）。使用引文。使用首字下沉。
• 颜色：极简。黑白搭配一种强调色。以编辑设计的方式使用颜色（用于突出，而非装饰）。
• 布局：采用清晰的分栏网格（3-5 列）。使用通栏图片。让文字环绕图片。混合不同列宽。保持垂直节奏。
• 间距：留出宽裕的页边距。标题行距紧凑，正文行距宽松。将留白作为构图工具。
• 动效：滚动触发内容显现。图片使用视差效果。页面之间平滑过渡。
• 细节：用细线分隔。采用适合图注的排版。标注期号／日期等元数据。加入受印刷品启发的细节（页码、页眉）。

实现指南

• 排版：选择通过 Google Fonts 或 CDN 加载的特色字体。避免使用通用默认字体（Inter、Roboto、Arial、系统字体）。将展示字体与正文字体搭配使用。
• 颜色：使用 CSS 变量保持一致性。相比安全、均匀分布的配色，突出主色并搭配鲜明的强调色效果更好。
• 动效：HTML 使用 CSS 过渡效果。React 使用 Framer Motion／Motion 库。重点打造影响显著的时刻（页面加载时显现、状态变化），而不是零散的微交互。
• 空间构图：出人意料的布局更能吸引注意。可以采用不对称、叠加、对角流动、打破网格的元素；也可以在设计理念要求时，精准执行严格的网格布局。
• 背景与纵深：营造氛围。使用渐变网格、噪点纹理、几何图案、分层透明效果、颗粒叠加。与选定的设计理念保持一致。

切勿采用千篇一律的 AI 美学：白底紫色渐变、Inter 字体、可预测的卡片网格、模板化的组件布局。每个输出都应针对其具体场景精心设计。

让实现复杂度与美学构想相匹配。Dieter Rams 风格的界面只需 50 行精确的 CSS。Neo-Memphis 风格的界面则需要 300 行充满创意的混乱设计。两者都合理。

移动优先

先构建移动端布局，再逐步扩展。这一点不可妥协。

• 从宽度为 375px 的单栏布局开始。
• 在每个断点增加复杂度（使用 min-width 媒体查询，而非 max-width）。
• 移动端的触控目标至少为 44x44px。
• 移动端正文至少为 16px（避免在 iOS 上聚焦输入框时触发缩放）。
• 导航必须采用适合移动端的模式（汉堡菜单、底部标签栏或抽屉菜单）。不要依赖会溢出的水平导航栏。
• 在每个断点检查行长是否舒适（45-75 个字符）。

深色模式

如果存在设计令牌文件（来自 /design-tokens），请使用其中的深色模式配色。如果不存在，请在浅色主题之外同时生成深色模式支持。

• 使用 CSS 自定义属性，这样切换主题时只需更改变量值，无需重写组件。
• 同时支持 prefers-color-scheme 媒体查询（系统偏好）和 [data-theme="dark"] 属性（手动切换）。
• 不要只是简单反转颜色。深色背景应采用暖色或冷色调，以匹配设计理念（斯堪的纳维亚风格使用暖炭灰，瑞士风格使用冷石板灰，粗野主义风格使用近黑色）。
• 将纯白文字调整为柔白色（例如 #E5E5E5 或 rgba(255,255,255,0.87)），以减轻眼睛疲劳。
• 深色模式下的阴影应更暗、更透明，不要沿用浅色模式的相同数值。
• 可能需要调整强调色的亮度，以确保其与深色背景之间的对比度符合 WCAG 标准。
• 为有需要的用户加入 prefers-reduced-motion 媒体查询。在该查询中禁用或简化所有动画和过渡效果。