Skills

C

cta-writing

guia-matthieu / clawfu-skills

掌握撰写高转化行动号召的技巧。通过直接型和过渡型行动号召、按钮文案及微文案，将读者转化为客户。适用于：为着陆页和电子邮件撰写按钮文案；为不同认知阶段创建行动号召；设计吸引点击的微文案；对行动号召变体进行 A/B 测试；构建逐步引导的电子邮件序列

D

descript-ui-skills

ihlamury / design-skills

Descript 的 UI 设计系统。构建采用 Descript 风格的界面时使用：深色模式、Inter 字体、4px 网格。

G

gusto-ui-skills

ihlamury / design-skills

Gusto 的 UI 设计系统。构建采用 Gusto 风格的界面时使用：浅色模式、Inter 字体、4px 网格。

I

install

subframeapp / subframe

将 Subframe 安装到代码库中，以便在本地实现设计。配置 CLI、同步组件，并设置 Tailwind 和字体。只有准备开始编写代码时才需要安装；无需安装即可进行设计。

I

interaction-design

poteto / noodle

设计并实现微交互、动效设计、过渡效果和用户反馈模式。适用于优化 UI 交互、实现加载状态、创建基于手势的交互、设计悬停/焦点状态、构建通知/Toast 系统、添加滚动触发动画、实现拖放功能或打造愉悦的用户体验。

I

ios-26-platform

johnrogers / claude-swift-engineering

实现 iOS 26 功能（Liquid Glass、新 SwiftUI API、WebView、Chart3D）、部署 iOS 26 及更高版本应用，或支持与 iOS 17/18 的向后兼容时使用。

M

mem-ui-skills

ihlamury / design-skills

Mem 的 UI 设计系统。构建采用 Mem 风格的界面时使用：浅色模式、Inter 字体、4px 网格。

M

motion-v13

blockmatic / basilic-skills

使用 Motion v13 实现 React 动画（手势、滚动、布局、SVG）。适用于拖放、滚动动画、模态框、轮播、视差或 AnimatePresence 相关问题。

M

motion-v13

blockmatic-icebox / basilic-skills

Basilic Workflow Agent 技能

S

simple-deck

nexu-io / open-design

OpenDesign 的运营评审：增长、消耗，以及在不失开放理念的前提下实现可持续发展的具体路径。为领导团队打造的决策级企业战略演示文稿。

S

sprite-animation

nexu-io / open-design

像素／精灵图风格的动画解说幻灯片：全幅奶油色舞台、醒目的年份标题、动画像素艺术吉祥物（如花札、蘑菇或 8 位游戏机）、动感日文展示字体和滴答前进的时间轴横幅。呈现为教育类动态视频的单帧，使用循环 CSS 关键帧，不用 JS，可直接录屏制作竖屏视频。需求提到“sprite animation”“pixel-art video”“8-bit explainer”“history of X explainer”“kinetic typography history”“Nintendo-style”“精灵图动画”“像素动画”或“复古动画”时使用。

S

supanova-design-engine

uxjoseph / supanova-design-skill

Supanova 落地页设计引擎。使用纯 HTML + Tailwind CSS (CDN) 生成高品质、注重转化的落地页。克服 LLM 对通用模板的默认偏好。对独立 HTML 输出强制执行基于指标的设计规则、韩文排版标准和硬件加速动效。

T

things-ui-skills

ihlamury / design-skills

Things 的 UI 设计系统。构建受 Things 风格启发的界面时使用，包含浅色模式、Inter 字体和 8px 网格

U

using-design-skills

ohyeh / agent-scripts

确定使用哪种设计技能及其顺序。在生成任何视觉内容之前调用：网页、落地页、仪表板、产品 UI、移动屏幕、HTML 报告、图表、计划页面、制品、动画、重新设计、“做個頁面”、“畫圖”、“報告做成網頁”，以及模块或 API 接口设计。为每个阶段选择一位方向负责人和一位执行者，并以证据检查收尾。即使只有 1% 的可能性，也要调用。

W

weights-biases-ui-skills

ihlamury / design-skills

Weights Biases 的 UI 设计系统。构建采用 Weights Biases 风格的界面时使用：浅色模式、Inter 字体、4px 网格。

B

brandkit

rheinmir / setup

高端品牌视觉生成工具，用于创建品牌指南手册、logo 系统、品牌识别方案和视觉世界展示。支持极简主义、电影感、编辑、暗科技、奢侈、文化、安全、游戏、开发者工具和消费应用等品牌系统。优化了品牌 logo 概念化、精细构图、简洁排版、强烈符号意义、高端样机、艺术指导影像和灵活网格布局。

C

codeium-ui-skills

ihlamury / design-skills

Codeium 的 UI 设计系统。构建受 Codeium 风格启发的界面时使用，包含深色模式、Inter 字体和 4px 网格

C

convertkit-ui-skills

ihlamury / design-skills

Convertkit 的 UI 设计系统。构建受 Convertkit 风格启发的界面时使用，包含浅色模式、Inter 字体和 4px 网格

D

design-system-boss

arla6ka / skills

适用于已上线 UI 的应用中较笼统的全应用设计系统需求，例如“我们的 UI 一团糟，修一下”“我们需要设计系统”“颜色到处都是硬编码”“让按钮保持一致，以便提交上游 PR”“编写完整设计系统文档”或“发布前检查应用”。先对应用进行分诊，再依次运行 design.how 技能。指定一个屏幕时使用 ui-review，指定一个组件时使用 component-docs，空仓库则使用 build-design-system。

F

frontend-design-review

microsoft / skills

审查并创建具有鲜明特色、可用于生产环境的前端界面，确保高设计质量并符合设计系统规范。通过三个支柱进行评估：顺畅的洞察到行动、高质量的工艺和可信赖的构建。适用于：PR 审查、设计审查、无障碍审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试，以及创建令人印象深刻的 UI。不适用于：后端 API 审查、数据库架构审查、基础设施或 DevOps 工作、没有 UI 的纯业务逻辑，或非前端代码。

H

high-end-visual-design

rheinmir / setup

教导 AI 像高端代理机构一样进行设计。定义精确的字体、间距、阴影、卡片结构和动画，使网站看起来昂贵。阻止所有常见的默认设置，防止 AI 设计看起来廉价或通用。

L

link-purpose

accesslint / skills

暂无简介

M

marketing-vs-product-system

dembrandt / dembrandt-skills

营销站点与其产品在密度和规模上可能不同，但共享同一套 token 层。当两者出现偏离、共享组件或需要单一 token 负责人时使用。

M

migrate-design-system

arla6ka / skills

适用于需要将应用迁移到现有设计系统的情况，例如“将应用迁移到我们的设计系统”“把所有屏幕改用新组件”、推广上线或采用情况审计。如果已安装 design-system-boss，且尚无人检查系统规范，应先由 boss 进行分诊，因为迁移会将薄弱系统的缺陷复制到各处。不用于创建设计系统。

M

mixpanel-ui-skills

ihlamury / design-skills

Mixpanel 的 UI 设计系统。构建受 Mixpanel 风格启发的界面时使用，包含浅色模式、Inter 字体和 4px 网格

M

Mockup Generator

jmsktm / claude-settings

创建逼真的产品样机和演示文稿

P

parametric-3d-printing

flowful-ai / cad-skill

当用户希望设计要实际制造的 3D 打印实体物品时使用此技能。触发条件：提到“3D print”、“STL”、“parametric model”、“Gridfinity”、“enclosure”、“bracket”、“mount”、“case”、“housing”、“CadQuery”、“OpenSCAD”或特定 FDM 打印机（Bambu Lab、Prusa、Ender）；询问适合打印的设计、卡扣、配合公差或壁厚；请求制作 Arduino 外壳、理线器、墙壁支架、适配器或机械部件等功能零件。用户描述要制作的真实实体物品，且目标是制造时也会触发。不适用于：3D 渲染、动画、游戏资产、纯数字艺术、摄影测量、雕刻、编辑用户已有的 STL 文件，或任何不面向打印的 3D 工作。

R

readwise-ui-skills

ihlamury / design-skills

Readwise 的 UI 设计系统。构建受 Readwise 风格启发的界面时使用，包含浅色模式、Inter 字体和 4px 网格

R

redesign-existing-projects

rheinmir / setup

升级现有网站和应用至高级质量。审核当前设计，识别通用 AI 模式，并在不破坏功能的前提下应用高端设计标准。适用于任何 CSS 框架或原生 CSS。

R

rippling-ui-skills

ihlamury / design-skills

Rippling 的 UI 设计系统。构建受 Rippling 风格启发的界面时使用，包含深色模式、Inter 字体和 4px 网格

S

stitch-design-taste

rheinmir / setup

Google Stitch 的语义设计系统 Skill。生成 Agent 友好的 DESIGN.md 文件，强制执行高端、反泛型 UI 标准——严格的排版、校准的色彩、不对称布局、持续的微动画和硬件加速性能。

T

ticktick-ui-skills

ihlamury / design-skills

Ticktick 的 UI 设计系统。用于构建具有 Ticktick 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

T

token-mapping

arla6ka / skills

报告页面、文件或差异中的硬编码样式值如何对应项目现有的设计令牌，优先按用途、其次按值进行匹配。适用于“这里用了我们的令牌吗”“哪些硬编码颜色对应哪些令牌”、令牌审计或规划令牌迁移。不会编辑内容，也不会创建或重命名令牌。修复和全应用一致性工作请交给 design-system-boss。

T

tour-guide-supademo

rheinmir / setup

Style thiết kế Supademo cho in-app product tour (dùng kèm skill tour-guide — component gốc 0 dependency): blinker hotspot pulse, tooltip card, step counter + nav buttons, progress bar, theme tokens — quy ra recipe Tailwind/CSS dùng ngay. Trigger: "/tour-guide-supademo", "tour kiểu Supademo", "style supademo", "blinker hotspot". Quy ước: style distill từ sản phẩm khác sẽ là skill riêng /tour-guide-<tên>.

Z

z-wanghong-handwritten-ppt

tjxj / z-skills

将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片，逐页导出 PNG，并默认同时生成可逐条播放动画的时间轴版 HTML。触发词：王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风、手写PPT时间轴版、手写演示动画。

A

ashby-ui-skills

ihlamury / design-skills

Ashby 的 UI 设计系统。用于构建具有 Ashby 风格的界面，包括深色模式、Inter 字体和 4px 网格。

暂无简介

C

cal-ui-skills

ihlamury / design-skills

Cal 的 UI 设计系统。用于构建具有 Cal 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

C

cursor-animated-sites

rheinmir / setup

基于 /docs-site-macos 的玻璃主题，构建交互式“光标动画演示”页面：左侧为窄步骤列表，右侧为宽幅动画文件夹树；箭头光标在每行开始时位于缩进区，并随每一步从控制器移动到文件；文件仅在创建时像转录文本一样逐字显现（此前不存在）；节点按角色（源/读取、目标/写入、传递、判定）着色并带有文字标签；每步使用独立强调色；提供手动“step”模式和自动播放模式；画面下方的说明文字讲述当前帧。适用于说明安装到运行时的生命周期、序列、数据流，或任何需要让观看者看清每个操作涉及哪个文件的“逐步讲解”。沿用 /docs-site-macos 的基础玻璃设计系统。

D

deel-ui-skills

ihlamury / design-skills

Deel 的 UI 设计系统。用于构建具有 Deel 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

D

design-system-creator

curiositech / some_claude_skills

使用可用于生产环境的 CSS 构建全面的设计系统和设计规范。精通设计令牌、组件库和 CSS 架构。适用于设计系统创建、令牌架构，

D

discovery-research-synthesis

rampstackco / claude-skills

将研究材料转化为可执行的 PM 洞察。综合客户访谈、用户研究笔记、支持工单评审、销售通话记录、调查数据和应用内反馈，为其应支持的决策提供依据。这是一种将原始探索数据转化为清晰产品方向的方法，既不在综合过程中丢失信号，也不编造并不存在的洞察。适用于研究综合、客户访谈综合、用户研究分析、探索研究汇报、研究洞察、销售通话分析、支持工单分析和定性数据分析。团队已完成研究却无法将其转化为决策、综合结果只有精美演示文稿却未推动路线图，或即将做出的 PM 决策需要基于已有研究时，也适用。

E

emil-design-eng

boraoztunc / skills

此技能编码了 Emil Kowalski 关于 UI 打磨、组件设计、动画决策和使软件感觉出色的隐形细节的哲学。

F

frontend-design

boraoztunc / skills

创建具有鲜明特色、达到生产级水准且设计质量出色的前端界面。用户要求构建 Web 组件、页面、制品、海报或应用时使用此技能，例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 添加样式或美化。生成富有创意且精致的代码和 UI 设计，避免千篇一律的 AI 风格。

I

image-to-code

rheinmir / setup

Codex 的高级网站图像转代码技能。对于视觉上很重要的网页任务，它必须首先生成设计图像，深入分析，然后实现网站以尽可能接近地匹配。在 Codex 中，它必须优先考虑大型、易读的分部分图像而不是微小的压缩板，为分部分或详细视图生成新的独立图像而不是裁剪旧图像，避免懒惰的生成不足，避免卡片套卡片套卡片的 UI，并保持英雄部分整洁、宽敞、易读，在小笔记本上可见。

I

industrial-brutalist-ui

rheinmir / setup

融合瑞士印刷美学与军事终端风格的原始机械界面。严格网格、极度字号对比、实用主义配色、模拟衰退效果。适用于需要呈现解密蓝图感的数据密集仪表板、作品集或编辑类网站。

I

intercom-ui-skills

ihlamury / design-skills

Intercom 的 UI 设计系统。用于构建具有 Intercom 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

L

loops-ui-skills

ihlamury / design-skills

Loops 的 UI 设计系统。用于构建具有 Loops 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

M

minimalist-ui

rheinmir / setup

简洁的编辑风格界面。温暖的单色调配色、排版对比、扁平便当网格、柔和的柔色调。无渐变、无厚重阴影。

P

presentation-design

agentara / skills

生成一张由单幅复合图像组成的高端 6 页演示文稿设计板。用户要求 PPT 设计概念、Keynote 风格幻灯片样稿、策略演示文稿视觉设计、编辑／体育／新闻／商业分析演示文稿、适合电视观看的幻灯片布局，或任何“6 页幻灯片设计板”“设计这些幻灯片”“PPT 设计稿”“幻灯片设计图”时使用此技能。该技能逐页规划演示文稿，询问用户选择浅色或深色模式，从指定布局库中选择版式，让用户批准方案，然后生成复合图像并对渲染结果进行自我评估。不要用于纯文本演示文稿大纲（用户需要的是文字，而非视觉内容）、单页设计（此技能始终生成 6 页）或可实时编辑的 PPTX／Keynote 文件（此技能生成渲染图像）。

R

railway-ui-skills

ihlamury / design-skills

Railway 的 UI 设计系统。用于构建具有 Railway 风格的界面，包括深色模式、Inter 字体和 4px 网格。

R

refactoring-ui

s0xdk / refactoring-ui-skill

使用 Refactoring UI（Wathan & Schoger）中的具体规则设计和改进用户界面：限制间距、字体、颜色和阴影的尺度；通过字重和颜色而非尺寸建立视觉层次；通过模拟光线营造深度。适用于构建或美化任何 UI（网页、应用、仪表板、落地页、组件），选择字号、间距、颜色、阴影或边框圆角，设计调色板或设计令牌，或有人表示 UI“看起来不对”“显得业余”“感觉杂乱／单调／未完成”，或要求“让它看起来更好”时。

S

section-508

sushegaad / claude-skills-governance-risk-and-compliance

美国联邦 ICT 无障碍合规领域的 Section 508 专家顾问。用户询问 Section 508、联邦系统的 WCAG 2.0/2.1 AA、VPAT 或无障碍符合性报告（ACR）、无障碍审计、整改规划、PDF 无障碍、网站或软件无障碍、移动无障碍、联邦采购无障碍要求、承包商义务、过度负担豁免、辅助技术兼容性或 Section 508 测试时，均使用此技能。涵盖修订版 Section 508 标准（2018）、所有 WCAG 2.0 AA 级成功标准、POUR 四项原则、测试方法和机构合规工作流。即使用户没有提到“技能”，只要涉及联邦系统的 Section 508 或 ICT 无障碍问题，都应使用此技能。

S

segment-ui-skills

ihlamury / design-skills

Segment 的 UI 设计系统。用于构建具有 Segment 风格的界面，包括浅色模式、Inter 字体和 4px 网格。

V

visiomaster

rss3208 / visiomaster

以 Windows 为先的 Visio 图表重建工作流，适用于流程图、架构图和论文风格的模块图。前期沿用 ppt-master 的风格分析和构图规范，但通过 scene.json 到 Visio 的流程输出可编辑的 Visio .vsdx 文件，以及导出的 .svg 和 .png。用户希望将图表重建为可编辑的 Visio 图形，而不是粘贴截图或仅生成 PPT 时使用。

W

web-design-guidelines

vudovn / ag-kit

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

创建独具特色、达到生产级质量的前端界面，具有高

B

build-design-system

arla6ka / skills

当请求指定设计系统工作的某个阶段（例如“从应用中提取设计令牌”或“为 Button 添加状态和规格”），或针对空仓库（例如“从头开始构建设计系统”）时使用。已发布应用的整应用请求（“我们需要一个设计系统”）应交由已安装的 design-system-boss。将应用迁移到现有系统则使用 migrate-design-system。

C

coda-ui-skills

ihlamury / design-skills

Coda 的 UI 设计系统。用于构建受 Coda 美学风格启发的界面，采用浅色模式、Inter 字体和 4px 网格。

C

component-docs

arla6ka / skills

根据代码、stories 和真实调用点，按照 Geist 风格的页面顺序编写单个组件的文档条目。适用于“编写按钮文档”、“编写 Select 文档”、“Toast 有哪些状态”、组件使用规则，或新增、变更组件。跳过基础规范、概览页面和多组件模式。整个设计系统的文档交给 design-system-boss。