用途：frontend-design 是一个用于指导 Claude 创建视觉上更具辨识度、更精致的 Vaadin 25 界面的技能，目标是产出生产级代码，真正关注美学细节，而非泛泛的默认样式。适用于用户要求设计或打造 Vaadin 界面外观的场景。
使用方式与前提：在不确定具体 API 细节时，应使用 Vaadin MCP 工具（search_vaadin_docs、get_component_styling、get_component_java_api）查询最新文档，并将 vaadin_version 设为 "25"、ui_language 设为 "java"。
设计思考：写代码前先理解上下文并确定明确的美学方向，包括用途（界面解决什么问题、面向谁）、语气（干净专业、温暖亲切、大胆且数据密集、轻盈通透、暗色专注、编辑感、活泼或精致）、约束（Vaadin 组件库、Aura 或 Lumo 主题系统、服务端渲染模型、无障碍要求）以及差异化（什么细节让界面显得经过雕琢）。关键原则是选定一个清晰方向并一致执行，所有颜色、间距、排版选择都应强化同一种美学；一致而简洁的设计胜过不一致的繁复设计。
实现要求：产出的 Java + CSS 代码应具备生产级可用、视觉统一、基于 Vaadin 组件库和主题系统，并在间距、颜色、排版与视觉层次上经过打磨。
主题系统：所有视觉定制都从 Aura 或 Lumo 主题开始，二者都提供 CSS 自定义属性（颜色、排版、间距、尺寸、边框、阴影的基础）、组件主题变体（如 primary、tertiary、compact）以及自定义 CSS（通过 @StyleSheet 引用视图级 CSS）。Lumo 额外提供类似 Tailwind 的工具类（LumoUtility.*），可从 Java 快速应用，Aura 不提供。总体原则是自上而下工作：先改主题属性再写组件 CSS，先尝试主题变体再写自定义样式。完整主题选择、加载和设计令牌细节见 theming 技能。
排版：排版决定整个界面的基调。可通过 @font-face 与 --aura-font-family 或 --lumo-font-family 自定义字体。Aura 只需调整 --aura-base-font-size（无单位数值，代表 px）即可计算整个字号比例；Lumo 则需逐个覆盖 --lumo-font-size-xxxl 等令牌。从 Java 创建排版层次可使用 Lumo 工具类（仅 Lumo，需 Lumo.UTILITY_STYLESHEET），配合字号、字重与文字颜色；Aura 则改用 CSS 类或内联样式。关键原则是建立清晰层次：一个主标题样式、一个正文样式、一个次要/说明样式，单个视图内不同文本样式不超过 3 至 4 种。
颜色与主题化：颜色是赋予 Vaadin 应用独特性身份最快的方式。Aura 可自定义强调色与调色板，如 --aura-accent-color-light、--aura-accent-color-dark、--aura-background-color-light、--aura-background-color-dark 以及 --aura-blue、--aura-green、--aura-red；Lumo 可覆盖 --lumo-primary-color 及其 50pct/10pct 变体、--lumo-primary-text-color、--lumo-primary-contrast-color、--lumo-base-color 以及 error/success/warning 颜色。两套主题都支持 @ColorScheme 注解实现暗色模式。从 Java 使用 Lumo 工具类可设置强调色与语义色，如 Background.PRIMARY、TextColor.PRIMARY_CONTRAST、Background.WARNING_10PCT 等。关键原则是坚持统一的调色板：选一个强主色/强调色，次要用途使用主题的变体系统。
间距与密度：一致间距创造视觉节奏与专业感。Aura 可调整 --aura-base-size（无单位，范围 12–24）与 --aura-base-radius（范围 0–10）；Lumo 可覆盖 --lumo-space-xs 至 --lumo-space-xl 等间距令牌。从 Java 应用间距使用 Lumo 工具类，如 Padding.LARGE、Gap.MEDIUM、Padding.Horizontal.LARGE、Padding.Vertical.XLARGE。紧凑/密集变体方面，Lumo 支持 GridVariant.LUMO_COMPACT、LUMO_NO_BORDER、TextFieldVariant.LUMO_SMALL、ButtonVariant.LUMO_SMALL；Aura 支持 AURA_COMPACT、AURA_NO_BORDER，但没有 TextField/Button 的 SMALL 变体。关键原则是选定密度并保持一致。
阴影、边框与层次：通过高度（elevation）建立深度与视觉层次。Aura 使用表面层级系统，如 --aura-surface-level 设为 2 或 -1；Lumo 提供显式阴影令牌 --lumo-box-shadow-xs 至 --lumo-box-shadow-xl，以及 BoxShadow.SMALL、BorderRadius.MEDIUM 等工具类。边框圆角可自定义 --lumo-border-radius-s/m/l，Aura 则调整 --aura-base-radius。细微分隔线可用 Border.BOTTOM 与 BorderColor.CONTRAST_10。关键原则是用高度一致地传达层次。
动效与动画：由于 Vaadin 的服务端模型，动画应由 CSS 驱动，保持细微且有目的。资料给出淡入动画、列表项错峰出现、悬停与交互动效示例。关键原则是一到两个精心制作的动画比到处散落的微交互更有冲击力，优先使用 hover/focus 上的 CSS 过渡，时长控制在 400ms 以内。
构建精致组件：资料提供样式化卡片、状态徽章、数据密集仪表盘布局等示例，并说明 Grid 表头、Dialog 遮罩、TextField 输入框可使用 shadow DOM 的 ::part() 选择器，以及通过 @StyleSheet 实现组件或视图级样式。其中 Badge 是 Vaadin 25.1 的预览功能，需启用 badgeComponent 功能开关，可用变体有 SUCCESS、WARNING、ERROR、FILLED、ICON_ONLY、NUMBER_ONLY；25.1 之前可用 theme="badge" 的 Span 实现，但该方式已弃用。
常见反模式：硬编码颜色和尺寸、覆盖组件内部而非主题属性、视觉样式过多、忽略主题变体、在服务端渲染更新上使用重型动画、扁平化的视觉层次。
最佳实践：从主题属性开始，使用组件主题变体，保持一致的配色策略，用高度进行设计，克制地添加动效。