前端设计
概述
此公共摄入副本将 https://github.com/tech-leads-club/agent-skills 中的 packages/skills-catalog/skills/(design)/frontend-design 封装成本地的 Omni Skills 编辑形状，同时不隐藏其来源。
当操作员需要保留上游工作流、支持文件和仓库上下文完整，同时公共验证器和私有增强器继续其正常的下游流程时使用。
此摄入过程保持复制的上游文件完整，并使用 metadata.json 中的 external_source 块以及 ORIGIN.md 作为审核的来源锚点。
此技能指导创建独特的、生产级的前端界面，避免通用的“AI 垃圾”美学。实现真实可用的代码，并特别注重美学细节和创意选择。
未完全映射到公共标题的导入源部分仍保留在下方或支持文件中。值得注意的导入部分：设计方向，AI 垃圾测试。
何时使用此技能
将此部分用作触发过滤器。它应在操作员加载文件、运行命令或开启拉取请求之前明确激活边界。
- 当请求明确匹配导入源意图时使用：创建具有高设计质量的、独特的、生产级前端界面。当用户要求构建 Web 组件、页面、制品、海报或应用程序时使用。生成创意且精良的代码...
- 当操作员应保留上游工作流细节而不是从头重写流程时使用。
- 当需要在回答、PR 或审查包中保持来源可见时使用。
- 当复制的上游参考、示例或脚本实质性改善回答时使用。
- 当工作流应在私有增强器接手之前，在公共摄入仓库中保持可审查性时使用。
操作表
| 情况 | 从这里开始 | 为什么重要 |
|---|---|---|
| 首次使用 | metadata.json | 在接触复制的工作流之前，通过 external_source 块确认仓库、分支、提交和导入路径 |
| 来源审查 | ORIGIN.md | 为审查者提供导入源的通俗语言审计追踪 |
| 工作流执行 | references/color-and-contrast.md | 从最小的、能实质性改变执行效果的复制文件开始 |
| 支持性上下文 | references/interaction-design.md | 在不加载整个包的情况下，添加下一个最相关的复制源文件 |
| 移交决策 | ## 相关技能 | 当任务偏离中心时，帮助操作员切换到更强的本地技能 |
工作流
此工作流同时具有编辑性和操作性。它使导入源对操作员保持有用，同时满足为下游增强器流程提供输入的公共摄入标准。
- 确认用户目标、导入工作流的范围，以及此技能是否仍是任务的正确路由。
- 在加载任何复制的上游支持文件之前，阅读概述和来源文件。
- 仅加载对当前结果有实质性变化的参考、示例、提示或脚本。
- 执行上游工作流，同时在工作记录中明确保持来源和源边界。
- 根据上游期望和复制文件中可指出的证据验证结果。
- 当工作超出此导入工作流的中心时，升级或移交给相关技能。
- 在合并或关闭之前，记录使用了什么、改变了什么以及审查者仍需验证的内容。
导入的工作流说明
导入：设计方向
致力于一个大胆的美学方向：
- 目的：此界面解决什么问题？谁使用它？
- 基调：选择一个极端：极简主义、极繁主义混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志感、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/功利主义等。有很多风格可供选择。将其作为灵感，但设计一个符合美学方向的风格。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让它令人难忘？人们会记住什么？
关键：选择一个明确的概念方向并精确执行。大胆的极繁主义和精致的极简主义都有效——关键在于意图性，而非强度。
然后实现满足以下条件的可工作代码：
- 生产级且功能完整
- 视觉上引人注目且令人难忘
- 具有清晰美学观点的连贯性
- 每个细节都经过精心打磨
示例
示例 1：直接请求上游工作流
使用 @frontend-design 处理 <任务>。从复制的上游工作流开始，仅加载改变结果的源文件，并在回答中保持来源可见。
说明： 当操作员需要导入的工作流但不需要整个仓库时，这是最安全的起点。
示例 2：请求基于来源的审查
根据 metadata.json 和 ORIGIN.md 审查 @frontend-design，然后解释你会先加载哪些复制的上游文件以及原因。
说明： 在审查或故障排除前使用此示例，当需要关于来源和文件选择的精确、可审计的解释时。
示例 3：在执行前缩小复制的支持文件范围
为 <任务> 使用 @frontend-design。仅加载改变结果的复制参考、示例或脚本，并在继续之前明确命名文件。
说明： 这使技能与渐进式披露保持一致，而不是默认加载整个复制包。
示例 4：构建审查者包
使用复制的上游文件和来源审查 @frontend-design，然后在合并前总结任何差距。
说明： 当 PR 等待人工审查且您想要一个可重复的审计包时，此示例很有用。
导入的使用说明
导入：示例
示例 1：具有强烈美感的着陆页
用户说：“为开发者工具产品构建一个着陆页，看起来不像其他 SaaS 产品。” 操作：选择一个大方向（例如野兽派或编辑风格）；选择独特的字体搭配和统一的调色板；使用流畅的间距和一个清晰的焦点实现；避免卡片套卡和指标排列的陈词滥调。 结果：具有清晰层级、令人难忘的排版且无通用 AI 迹象的单页布局（无紫色渐变、无带粗重强调边框的圆角卡片）。
示例 2：仪表盘或应用 UI
用户说：“创建一个用于查看分析数据的暗色主题仪表盘。” 操作：致力于一个特定的暗色美学（例如带有色调中性色的精致暗色，而非默认的发光黑底）；对面板使用容器查询；添加一个经过考虑的动效瞬间（例如交错列表加载）；确保空状态有帮助。 结果：功能完整的仪表盘，感觉经过有意设计——独特的调色板、无青色/紫色光晕、清晰的数据层级和响应式行为。
示例 3：海报或营销制品
用户说：“为一场关于前端性能的大会演讲制作一张海报。” 操作：选择一个强烈的排版或视觉概念；使用模块化的字体等级和有限调色板；避免通用的图片库加标题布局。 结果：一张可以独立作为设计制品的海报——令人难忘的排版和构图，而非模板填空。
最佳实践
将生成的公共技能视为上游仓库的可审查包装层。目标是保持来源明确，并仅加载能实质性改善执行的复制源材料。
-
排版 → 咨询排版参考以获取等级、搭配和加载策略。
- 选择美观、独特且有趣的字体。
- 将独特的显示字体与精致的正文字体搭配使用。
- 要：使用流体缩放（clamp）的模块化字体等级 要：变化字体粗细和大小以创建清晰的视觉层级 不要：使用过度使用的字体——Inter、Roboto、Arial、Open Sans、系统默认字体 不要：将等宽字体作为“技术/开发者”氛围的懒惰简写 不要：在每个标题上方放置带圆角的大图标——它们很少增加价值，反而让网站看起来模板化 ### 颜色与主题 → 咨询颜色参考以获取 OKLCH、调色板和暗色模式。
- 致力于统一的调色板。
- 带有锐利强调色的主色调比谨慎、均匀分布的调色板表现更好。
- 要：使用现代 CSS 颜色函数（oklch、color-mix、light-dark）以获得知觉统一、可维护的调色板 要：将中性色向品牌色相倾斜——即使微妙的提示也能创造潜意识的连贯性 不要：在彩色背景上使用灰色文本——看起来褪色；使用背景色的色调代替 不要：使用纯黑 (#000) 或纯白 (#fff)——始终使用色调；纯黑/白在自然界中永远不会出现 不要：使用 AI 调色板：暗色上的青色、紫色到蓝色渐变、暗色背景上的霓虹强调色 不要：使用渐变文本来制造“冲击感”——特别是在指标或标题上；它装饰性强而非有意义 不要：默认使用带有发光强调色的暗色模式——看起来很“酷”，却无需实际设计决策 ### 布局与空间 → 咨询空间参考以获取网格、节奏和容器查询。
导入的操作说明
导入：前端美学指南
排版
→ 查阅排版参考以获取等级、搭配和加载策略。
选择美观、独特且有趣的字体。将独特的显示字体与精致的正文字体搭配使用。
要：使用流体缩放（clamp）的模块化字体等级 要：变化字体粗细和大小以创建清晰的视觉层级 不要：使用过度使用的字体——Inter、Roboto、Arial、Open Sans、系统默认字体 不要：将等宽字体作为“技术/开发者”氛围的懒惰简写 不要：在每个标题上方放置带圆角的大图标——它们很少增加价值，反而让网站看起来模板化
颜色与主题
→ 查阅颜色参考以获取 OKLCH、调色板和暗色模式。
致力于统一的调色板。带有锐利强调色的主色调比谨慎、均匀分布的调色板表现更好。
要：使用现代 CSS 颜色函数（oklch、color-mix、light-dark）以获得知觉统一、可维护的调色板 要：将中性色向品牌色相倾斜——即使微妙的提示也能创造潜意识的连贯性 不要：在彩色背景上使用灰色文本——看起来褪色；使用背景色的色调代替 不要：使用纯黑 (#000) 或纯白 (#fff)——始终使用色调；纯黑/白在自然界中永远不会出现 不要：使用 AI 调色板：暗色上的青色、紫色到蓝色渐变、暗色背景上的霓虹强调色 不要：使用渐变文本来制造“冲击感”——特别是在指标或标题上；它装饰性强而非有意义 不要：默认使用带有发光强调色的暗色模式——看起来很“酷”，却无需实际设计决策
布局与空间
→ 查阅空间参考以获取网格、节奏和容器查询。
通过变化的间距创造视觉节奏——而不是到处使用相同的内边距。拥抱不对称和意外构图。有意打破网格以突出重点。
要：通过变化的间距创造视觉节奏——紧密分组、宽松分隔 要：使用流体缩放（clamp）的间距，在大屏幕上呼吸 要：使用不对称和意外构图；有意打破网格以突出重点 不要：将所有内容包裹在卡片中——并非所有内容都需要容器 不要：在卡片内嵌套卡片——视觉噪音，展平层级 不要：使用相同的卡片网格——相同大小的卡片加图标加标题加文本，无限重复 不要：使用指标排列布局模板——大数字、小标签、支持性统计数据、渐变强调色 不要：将所有内容居中——左对齐文本搭配不对称布局感觉更具设计感 不要：到处使用相同的间距——没有节奏，布局会感觉单调
视觉细节
要：使用有意图、有目的的装饰元素来强化品牌 不要：到处使用玻璃态——模糊效果、玻璃卡片、发光边框，装饰性大于目的性 不要：使用一侧带粗重彩色边框的圆角元素——这是一种懒惰的强调方式，几乎从不显得有意 不要：将迷你图作为装饰——小巧的图表看起来很 sophisticated，但传达不出任何有意义的信息 不要：使用带通用投影的圆角矩形——安全、易忘，可能是任何 AI 的输出 不要：使用模态框，除非真的没有更好的选择——模态框是懒惰的做法
动效
→ 查阅动效参考以获取时间、缓动和减少动效设置。
专注于高影响时刻：一个有交错揭示效果、编排良好的页面加载比分散的微交互创造更多愉悦感。
要：使用动效传达状态变化——进入、退出、反馈 要：使用指数缓动（ease-out-quart/quint/expo）实现自然减速 要：对于高度动画，使用 grid-template-rows 过渡而非直接动画化高度 不要：动画化布局属性（宽度、高度、内边距、外边距）——仅使用 transform 和 opacity 不要：使用弹跳或弹性缓动——它们感觉过时且俗气；真实物体平滑减速
交互
→ 查阅交互参考以获取表单、焦点和加载模式。
让交互感觉快速。使用乐观 UI——立即更新，稍后同步。
要：使用渐进式披露——从简单开始，通过交互揭示复杂性（基本选项在前，高级内容在可展开部分后面；将…
…（原文截断）