frontend-design

用途：该技能用于指导代理在 Vaadin 25 上创建具有辨识度且打磨精良的界面，目标为生产级代码，强调对美学细节的真实关注，而非套用默认样式。适用场景包括管理后台、面向客户的门户等多种 Vaadin 界面，需先在编码前明确用途、语气方向、约束与差异化。\n\n主要能力：覆盖设计思路、Vaadin 主题系统、排版、颜色与主题、间距与密度、阴影与边框、动效与动画、组件打磨以及 CSS 样式化 Vaadin 组件。主题系统基于 Aura 或 Lumo，二者均提供 CSS 自定义属性、组件主题变体和自定义 CSS；Lumo 还提供类似 Tailwind 的工具类 LumoUtility。\n\n必要用法：不确定具体 API 时，使用 Vaadin MCP 工具（search_vaadin_docs、get_component_styling、get_component_java_api）查文档，并始终设置 vaadin_version 为 "25"、ui_language 为 "java"。需要精确 Java API 签名或读源码时，使用 javadoc MCP（mcp__javadoc__*）从 Maven Central 读取 Javadoc 与源码，而非解包 ~/.m2 中的 jar。工作顺序为自顶向下：先改主题属性，再写组件级 CSS；先用主题变体，再写自定义样式。自定义字体可通过 @font-face 并设置 --aura-font-family 或 --lumo-font-family；字号等令牌按主题分别调整。Badge 在 Vaadin 25.1 为预览功能，需启用 badgeComponent 特性标志，可用变体包括 SUCCESS、WARNING、ERROR、FILLED、ICON_ONLY、NUMBER_ONLY；25.1 之前可用 Span 配 theme="badge"，但已废弃。\n\n限制与注意事项：文中给出的是设计规则与代码示例，未提供安装命令、收费、价格或服务信息。避免硬编码颜色与尺寸、避免直接覆盖组件内部样式而非主题属性、避免过多视觉风格、避免忽略主题变体、避免在服务端渲染更新上使用重型动画、避免扁平视觉层级。动效建议由 CSS 驱动并保持克制，时长控制在 400ms 以内。该技能未说明适用平台、版本兼容细节或效果保证。