SuperAPI AI 工具集

Skill 广场

找到适合任务的 Agent Skill,阅读介绍并复制安装命令。

更新于 11-06 00:14

设计与创作

22,117 个结果

sound

该技能面向发布影片的音乐与音效设计,核心流程是先用试听片段选歌(试听片段的 drop 对齐影片的 drop),再锁定歌曲的节拍网格与 drop,并将画面与声音统一按节拍编排。资料强调真实音效包是提升“高级感”的最大来源,生成音仅用于对齐时间;每个动作都应有对应音效,且每个声音都要对应画面上的某个事件。工具链涵盖参考片分析、Shazam 识别、版权许可、歌曲扫描与 drop 列表、试听片段生成、节拍网格锁定、段落映射、接缝检查、音效角色映射、混音与无耳朵检查(响度、真峰值、cue 覆盖与遮挡)。资料同时给出可自动验证的事项与无法自动判断的听感边界,并说明自带生成占位音频不可对外展示、授权音频不得提交到公开仓库。

设计与创作1 次安装

design-ui

design-ui 是一个面向 TanStack Start + React + Tailwind v4 + shadcn/Radix 应用的界面设计与构建技能,目标是在编写或改造任何界面时产出精致、非模板化的 UI。它强调设计系统优先:在 src/styles.css 的 @theme 中定义颜色、圆角、字体等令牌,再通过 Tailwind 工具类与 shadcn/ui 组件组合,禁止 JSX 中出现裸十六进制色值和任意值。技能提供一套量化规则,如颜色不超过 3–5 种、字体不超过 2 种、正文行高 1.4–1.6、移动端优先并按约 390px 布局、点击目标不小于 44px、保持统一间距与对比度。同时列出反 AI 套路清单:不用渐变装饰填充、不用 emoji 当图标、不用手绘 SVG 图表、不用占位图或灰色占位块,图表用 recharts 等真实库。它还涵盖层级与布局、150–250ms 的克制动效并尊重 prefers-reduced-motion,以及为 3D 游戏叠加 HUD、菜单、开始界面等 DOM 覆盖层时的可读性与输入隔离要求。参考资料按需加载,包含 refined-ui、typography、surfaces、animations、performance 等文档,并附有完成前检查清单。该技能主要适用于基于上述技术栈的网页与应用界面开发。

设计与创作1 次安装

make-video

make-video 是一个用于制作功能讲解视频的技能,面向已建成的功能、拉取请求或版本发布。它基于真实的代码和正在运行的应用,生成一段约一分钟、带旁白的 1080p 视频。使用者在 Remotion 项目模板中编写两个文件(src/script.json 与 src/tokens.ts),其余工作由脚本完成:新建视频项目、为每句旁白生成语音并给出时长、录制应用画面、合成片段,最后渲染并用 check_video.py 校验成片。该技能强调由真实代码与真实应用出发,要求每个叙述点附代码位置引用,并通过检查脚本与联系表审片后才算完成。

设计与创作1 次安装

logo-my-brand

logo-my-brand 是一个面向电商产品卖家的品牌 Logo 设计技能。它接收一个 Amazon 链接或 ASIN、一组产品照片文件夹,或一个品牌名称,自动完成从产品理解、竞品货架分析、概念生成、评判筛选到矢量化和交付套件的全流程。该技能基于 logo-design 基础技能构建,引擎使用 gpt-image-2 生成图像、gpt-5.4 进行视觉判断,默认全流程成本约 0.30 至 0.60 美元。输出为单一 brand.html 页面(选择态与交付态)以及配套的 kit 文件夹、zip 包和品牌指南 PDF。

设计与创作1 次安装

xd-extract-svg

xd-extract-svg 是 jeanpfs/xd-extract 技能中的工具,用于从 Adobe XD 分享链接(xd.adobe.com/view/...)或 .xd 文件中提取 SVG 矢量图形(图标、插画、Logo、整个画板),并对输出进行校验。它通过 xd CLI 下载设计查看器使用的场景图 JSON(AGC),将节点树转换为 SVG,并提供 inventory、extract、validate、redact 等命令。输出仅支持 SVG;部分效果(如角度渐变、背景模糊、内阴影)尚未转换,图像填充会以 data URI 嵌入,文本以实时 <text> 输出并需要对应字体,工具以警告形式报告未转换内容。使用需 Node >= 22。

设计与创作1 次安装

xd-inventory

xd-inventory 是 xd-extract 工具集中的清单与检索技能,用于在真正提取之前回答“这个设计里有什么”和“我指的是哪个节点”。它支持 Adobe XD 分享链接、.xd 文件或 xd redact 生成的 document.json,列出画板(artboard)、顶层节点、边界框(bbox)、主导填充色(dominantColor)、图形数量及警告码,并可按名称子串(不区分大小写)、颜色或指定画板进行过滤检索,也可生成可视化预览页面辅助选择节点。输出支持人类可读和 --json 机器可读两种形式,帮助用户先定位目标节点,再交给 xd-extract-svg 完成导出。

设计与创作1 次安装

xd-validate-svg

xd-validate-svg 是 xd-extract 工具链中的 SVG 校验命令,用于检查从 Adobe XD 导出的 SVG 文件是否存在 XML 结构、渲染以及图形属性方面的问题。它使用 resvg 进行光栅化渲染检查,可发现空白渲染、整片黑色色块、缺失描边、缺少 viewBox、NaN 数值、在 clipPath 内出现分组等明显错误;同时给出边缘色带偏移、内容贴近边界导致描边可能被裁剪等警告。该命令要求 Node.js 22 及以上版本,运行后会返回表示通过或失败的退出码,并可选择以 JSON 格式输出结果;校验时它还会自动读取与 SVG 同目录的 <file>.svg.report.json 报告文件,使提取阶段的警告也参与检查。它适合在 Adobe XD 转 SVG 的自动化流程中作为质量检查环节使用,但它只能排除明显缺陷,不能证明图形完全正确,仍需人工查看像素结果。

设计与创作1 次安装

Skeuomorphism

拟物化(Skeuomorphism)是一种让数字界面模仿真实世界材质的设 计风格,通过皮革、金属、木材、纸张等纹理和光影细节,营造触觉感与真实感。本条目来自 jerelvelarde/awesome-style-refs 样式参考集合,系统整理了拟物化设计的核心原则、视觉语言、组件模式、代码生成指引与无障碍注意事项,并附有皮革、金属、木材、玻璃、纸张五种材质的 CSS 与 React 示例代码。适合需要打造奢华感、怀旧感或实体质感的界面设计场景,如金融应用卡片、音频设备旋钮、复古风格产品等。内容强调先选定材质、再据此设计渐变与阴影,并提醒纹理仅作装饰、需保证文字对比度与焦点状态可见。

设计与创作1 次安装

design-everyday-things

这是一个基于唐·诺曼《设计心理学》(The Design of Everyday Things)基础设计原则的技能包,用于分析和评估产品设计的可用性。它的核心用途是帮助使用者用一套成熟的设计理论框架审视界面或产品,判断其是否直观、可发现、可理解。该技能包含可发现性、示能性(affordances)、意符(signifiers)、约束、映射、反馈和概念模型七大原则,并引入执行鸿沟与评估鸿沟两个分析视角。它提供 0 到 10 分的评分机制,从可发现性、可理解性和错误预防三个维度给出当前得分和改进方向;同时涵盖人为错误的分类(失误与错误)、防错设计方法、七阶段行动模型以及以人为本的设计流程(观察、构思、原型、测试、迭代)。适用场景包括 UX 设计评审、界面可用性诊断、产品交互设计和设计教学。使用时可由用户提出设计问题或评审请求,技能会依据上述原则给出分析和改进建议。所有原则均来自原始资料,具体交互细节和触发方式以实际技能配置为准,资料未提供其安装命令或运行环境要求。

设计与创作1 次安装

figma-advanced-troubleshooting

本技能面向 Figma REST API 的深度排障,适合标准错误处理无法解决复杂问题时使用。内容覆盖网络层与响应层的诊断方法,包括使用 curl 详细模式捕获完整 HTTP 请求/响应链路、TLS 版本与耗时分解,以及校验 Figma 返回数据结构(如空文件、请求之间被删除的节点、损坏的插件数据导致的异常响应形态)。技能还提供速率限制边界情况的测量方法:Figma 限制按用户、按分钟计算,但具体数值未公开且随套餐与席位类型变化,可通过只读端点循环请求直至收到 429,记录首次触发点与 Retry-After 头。针对包含上千组件的大型文件,给出按页面分块获取的策略:先用 depth=1 拉取元数据,再逐页调用 /nodes?ids= 并保持请求间隔,降低超时、内存溢出与重复重试造成的限流风险。最后提供向 Figma 支持升级的工单模板,包含账号、套餐、端点、文件 key、复现步骤、诊断数据与脱敏后的请求响应。技能输出包括详细请求追踪、响应形态问题清单、实测的速率限制行为、按页分块处理结果与支持工单草稿。

设计与创作1 次安装

figma-core-workflow-a

Figma Core Workflow A 是一个 Figma API 集成的主工作流,主要用途是从 Figma 文件中提取设计令牌(Design Tokens),包括颜色、排版和间距,并将其转换为 CSS 自定义属性、JSON 令牌或 Tailwind 配置。该技能适用于构建设计到代码(design-to-code)流水线、同步设计令牌等场景。使用前需完成 figma-install-auth 设置、拥有带已发布样式或变量的 Figma 文件,并设置 FIGMA_PAT 和 FIGMA_FILE_KEY 环境变量。工作流通过 Figma REST API 获取文件样式,解析节点中的实际样式值(如填充颜色和文本属性),将 Figma 的 0-1 浮点颜色格式转换为十六进制或 rgba,再生成 CSS 自定义属性文件。企业版还可使用 Variables API 获取本地变量。该技能提供了完整的 TypeScript 示例代码、错误处理表和命令行示例,帮助开发者将 Figma 设计系统自动化同步到代码中。

设计与创作1 次安装

figma-core-workflow-b

Figma Core Workflow B 是一个通过 Figma REST API 从 Figma 文件中导出图片、图标与资源的技能工作流。它可以将指定节点渲染为 PNG、SVG、JPG 或 PDF 格式,构建面向图标、插画与组件预览的自动化资源流水线。该工作流覆盖四个步骤:调用 /v1/images 端点按节点 ID 渲染图像,将导出结果下载到本地文件系统,从「Icons」框架中批量导出全部图标,以及结合组件元数据为图标生成规范命名。使用前需要完成 figma-install-auth 配置,准备待导出框架或组件的节点 ID,并设置 FIGMA_PAT 与 FIGMA_FILE_KEY 环境变量。

设计与创作1 次安装