前段时间把工作流从 Codex 迁移到了 Claude Code，顺手把手上真正在用的技能理了一遍——不是技能商店里随手截的图，是自己装机目录里、会被反复用到的那些。

一共 79 个，按平时实际会用到的场景分成了 12 类：内容自媒体、求职简历、AI生图素材、视频制作、Figma、设计系统品牌、前端开发、页面版式风格、幻灯片演示、动效3D、质检评审、工具自动化。

装好之后不用记命令，对话里提到对应场景的关键词，AI 会自动接手。

01 内容·自媒体：选题到公众号一条龙

• daily-topic-radar —— 每日选题雷达
• xhs-visual-director —— 小红书图文视觉总监
• xia-mei-ai-editorial —— 虾妹 IP 视觉体系
• publish-wechat-article —— Markdown 转公众号精排版
• card-xiaohongshu —— 小红书风格知识卡片
• deck-guizang-editorial —— 电子杂志×电子墨水风版面
• design-assistant —— 资深设计助理
• handdraw-good-deed-story —— 手绘善意故事视频

02 求职·简历

• run-ai-job-search —— 证据驱动的完整求职流程
• career-ops —— 求职指挥台
• executive-resume-writer —— C-level / VP 级简历
• portfolio-case-study-writer —— 作品集案例故事
• latex-document-skill —— LaTeX / PDF 全流程

03 AI生图·素材

• ai-image-generator —— 直连 Gemini / GPT 出图
• gpt-image-2 —— GPT Image 2 专用生图/改图
• lovart —— Lovart AI 生成图片、视频、音乐
• xydesign —— 3D 潮玩质感角色
• brandkit —— 高端品牌视觉板
• universal-layered-assets —— 分层视觉素材
• local-background-removal —— 本地抠图
• hatch-pet —— 动画宠物精灵表

04 视频制作

• libtv-skill —— liblib.tv AI 图片/视频生成
• libtv-cli —— LibTV 官方命令行
• video-use —— 对话式剪辑
• video-shotcraft —— 电影感产品片
• remotion —— Remotion 演示视频生成
• web-video-presentation —— 点击驱动的网页演示

05 Figma：设计稿和代码互相翻译

• figma-use —— use_figma 前置技能
• figma-generate-design —— 页面翻译成 Figma 稿件
• figma-generate-library —— 代码库反向搭 Figma 设计系统
• figma-implement-design —— Figma 稿 1:1 还原前端
• figma-create-new-file —— 新建 Figma 文件
• figma-create-design-system-rules —— 生成设计系统规则

06 设计系统·品牌

• ckm-brand —— 品牌语调、视觉识别
• ckm-design-system —— 三层令牌体系
• ui-ux-design-system —— 令牌+组件规格+品牌合规
• ui-ux-pro-max —— 全家桶：品牌、令牌、Logo
• tailwind-design-system —— 重构 Tailwind 设计系统
• design-system-extractor —— 反推设计系统
• component-library-builder —— 搭建组件库

07 前端开发

• frontend-ui-engineering —— 生产级 UI
• frontend-design —— 带明确视觉方向做前端
• web-design-engineer —— HTML/CSS/JS/React 可视化交付
• frontend-css-patterns —— 生产级 CSS 模式
• shadcn-ui —— shadcn/ui 接入与开发
• shadcn-layouts —— 布局稳定
• react-components —— Stitch 稿转 React 组件
• image-to-code —— 设计图转网站

08 页面·版式风格

• hallmark —— 反 AI 味设计
• huashu-design —— HTML 高保真原型
• design-taste-frontend —— 反套路落地页
• editorial-graphic-design —— 杂志感版式
• landing-page-design —— 落地页转化优化
• ckm-banner-design —— Banner 设计
• app-store-screenshots —— 上架截图页
• dashboard —— 看板版式
• bento —— 便当格
• bold —— 重量级字体
• brutalism —— 粗野主义

09 幻灯片·演示 + 动效·3D

幻灯片：frontend-slides, frontend-slides-editable

动效·3D：motion-design, interaction-design, p5-animation, 3d-web-builder, sandbox-safe-glb-renderer

10 质检·评审

• design-review —— 设计师之眼 QA
• claude-page-review —— 页面审查
• accessibility-review —— 无障碍检查
• responsive-qa —— 响应式审计
• playwright-visual-qa —— Playwright 视觉 QA
• design-shotgun —— 散弹式设计

11 工具·自动化

• playwright —— 终端驱动浏览器
• playwright-interactive —— 浏览器常驻调试
• screenshot —— 系统级截图
• cowart —— 操作 Cowart / tldraw 画布
• codex-auto-report —— 定时报告
• od_contribute —— 给 Open Design 提 PR
• redesign-existing-projects —— 网站质感升级

12 怎么用起来

把技能装进 .claude/skills，对话里提到对应场景的关键词，AI 会自动接手。工具不是越多越好，场景对上了才有用。