hakushiidev/claude-skills

该技能指导创建具有独特风格的生产级前端界面。实现真正注重美学细节的可用代码。

示例提示

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

在编写任何代码之前

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）。标题与正文之间的字号对比强烈。全大写的副标题搭配宽松的字母间距。
• 色彩：高对比度。黑色、白色和一种主色调。大胆的色块作为构图元素。
• 布局：刚性多列网格。非对称平衡。文本与图像对话。元素之间的对齐不可妥协。
• 间距：由网格模块定义。间隔是设计的一部分，而非事后考虑。
• 动效：页面过渡和滚动触发的内容揭示需尊重网格。无俏皮的弹跳效果。
• 细节：水平线作为结构元素。无渐变。无阴影。扁平是重点。

日式极简（Ma）

负空间即内容。克制传达 sophistication。安静胜于喧闹。

• 排版：细字重的无衬线字体或优雅的衬线字体（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）。全大写标题搭配极端的字母间距。衬线正文字体以形成对比。
• 色彩：浓郁而深邃。金色/香槟色、翡翠绿、海军蓝、酒红色、黑色。金属感强调色（金色渐变、闪光效果）。
• 布局：对称且居中。强烈的垂直轴线。装饰性框架和边框。层叠深度。
• 间距：结构化和正式。内边距具有建筑感。
• 动效：优雅的内容揭示。交错入场动画。视差深度。
• 细节：几何图案（人字形、旭日纹、扇形）。装饰性边框。纹理（大理石、拉丝金属）。英雄区域使用标志性排版。

新孟菲斯

玩味 chaos。反企业。形状即角色。

• 排版：混合字重和样式。字体冲突是有意为之。超大标题。倾斜的文本。
• 色彩：大胆的原色和霓虹色。冲突的组合（粉色配黄色，蓝色配橙色）。无柔和色调。纯色，无渐变。
• 布局：打破网格。元素重叠。形状（圆形、三角形、波浪线）作为构图元素。刻意非对称。
• 间距：某些区域密集，某些区域空旷。节奏不规则。
• 动效：有弹性的、玩味的效果。夸张的悬停效果。元素会摇晃、旋转或弹出。
• 细节：粗边框。几何形状作为装饰。图案（点状、虚线、锯齿形）。带有硬边和亮色的投影。

编辑/杂志风格

内容主导的设计。排版承担重头戏。每个页面都是一份跨页。

• 排版：展示性衬线字体用于标题（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 行创意 chaos。两者都是正确的。

移动优先

首先构建移动端布局，然后向上扩展。这是不可妥协的要求。

• 从 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 媒体查询。在该查询中禁用或简化所有动画和过渡。