design-agent-skills

审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。

当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。

仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。

对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。

创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。

使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。

把提供的 HTML 页面或生成的 HTML 参考转成一篇有截图支撑的文章，其中包含多条可复用的交互提示词。当用户提供 HTML 文件、导出页面、generated-page.html 或本地/live 参考，并要求提取动画/交互、创建提示词、为每条提示词采集截图、把它们加进文章，或提交产出的文章/资产时使用。

使用 Netlify CLI（`npx netlify`）把 web 项目部署到 Netlify。当用户要求在 Netlify 上部署、托管、发布或关联一个站点/仓库时使用，包括预览部署和生产部署。

剖析、审计并优化前端页面性能，重点关注动画工作、内存泄漏风险、长会话变慢、CSS 动画、canvas/WebGL 的 requestAnimationFrame 循环、marquee、skeleton、GSAP/Three/Matter 效果、定时器、监听器和 observer。当用户要求让动画高性能、暂停离屏动画、查找内存泄漏、剖析随时间拖慢电脑的页面、修复卡顿滚动、降低 CPU/GPU 占用，或在 React/Vite/Next/前端页面上用 Codex Browser 复用"仅在视野内播放"优化时使用。

当任务涉及读取、创建或审查 PDF 文件、且渲染和排版很重要时使用；优先通过渲染页面（Poppler）做视觉检查，并使用 `reportlab`、`pdfplumber` 和 `pypdf` 等 Python 工具进行生成和提取。

用 Instruments、Xcode 诊断和 MetricKit 指导 Apple 平台应用的性能剖析。当调查应用卡顿、掉帧、高 CPU、内存泄漏、内存增长、OOM 崩溃、启动慢、耗电、热问题、App Store 性能就绪度，或添加 os_signpost 和测量 hook 时使用。

通过 `js_repl` 进行持久化的浏览器与 Electron 交互，用于快速迭代式的 UI 调试。

当任务需要通过 `playwright-cli` 或随附的封装脚本从终端自动化操作真实浏览器时使用（导航、填表、快照、截图、数据提取、UI 流程调试）。

当用户明确要求桌面或系统截图时使用（整个屏幕、特定应用或窗口、或某个像素区域），或者当特定工具的捕获能力不可用、需要操作系统级捕获时使用。

为懒加载、滚动动画、Framer、WebGL/canvas 或大量 reveal 的网页捕获或修复可靠的整页截图。当整页截图空白、灰屏、白屏、内容稀疏、只显示一小条内容、与能正常工作的滚动视频不一致，或者当文章证据/分区裁剪必须从可信的整页图像中导出时使用。

诊断并修复 SwiftUI 渲染性能问题，包括不必要的 body 重新求值、缓慢或卡顿的视图、滚动/列表/网格的抖动、视图标识 bug、状态丢失、`Self._printChanges()` 输出过多、`@Observable` 与 `ObservableObject` 的观察范围、`AnyView` 性能顾虑，以及 SwiftUI `body` 内部的昂贵工作。

把一段参考视频变成超详细的复刻或灵感提示词。当用户提供、提及、上传、链接或指向一段视频，并要求分析其设计、UI、动画、过渡、滚动交互、排版、配色、资产、WebGL/Three.js、叙事、逐段行为，或要求创建一段能复刻该页面、应用、交互或运动系统的提示词/文章时使用。

查看用户最新的 X/Twitter 书签，并把近期保存的帖子转成有来源支撑的引用帖（quote-post）草稿。当被要求查看 X 书签、从书签创建引用帖、刷新书签引用队列、运行书签引用自动化，或从 X 来源写第一人称引用帖时使用。

当你需要来自 Aura Assets (aura.build/assets)、类似 Unsplash 的高质量图库风格图片用于设计 mockup 和营销时使用：背景、抽象壁纸、建筑、人像和头像。包含在 aura.build/assets 上按标签搜索的工作流程，每个类别返回 5 个真实图片 URL，外加使用不同分辨率和宽高比的实用指导。

当你需要为产品/设计资产（头像、半身照、人像、大型网站背景和抽象壁纸）挑选高质量 Unsplash 图片，并输出真实的 Unsplash URL 以及生成正确分辨率和宽高比（1:1、4:5、3:4、16:9、9:16）的实用说明时使用。

当你需要为 UI 生成编写设计优先、规格驱动、可快速略读的提示词时使用。涵盖提示词结构、约束、变体、排版/间距规则，以及产出一致 UI 的迭代工作流程。

资深 UI/UX 工程师。架构数字界面，覆盖 LLM 的默认偏见。强制基于度量的规则、严格的组件架构、CSS 硬件加速，以及均衡的设计工程。

创建具有高设计质量、与众不同、生产级的前端界面。当用户要求构建 web 组件、页面、artifact、海报或应用时使用本技能（示例包括网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或为任何 web UI 做样式/美化时）。生成有创意、精致、避免通用 AI 美学的代码与 UI 设计。

覆盖 LLM 默认的截断行为。强制生成完整代码，禁止占位模式，并干净地处理 token 上限的分割。适用于任何需要详尽、无删减输出的任务。

精英级 UX/UI 与高级 GSAP 运动工程师。强制用 Python 驱动的真随机化实现布局多样性、严格的 AIDA 页面结构、宽阔的编辑感排版（禁止 6 行折行）、无间隙的 bento grid、严格的 GSAP ScrollTrigger（pinning、stacking、scrubbing）、内联微图，以及巨大的分区间距。

教 AI 像高端设计工作室那样做设计。精确定义让网站显得昂贵的字体、间距、阴影、卡片结构与动画，并封堵所有让 AI 设计显得廉价或平庸的常见默认做法。

为 Codex 打造的顶级网站「图先于码」技能。对视觉至关重要的 Web 任务，它必须先自行生成设计图、深入分析，再实现网站以尽量贴近这些图。在 Codex 中，它必须优先生成大幅、可读、分区专属的图片，而非细小压缩的拼图；为分区或细节视图生成全新的独立图片，而非裁切旧图；避免懒惰的欠生成；避免卡片套卡片套卡片的 UI；并保持 hero 简洁、宽敞、可读，且在小尺寸笔记本上可见。

原始机械感界面，融合瑞士印刷字体与军用终端美学。刚性栅格、极端字号对比、实用主义配色、模拟老化效果。适用于数据密集型仪表盘、作品集，或需要显得像解密蓝图的编辑部站点。

干净的编辑部风格界面。暖色单色调配色、字体对比、扁平 bento 栅格、柔和粉彩。无渐变、无重阴影。

把现有网站与应用升级到高端品质。审计当前设计、识别通用 AI 套路，在不破坏功能的前提下应用高端设计标准。适用于任何 CSS 框架或原生 CSS。

当用户想审计、审查或诊断其站点的 SEO 问题时使用。当用户提到「SEO audit」「technical SEO」「why am I not ranking」「SEO issues」「on-page SEO」「meta tags review」「SEO health check」「my traffic dropped」「lost rankings」「not showing up in Google」「site isn't ranking」「Google update hit me」「page speed」「core web vitals」「crawl errors」或「indexing issues」时也使用。即便用户只是含糊地说「my SEO is bad」或「help with SEO」也用它——从审计开始。若要大规模构建页面以定位关键词，见 programmatic-seo。若要添加结构化数据，见 schema-markup。若要做 AI 搜索优化，见 ai-seo。

为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。

全面审查 SwiftUI 代码，检查现代 API、可维护性与性能方面的最佳实践。当阅读、编写或审查 SwiftUI 项目时使用。

打造极简的工作室设计系统：严谨的编辑部栅格、超大字体、安静的大写工具标签、克制的图片块，以及细微的结构性细节。

用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

当设计或实现 Stripe、Linear、Apple、Vercel 那样产品级的 Web 动效时使用。涵盖动效原则、缓动/时长默认值、编排模式、滚动/悬停交互、性能、无障碍（reduced motion）与实现指引。

打造暗色氛围背景：飘动的垂直光褶、屏幕混合发光，以及集中在角落或下边缘的明亮 bloom。

打造透视 WebGL 背景栅格：渐隐的线条、细微的粒子雾霭、缓慢的向前漂移，以及温和的相机视差。

应用精确的 Tailwind 任意值阴影工具类，做出精致、分层的中性抬升。当紧凑卡片、控件、面板、popover、hero 媒体、特性标注或类模态容器需要精致阴影，而不用默认 Tailwind 阴影尺度或带色着色时使用。

打造干净现代的设计系统：明亮的蓝天氛围、柔和飘动的云光、极简白色构框，以及宁静高端的字体。