Skills

C

colorful

bergside / awesome-design-skills

鲜艳、高对比度的配色与渐变，打造引人入胜、令人难忘且现代的用户体验

F

friendly

bergside / awesome-design-skills

亲切直观的设计，采用圆润的元素、充足的留白和柔和的粉彩配色

B

bold

bergside / awesome-design-skills

通过厚重的字体、高对比度色彩和大气的布局，营造强烈的视觉表现力

C

cosmic

bergside / awesome-design-skills

未来科幻风格，采用暗色主题、鲜艳的霓虹点缀和沉浸式空间元素

A

artistic

bergside / awesome-design-skills

采用高对比度、富有表现力的风格，搭配创意字体和大胆用色，打造视觉冲击力强的界面

A

agentic

bergside / awesome-design-skills

以对话式 AI 为先的界面，控件精简、结果明确，并为 Agent 工作流提供任务委派流程

A

ant

bergside / awesome-design-skills

面向企业的结构化设计系统，注重数据密集型 Web 应用的清晰度、一致性和效率。

B

building-omnistudio-omniscript

forcedotcom / sf-skills

OmniStudio OmniScript 创建与验证，采用 120 分评分。适用于构建引导式数字体验、多步表单或编排 Integration Procedures 与 Data Mappers 的交互流程。触发条件：用户创建 OmniScript、设计步骤流、配置元素类型，或评审现有的 OmniScript 配置。不触发条件：构建 FlexCards（使用 building-omnistudio-flexcard）、直接创建 Integration Procedures（使用 building-omnistudio-integration-procedure），或分析依赖关系（使用 analyzing-omnistudio-dependencies）。

B

barba-js

freshtechbro / claudedesignskills

用于在网站页面之间创建流畅顺滑转场的页面过渡库。在实现页面转场、打造类 SPA 体验、添加动画式路由切换或构建导航顺滑的网站时使用此技能。当任务涉及 Barba.js、页面转场、路由、视图管理、转场钩子、GSAP 集成或顺滑页面导航时触发。与 gsap-scrolltrigger 配合实现转场动画。

F

flat

bergside / awesome-design-skills

二维极简风格，采用鲜艳的色彩、清晰的字体排版和无 3D 效果的设计，打造快速、易用的界面

B

building-omnistudio-flexcard

forcedotcom / sf-skills

OmniStudio FlexCard 的创建与校验，采用 130 分评分体系。适用于构建一目了然的 UI 卡片、将数据源绑定到 Integration Procedures，或审查现有 FlexCard 定义的无障碍性与性能。触发时机：用户创建 FlexCard、配置数据源、设计卡片布局，或询问 OmniUiCard 元数据时。不要触发：构建 OmniScripts 时（改用 building-omnistudio-omniscript）、创建 Integration Procedures 时（改用 building-omnistudio-integration-procedure）、分析依赖关系时（改用 analyzing-omnistudio-dependencies）。

D

dramatic

bergside / awesome-design-skills

高对比度、戏剧化的设计，采用大胆的版式、沉浸式视觉效果和引人注目的非传统构图

C

cafe

bergside / awesome-design-skills

以舒适咖啡馆为灵感的界面，采用温暖色调、柔和字体和简洁布局，带来轻松的浏览体验。

M

mobile-touch

dylantarre / animation-principles

在设计 iOS/Android 手势、触觉反馈、触控交互或原生移动动画时使用。

P

platform-mcp-tool-widget-coordinate

forcedotcom / sf-skills

编排基于对象的 Lightning Type + HXL 组件生成，以呈现由 Apex Invocable Action 支持的自定义 MCP 服务工具的输出。仅当提示词明确涉及呈现 MCP 工具结果时才触发：用户提到 'MCP server'、'MCP tool'、'custom MCP server'，引用工具的 'output schema' / 'tool output' / 'outputValues' 结构，指定支撑 MCP 工具的 'invocable action'，或要求为 Apex invocable 支持的 MCP 工具输出构建组件或富 UI 呈现时。不要在以下情况触发：自定义 Apex 支持的 Agent 操作输出（使用 platform-lightning-type-widget-coordinate）、仅编写 Custom Lightning Type（使用 platform-custom-lightning-type-generate）、仅编写 Apex 类（使用 platform-apex-generate），或构建不含 Lightning Type 或 MCP 工具的独立组件（使用 platform-widget-generate）。

R

rendercv

rendercv / rendercv-skill

使用 RenderCV (v2.8) 创建排版完美的专业简历和履历。用户用 YAML 编写内容，RenderCV 通过 Typst 排版生成出版级 PDF。可完全控制每个视觉细节：颜色、字体、页边距、间距、章节标题样式、条目布局等。内置 6 套主题，可无限自定义。支持任意语言（内置 22 种，或自行定义）。输出 PDF、PNG、HTML 和 Markdown。适用于用户想要创建、编辑、自定义或渲染简历或履历时。

I

improve-website

wondelai / skills

从表现不佳的线上网站入手，逐步制定有优先级、以证据为依据的转化率、可用性、信息传达和速度改进清单，并将每项改进作为可测试的实验发布。分阶段协调八项技能：cro-methodology、ux-heuristics、refactoring-ui、web-typography、storybrand-messaging、high-perf-browser、made-to-stick、design-everyday-things；在每个决策点向用户提问，并将结果记录在项目 docs/ 文件夹中（WEBSITE.md、DESIGN.md、IMPROVE-WEBSITE-PLAN.md），以便跨会话继续流程。当用户想修复转化率不佳的落地页、诊断访客离开的原因、检查清晰度和可用性，或表示“主页感觉不对，但重新设计也没用”时使用。还没有网站：使用 create-website；转化正常但需要流量：使用 grow-website；问题出在产品应用而非营销网站：使用 improve-app；某个特定流程存在流失：使用 conversion-optimization。若只需单独使用某个框架，直接调用对应技能

V

vintage

bergside / awesome-design-skills

融合 20 世纪 50 至 90 年代怀旧风格、拟物化细节、颗粒质感、复古配色和像素风字体。

W

wireframe

ghaida / intent

以线框图的保真度设计屏幕的结构构成——先确定内容放在哪里以及原因，再讨论外观。属于 Intent 设计策略系统。生成用于发散探索的低保真创意板、带真实标签和层级的完整交互式灰度线框图，以及将 /journey 中的流程逻辑具象化的可点击原型。以下情况触发：wireframe、wireframes、wireframing、thumbnails、“sketch the screen”、“lay out this page”、“what goes where on this screen”、screen layout、page structure、lo-fi、mid-fi、click-through prototype、wireflow、“wireframe the dashboard”，或任何在视觉设计之前设计屏幕结构的请求。屏幕间的流程属于 /journey；信息结构属于 /organize；文字属于 /articulate——此技能负责屏幕本身。

M

mono

bergside / awesome-design-skills

以等宽字体和矩阵为灵感的设计，采用高对比元素、紧凑布局和黑客风格美学。

F

fantasy

bergside / awesome-design-skills

受游戏启发的奇幻美学，采用大胆、高级的视觉效果、丰富的配色和沉浸式主题元素。

D

dithered

bergside / awesome-design-skills

通过有限调色板模拟明暗的点阵渲染技术，呈现怀旧、复古、高对比度的视觉效果。

V

vibrant

bergside / awesome-design-skills

活泼多彩的设计，搭配大胆俏皮的字体、温暖的点缀色和充满动感的视觉能量。

L

levels

bergside / awesome-design-skills

以转化为目标的设计，通过清晰、可信和高效减少阻力并引导用户采取行动。

R

retro

bergside / awesome-design-skills

复古怀旧设计，采用复古风格字体、高对比度配色和怀旧视觉元素。

N

neon

bergside / awesome-design-skills

电光霓虹发光效果搭配高对比度配色，打造醒目、引人注目的界面。

S

skeumorphism

bergside / awesome-design-skills

通过纹理表面、3D 效果和熟悉的实体隐喻，模仿现实世界，打造直观的数字界面。

E

expressive

bergside / awesome-design-skills

充满活力、彰显个性的设计，采用大胆的色彩、俏皮的图形和动态布局，在创意与结构之间取得平衡。

M

mapbox-style-patterns

mapbox / mapbox-agent-skills

针对典型地图场景的常见样式模式、图层配置和配方，涵盖餐厅搜索、房地产、数据可视化、导航、配送/物流等。在实现具体地图用例或查找成熟样式模式时使用。

P

perspective

bergside / awesome-design-skills

通过等距视图、消失点和分层元素打造空间纵深设计，以类似 3D 的真实感引导注意力。

T

tailwindcss-animations

josiahsiegel / claude-plugin-marketplace

Tailwind CSS 的动画与过渡，包括内置工具类和自定义关键帧。需主动启用的情况：(1) animate-* 工具类（spin、ping、pulse、bounce），(2) 通过 @theme animate 定义的自定义 @keyframes，(3) 过渡工具类（transition、duration、ease），(4) 带过渡的变换（scale、rotate、translate），(5) prefers-reduced-motion: reduce，(6) Framer Motion / Motion One 与 Tailwind 的集成，(7) CSS 滚动驱动动画（animation-timeline），(8) 与 Tailwind 搭配的视图过渡 API，(9) hover、focus、group-hover 过渡，(10) 交错列表动画。提供：动画工具类参考、自定义关键帧示例、减少动态效果模式、Framer Motion 集成以及滚动驱动动画配方。

L

lingo

bergside / awesome-design-skills

活泼简约的设计，采用鲜艳色彩、圆润造型、富有触感的 3D 边框和友好插画，打造亲和力十足的界面。

K

k2f-media-kit

suzheng / k2f

将经核实的公司、产品和领导层信息整理成便于记者使用的媒体资料包，包含易于浏览的事实、标准介绍和素材指南，而非推介演示文稿或销售单页。用户要求媒体资料包、新闻资料包、公关资料包或创作者资源包时使用。使用 AI 原生设计和最高审美标准创建媒体资料包，由 K2F 格式和引擎驱动。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理布局、排版和格式复杂性。

P

pacman

bergside / awesome-design-skills

复古街机风格设计，采用像素字体、点状边框、活泼的高对比度配色和 8 位游戏美学

T

tetris

bergside / awesome-design-skills

经典方块游戏风格设计，采用活泼的色彩、醒目的展示字体，以及紧凑而充满活力的布局

A

ascii-animation

iart-ai / web-animation-skills

当用户要求“制作 ASCII 动画”“构建终端/命令行片头或加载动画”“将图像或视频转换为 ASCII 艺术”“为画布或 Three.js 场景添加 ASCII 着色器/后期效果”“创建复古/黑客风格的字符动效”或“使用亮度渐变动画化文本字符”时，应使用此技能。涵盖生成式 ASCII 字段、图像/视频/3D 转 ASCII，以及适用于 Web 和终端的动画字符艺术。

I

immersive

bergside / awesome-design-skills

沉浸式、交互式的展览风格界面，融合叙事、动画和游戏化元素，打造轻松、以体验为核心的旅程。整个应用呈现在一块连续的品牌色画布上（深绿色）

S

spacing-system

owl-listener / designer-skills

基于一个基准单位创建间距尺度，并规定各级距的适用场景。适用于统一内边距和外边距。页面级列宽与沟槽请使用 `layout-grid`。

C

claude

bergside / awesome-design-skills

呈现印在暖色石材上的研究期刊美学——权威、编辑感十足，近乎无彩色。页面采用暖象牙色羊皮纸（绝非纯白），以近黑色板岩色作为主导墨色。

H

huggingface-gradio

huggingface / skills

用 Python 构建 Gradio 网页界面和演示。在创建或编辑 Gradio 应用、组件、事件监听器、布局或聊天机器人时使用。

E

experience-lwc-rtl-validate

forcedotcom / sf-skills

使用此技能审查 Lightning Web 组件（.html、.js、.css 文件）的从右到左（RTL）国际化正确性，输出带有代码级修复建议的发现清单，涵盖 CSS 逻辑属性、双向文本处理、键盘语义以及支持 RTL 的 SLDS 类。当用户说 \"review this LWC for RTL\"、\"audit i18n compliance\"、\"fix bidirectional text rendering\"、\"replace left/right CSS with logical properties\"、\"check RTL layout issues\"、\"verify SLDS RTL classes\"、\"review my component for Arabic/Hebrew layout\"、\"ensure this LWC works in RTL locales\" 或 \"check bidi text handling\" 时触发。当用户正在构建新的 LWC 时不要触发（使用 experience-lwc-generate）、正在重构 SLDS 类本身时不要触发（使用 design-systems-slds-apply 或 design-systems-slds2-migrate）、或正在进行无障碍/安全审查时也不要触发。

W

web-design-guidelines

bytedance / deer-flow

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

M

motion

onmax / nuxt-skills

在用 Motion Vue (motion-v) 添加动画时使用 —— 提供动效组件 API、手势动画、滚动联动效果、布局过渡，以及面向 Vue 3/Nuxt 的组合式函数

R

responsive-design

owl-listener / designer-skills

设计可适应不同屏幕尺寸和输入方式的布局与交互，适用于一个设计需支持多种视口的情况。底层列网格使用 `layout-grid`；操作系统特定模式使用 `platform-conventions`。

R

react-native-tv-best-practices

callstackincubator / agent-skills

检查 React Native TV 应用的焦点/D-pad 导航、10 英尺 UI 布局、电视播放/DRM 集成、低内存电视性能和电视无障碍支持。在构建、调试或审查 react-native-tvos、Expo TV、Amazon Vega/Kepler 或 React Native web TV 目标，且问题涉及遥控器输入、电视焦点、电视打包、电视硬件或电视播放限制时使用。

C

create-website

wondelai / skills

从空白页面开始，循序引导打造上线且高转化的网站，先构建信息，再设计，最后优化转化。分阶段协调十项技能：one-page-marketing、storybrand-messaging、made-to-stick、top-design、web-typography、refactoring-ui、ux-heuristics、cro-methodology、scorecard-marketing、steve-jobs-design-review；在每个决策点向用户提问，并将结果记录到项目 docs/ 文件夹（POSITIONING.md、WEBSITE.md、CREATE-WEBSITE-PLAN.md），以便跨会话继续流程。用户想从头构建新网站或落地页、将经过验证的想法转化为高转化页面，或提出“build me a landing page for my SaaS”时使用。网站已存在：全站改进使用 improve-website，优化单个流程的转化使用 conversion-optimization，增加流量使用 grow-website；若要构建软件产品而非营销网站，使用 create-app；尚无定位：先使用 create-business，或在此执行定位阶段。若只需单独使用某个框架，请直接调用相应技能。

L

lottie-animation

iart-ai / web-animation-skills

当用户要求“添加 Lottie 动画”“播放 .lottie 或 .json 动画”“在 Web 或移动端集成 Bodymovin/After Effects 动画”“控制 Lottie 播放或片段”“制作滚动驱动的 Lottie”“在运行时重新着色 Lottie”或“将 AE 动画导出为 Lottie”时使用此技能。涵盖 dotLottie/lottie-web 集成、播放控制、交互、主题设置和 AE 导出检查清单。

V

visual-content

kostja94 / marketing-skills

用户希望为不同渠道规划、创建或改编视觉内容（图片、信息图、社交媒体帖子图片）时使用。用户提到“内容图片”“社交媒体图片”“信息图”“视觉内容”“帖子图片”“图片规格”“视觉内容改编”“内容视觉素材”或“社交媒体帖子配图”时也使用。Pinterest 相关内容使用 pinterest-posts。

F

frontend-design

jwynia / agent-skills

创建别具一格、具有高设计质量的生产级前端界面。提供用于审查现有设计的分析工具，以及用于创建配色方案、字体系统、设计令牌和组件模板的生成工具。支持 React、Vue、Svelte 和原生 HTML/CSS。适用于构建网页组件、页面或应用。关键词：design、UI、frontend、CSS、components、palette、typography、tokens、accessibility。

G

gzh-design

isjiamu / gzh-design-skill

微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入（非 Markdown 先自动归一化），也支持“一键自动排版”（自动推断结构+选主题），还支持根据用户描述/参考图生成自定义主题组件库并保存本地复用。触发场景：(1) 用户提到“公众号排版”“公众号文章”“微信排版”“gzh”，(2) 用户想把文章（md/docx/pdf/纯文本）转成公众号 HTML，(3) 用户说“自动排版”“一键排版”公众号内容，(4) 用户想为公众号排版“生成新主题/自定义风格/按这张图做一套组件库”。不用于生成普通网页/落地页/PPT（用前端或 PPT 类 skill）。

E

emilkowalski-motion

nexu-io / open-design

受 Emil Kowalski 动画指南启发的动效设计后续技能。在界面成型之后使用，以克制的产品级手法添加得体的微交互、状态过渡和页面动效。

S

sketch

bergside / awesome-design-skills

友好亲切的手绘草图界面，灵感来自暖米色纸张上的铅笔插画。采用柔和的青绿色品牌点缀、手写风格的大标题和圆角胶囊控件。

W

wireframe-spec

owl-listener / designer-skills

定义线框布局，包括内容优先级、组件位置和标注。用于视觉设计前确定结构。网格机制请使用 `layout-grid`（ui-design）。

M

micro-interaction-spec

owl-listener / designer-skills

完整定义一个微交互，包括触发条件、规则、反馈、循环和模式。将单个交互交付工程团队时使用。仅涉及动效制作时使用 `animation-principles`；多状态组件使用 `state-machine`。

I

impeccable

bergside / awesome-design-skills

现代、图形化的编辑海报美学，温暖而自信，以奶油色和焦橙色交替区块为基础，搭配琥珀色品牌色。

C

codex

bergside / awesome-design-skills

极简的空白画布界面，采用纯粹的无边距表面，几乎不使用颜色，以字体承载主要视觉表现。黑色是唯一的填充色、分隔线颜色，也是卡片唯一的表面色调。

D

dfm

earthtojake / text-to-cad

对钣金、CNC 加工或注塑零件进行可制造性设计审查：检查折弯、避空和展开图；加工可达性、内角、深特征和装夹次数；拔模、倒扣和投影面积。用户询问零件能否折弯、加工或成型，询问可制造性或模具工装，或要求进行 DFM 审查或重新设计时使用。

P

proto-persona

deanpeters / product-manager-skills

根据当前的研究、市场信号和团队知识创建 proto-persona（原型用户画像）。当你在深入验证之前需要一份可用的客户画像时使用。

R

roblox-gui

tabooharmony / roblox-brain

构建或修复 Roblox 菜单、HUD、商店、对话框，或需要在手机、平板、桌面设备和主机上运行的 UI 时使用。

T

terracotta

bergside / awesome-design-skills

采用暖奶油色表面、展示型衬线字体的墨棕色标题和单一赤陶色点缀，打造出经日晒般的陶土色调编辑式界面。