frontend-design

本技能指导创建独特、生产级的前端界面。实现真实的工作代码，特别关注美学细节。

示例提示

• "根据简报构建英雄区域"
• "创建一个斯堪的纳维亚风格的卡片组件"
• "我希望这感觉像一本日本杂志。构建布局。"
• "构建设置页面。使用任何合适的风格。"

在编写任何代码之前

1. 首先探索现有代码库。 特别扫描：

   • 组件目录：components/、ui/、shared/，并列出每个组件的名称及其属性/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）。标题和正文之间戏剧性的比例对比。全大写副标题，字母间距宽松。
• 颜色：高对比度。黑色、白色和一种主色。大胆的色块作为构图元素。
• 布局：严格的多列网格。不对称平衡。文本和图像对话。元素之间的对齐不可妥协。
• 间距：由网格模块定义。间距是设计的一部分，而非事后考虑。
• 动效：页面过渡和滚动触发的揭示，尊重网格。无俏皮弹跳。
• 细节：规则线（水平线）作为结构元素。无渐变。无阴影。扁平是重点。

日本极简主义（Ma）

负空间是内容。克制传达精致。安静胜于喧闹。

• 排版：细体无衬线或优雅衬线（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。新孟菲斯界面是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 媒体查询，为需要的用户禁用或简化所有动画和过渡。