SuperAPI AI 工具集

Skill 广场

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

更新于 10-23 00:13

设计与创作

20,620 个结果

magazine-poster

这是一项编辑风格海报技能,用于生成单页杂志式海报,外观类似周末报纸的撕页。它采用长篇、刻意的排版驱动设计流程:读取当前 DESIGN.md,从设计系统中选取最重的衬线字体做标题、正文字体做分栏、打字机或等宽字体做栏目小标与注释。海报包含报头细线、日期行、超大号衬线标题(其中一个词加删除线、一个词用斜体强调色)、斜体导语、强调色短横线、2×3 或 3×2 编号正文网格、以及带规则线和三格信息的页脚。输出为内联 CSS 的单个 HTML 文档,需在 artifact 标签内产出,并包含 data-od-id 标记,适用于 1280–1440px 宽度。

设计与创作85 次安装

mobile-app

Mobile App 是一个用于生成移动应用界面设计稿的技能,可将单个移动端屏幕以逼真的 iPhone 15 Pro 设备外框形式呈现。它基于种子模板 assets/template.html 构建,该模板已内置灵动岛、状态栏 SVG 图标、Home 指示条、侧边栏和标签栏等设备框架元素。技能提供 6 种屏幕原型(信息流、详情、引导、个人资料、结账、专注/主卡片),并附带布局参考与自检清单。使用时先阅读模板与布局文档,将模板复制为 index.html 并替换设计系统变量,再选择一种原型填入具体文案,最后按清单自检并输出 HTML 制品。适用于需要快速产出单屏移动端界面稿的场景,强调单屏单任务、强调色使用不超过两次、点击目标不小于 44px、无外部图片等硬性规则。

设计与创作85 次安装

wireframe-sketch

Wireframe Sketch 是一个用于生成手绘风格线框图页面的技能。它强调低保证真度,追求铅笔/马克笔质感、网格纸背景、斜线填充、虚线边框和轻微旋转,让页面看起来像草稿而非成品 UI。工作流会从需求中选取 3–4 个屏幕变体标签,其中一个为激活态,其余为未激活的草图标签。页面结构依次包括:带伪标签的页头、标签条、网格纸画布、浏览器窗口栏、侧边导航、KPI 卡片、折线图占位、柱状图占位以及便签注释。最终输出一个内联 CSS 的 HTML 文档,使用 Caveat、Patrick Hand 或 Architects Daughter 等手写字体,并通过 data-od-id 标记关键区域。该技能适合在早期设计探索阶段快速表达布局想法,不适用于需要精细视觉的成品界面。

设计与创作85 次安装

style-library

这是一个面向 HyperFrames 视频项目的可复用动态图形卡片库与样式模板资源,用于选择、定制或扩展项目的视觉样式。使用时可先阅读 style-library/GUIDE.md 与 registry.json,按风格、层级和用途筛选卡片,再查看所选样式的 DESIGN.md、tokens.css 与清单槽位限制。卡片可用于叠加层或整屏接管:叠加层需保持卡片外部及人物面部透明,整屏接管使用不透明背景。将选定卡片复制到视频的 compositions/ 中,并本地化其 CSS、字体与 GSAP 依赖,填充命名 data-slot 值,再通过 HyperFrames 技能接入时间线。也可使用 style-templates/ 作为整场起点。注意目录含草稿资源,并非所有卡片都通过渲染质检,需在实际分辨率下 lint 与渲染,检查主帧、转场与槽位文本最大长度。新增样式可用指定命令创建并补齐设计令牌、清单与卡片,清单变更后运行构建注册表命令。

设计与创作85 次安装

visual-hierarchy-refactoring

Visual Hierarchy Refactoring 是一个面向前端界面的视觉层级重构技能,用于把杂乱或平淡的界面重新整理,让用户一眼就能按正确顺序看到重点内容。它强调通过尺寸、字重、明度和留白来建立层级,而不是依靠增加颜色。适用于某个具体页面杂乱、扁平、不易扫读,或“看起来不太对”的情况。使用时会先读取目标组件和相关设计令牌,检测层级问题(如强调元素过多、间距拥挤、使用纯灰或纯黑、字号接近、间距均匀、边框滥用等),再为每个可见元素标注预期优先级(P1/P2/P3)与当前视觉重量,找出错配项。重构顺序为:先处理留白,再弱化 P2/P3,最后强化 P1,并用明度而非色相建立对比梯。产出内容包括重构后的代码、前后对比的层级审计表、变更说明和扫读测试结果。该技能要求使用已有设计令牌,不引入新的魔法数字。

设计与创作85 次安装