frontend-design

前端设计

源自 Anthropic 在 anthropics/claude-plugins-official 中的 frontend-design 技能，采用 Apache License 2.0 许可。已针对 Codex 修改，扩展了触发措辞、落地页规则、UI 反模式、素材指导和基于浏览器的视觉 QA。

创建独具特色、达到生产级水准的前端界面，避免千篇一律的 AI 美学。编写真正可用的代码，重点关注视觉方向、布局、字体排版、素材、交互设计、响应式表现和验证。

用户可能会要求创建组件、页面、应用或界面。他们可能会提供有关用途、受众、品牌、框架或技术限制的背景信息。

工作流

1. 选择设计方向前，先阅读需求并了解现有代码库的惯例。
2. 确定符合产品、受众和领域的具体视觉概念。例如：编辑风格的金融终端、瑞士工业风 SaaS、奢华酒店、趣味学习实验室、电影感游戏 HUD。
3. 先实现真正可用的屏幕或流程；不要用营销外壳代替应用、工具或游戏。
4. 如果图像能显著提升效果，就使用真实、生成或与领域相关的视觉素材。
5. 确保界面具备响应式和无障碍设计，并能妥善处理文本溢出、加载状态、悬停状态和窄视口。
6. 必要时在本地运行应用，通过浏览器检查桌面端和移动端布局，修复可见缺陷，并在完成前检查控制台错误。

设计思考

开始编码前，先理解上下文并确定清晰的美学方向：

• 用途：明确界面要解决的问题以及使用者。
• 基调：选择符合需求的具体方向，例如极简主义、繁复主义、复古未来主义、有机风格、奢华风、趣味风、编辑风、粗野主义、装饰艺术、柔和风格、工业风或其他风格。
• 限制：遵循框架、性能、无障碍、响应式行为和现有项目惯例方面的要求。
• 差异化：决定界面要凭借什么令人印象深刻。

选择具体的概念并精准呈现。大胆繁复和精致极简都可以奏效；关键在于用心设计，而非追求强烈效果。

随后编写具备以下特点的可用代码：

• 达到生产级水准且功能完善。
• 视觉效果鲜明，令人印象深刻。
• 风格协调，观点清晰。
• 精心打磨字体排版、间距、色彩、动效和交互状态。

落地页规则

• 确保品牌、产品、场所、人物或优惠在首屏一目了然。
• H1 应直接展示产品、品牌、人物、地点、优惠或类别；价值主张应放在辅助文案中。
• 除非左右分栏式默认主视觉明确最适合该领域，否则避免采用一侧放文字、另一侧放装饰卡片或模型的设计。
• 如果页面能从视觉证据中受益，就使用相关图片、生成的位图、产品截图、沉浸式场景或真实媒体。
• 让首屏在桌面端和移动端都能预示下一个版块，而不要让主视觉像一张封闭的海报。
• 撰写具体且贴合领域的文案。避免使用“变革你的工作流”“释放你的潜能”和“无缝体验”等空洞的 SaaS 套话。

UI 类型适配

• 对于应用、仪表盘、编辑器、CRM 和运营工具，优先考虑便于密集浏览、控件行为可预测且适合重复使用的设计，而非营销式构图。
• 对于游戏、创意工具、作品集、场所和消费类产品，可以采用更鲜明的艺术指导、动效、氛围和定制交互。
• 对现有产品进行重新设计时，应保留实用惯例，并优先改进最薄弱的可见界面。

前端美学指南

• 排版：选择风格明确且适合领域的字体。除非现有产品已依赖 Arial、Inter、Roboto 或系统字体，否则不要默认使用它们。适当时，可将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：采用协调统一的配色方案。使用 CSS 变量保持一致性。优先选择鲜明的主色搭配醒目的强调色，而非犹豫不决、分布均匀的配色。
• 动效：使用动画实现有意义的效果和微交互。对于静态 HTML，优先采用纯 CSS 动效。只有在 React 项目中已提供动效库或确有必要时，才使用该库。一次精心编排的揭示效果，往往胜过零散的动画。
• 空间构图：有意识地运用布局：不对称、重叠、对角流动、打破网格的元素、充足的留白，或经过控制的密集布局，只要它们契合设计概念即可。
• 资源与图像：优先使用图像、视频、生成的位图视觉素材、产品截图、地图、纹理或领域专属图形，前提是它们能展现正在销售、使用、游玩或检查的内容。若真实图像或生成图像更能支撑设计，就避免使用纯装饰性的 SVG 填充素材。
• 背景与细节：营造氛围与层次，但不要依赖千篇一律的装饰。只有在有助于支撑所选风格时，才使用纹理、图案、分层透明效果、阴影、边框、光标或颗粒效果。
• 控件与可供性：操作应使用熟悉的控件与图标。按钮、标签页、开关、滑块、菜单、工具栏和卡片应契合任务密度与领域特性，不要一概采用尺寸过大的 SaaS 模块。
• 响应式打磨：为固定格式的元素设定稳定尺寸，避免文字重叠，检查移动端布局，并避免使用会破坏构图的视口缩放字体大小。

避免千篇一律的 AI 生成美学：过度使用的字体选择、白底紫色渐变、可预测的卡片网格、模板化的 SaaS 板块，以及与领域无关的设计选择。

不同任务应采用不同设计。不要反复采用相同的字体、配色、布局结构或效果。

设计反模式

除非用户明确要求或现有产品有所需要，否则请避免以下做法：

• 白底紫蓝渐变、装饰性斑块、散景、漂浮光球和通用网格背景。
• 缺少领域专属内容却使用居中式 SaaS 主视觉、三卡片功能网格、Logo 云、用户评价模块和常见问题板块。
• 只使用 Inter 的排版、尺寸过大的圆角卡片、对比度过低的灰色文字，以及换行别扭的按钮标签。
• 包含无意义图表、占位名称或与产品不符数字的虚假仪表板截图。
• 在应用内用文字解释界面功能、视觉风格或键盘快捷键，而不是让界面本身一目了然。

实施标准

让实现的复杂度与美学构想相匹配。极繁主义设计可能需要更复杂的效果和分层构图。极简或精致的设计则需要克制、精准的间距、仔细控制的字号层级和细腻的状态。

在现有代码库中工作时，除非请求明确要求重新设计，否则应保留既有架构和组件模式。将无障碍性、响应式设计、性能和可维护性纳入考虑。

视觉 QA 检查清单

完成重要的前端工作前，请在浏览器中检查渲染结果：

• 如果应用可以在本地运行，请检查约 1440px 宽的桌面端、约 768px 宽的平板端，以及约 390px 宽的移动端。
• 修复控制台错误、空白渲染、文本裁切、UI 重叠、资源损坏、对比度不足、首屏布局不协调以及移动端导航故障。
• 确认主要图像已加载、构图经过精心设计，并能展示真实的产品、地点、状态、游戏画面或主题。
• 确认所有重要文本都能完整显示在其容器中，并在测试的各种宽度下保持可读。
• 确认本次工作涉及的控件在悬停、聚焦、激活、空状态、加载和错误状态下均表现正常。