Skills

面向 Codex 与 AI Coding Agent 的个人 Skill 集合。仓库按用途筛选并分类维护，重点覆盖高质量前端 UI、WebGL 叙事、GSAP 动效、产品页面模板、视觉内容生成与浏览器验证。

当前收录 57 个 Skill。这不是本机 Skill 的完整镜像，而是一组适合公开复用的精选能力包。

分类索引

分类	数量	目录	适用场景
创意视觉 / UI / 高端网页设计	19	creative-visual-ui	艺术指导、视觉系统、界面重构、风格化原型
Web / App / 产品页面模板	13	web-app-product-templates	仪表盘、移动端、SaaS、定价页和业务工作台
图片 / 视频 / 音频 / 动画内容	10	media-generation-animation	海报、短视频、精灵动画、音频和内容生产
GSAP / Motion / 3D / 浏览器验证	15	gsap-motion-3d-browser	WebGL、滚动叙事、动效编排、性能与浏览器验收

安装

克隆仓库：

git clone https://github.com/Usernames686/skills.git
cd skills

安装单个 Skill 到 Codex 默认目录：

mkdir -p ~/.codex/skills
cp -R creative-visual-ui/finesse-ui ~/.codex/skills/

也可以安装整个分类：

cp -R gsap-motion-3d-browser/* ~/.codex/skills/

安装完成后，在新任务中直接引用 Skill 名称，例如：

使用 $build-immersive-webgl-story，为人工智能主题制作一个带 3D 场景和滚动叙事的网站。

如果设置了自定义 CODEX_HOME，请将 Skill 放到 $CODEX_HOME/skills/。

前端 UI 核心组合

这组 Skill 可以组成一条完整的高质量前端工作流：

1. 使用 artistic-experience-director 或 artistic-visual-design-pro 确立艺术命题、布局语法和质量门槛。
2. 使用 finesse-ui 完成品牌页面、产品 UI、后台系统、工作流或电商界面的工程化实现。
3. 使用 build-webgl-editorial-hero 构建编辑式 WebGL 首屏，或使用 build-immersive-webgl-story 构建完整的滚动 3D 叙事。
4. 使用 GSAP Skill 处理时间线、ScrollTrigger、框架生命周期、插件和性能优化。
5. 使用 Playwright 与 screenshot Skill 做桌面端、移动端和非空画布验证。

创意视觉 / UI / 高端网页设计

Skill	用途
artistic-experience-director	面向完整网站和重大重构的高强度艺术指导，强调结构原创性、叙事体验和产品级设计系统。
artistic-visual-design	为网页、界面、海报和品牌页面建立艺术命题，避免模板化 AI 视觉。
artistic-visual-design-pro	面向严肃重构的进阶视觉系统，覆盖构图、艺术来源、动效方向和质量验收。
critique	对现有视觉稿或前端页面进行批评性检查并提出具体改进。
design-brief	将模糊需求整理为可执行的设计简报。
design-taste-frontend	为前端实现补充布局、排版、色彩和细节层面的设计判断。
distill-interactive-reference	提炼交互参考的体验机制与感知强度，并将其转译为不复制身份、布局和素材的原创前端体验。
finesse-ui	构建高完成度品牌页、仪表盘、后台、工作流和电商界面，包含反廉价感规则、配色库和示例。
gpt-taste	提供通用视觉品味约束，减少默认模板和常见 AI 设计套路。
high-end-visual-design	面向高端品牌与展示型网页的视觉语言和表现力增强。
industrial-brutalist-ui	构建工业感、粗野主义和强网格语言的界面。
minimalist-ui	构建克制、清晰、留白明确的极简界面。
redesign-existing-projects	在保留现有产品功能的前提下系统性重构界面。
stitch-design-taste	约束 Stitch 类界面生成任务的视觉品质与一致性。
tweaks	对已有页面做小范围但高影响的视觉微调。
web-prototype-taste-brutalist	生成粗野主义风格的网页原型。
web-prototype-taste-editorial	生成编辑设计和杂志排版风格的网页原型。
web-prototype-taste-soft	生成柔和、亲和且保持专业感的网页原型。
wireframe-sketch	快速创建用于沟通结构和流程的线框草图。

Web / App / 产品页面模板

Skill	用途
dashboard	数据仪表盘与指标界面。
dating-web	约会与社交产品网页。
digital-eguide	数字指南、教程和内容型产品。
docs-page	文档站与开发者内容页面。
gamified-app	带成长、积分和反馈机制的游戏化产品。
kanban-board	看板式任务和流程管理界面。
mobile-app	移动应用页面与响应式交互。
mobile-onboarding	移动端首次使用和引导流程。
pm-spec	产品需求、功能规范和交付说明。
pricing-page	定价、套餐对比和转化页面。
saas-landing	SaaS 产品落地页。
team-okrs	团队目标与关键结果管理界面。
web-prototype	通用网页原型和快速验证。

图片 / 视频 / 音频 / 动画内容

Skill	用途
audio-jingle	创建短音频标识与提示音。
hatch-pet	生成和打包 Codex 宠物动画资源。
hyperframes	构建高密度动态视觉、转场和音频响应内容。
image-poster	生成图片型海报。
magazine-poster	生成杂志与编辑排版风格海报。
motion-frames	创建分镜、关键帧和动效画面。
social-carousel	创建社交媒体轮播内容。
sora	使用 Sora 进行视频生成、提示词设计和任务排错。
sprite-animation	创建精灵图与逐帧动画。
video-shortform	创建短视频内容与节奏编排。

GSAP / Motion / 3D / 浏览器验证

Skill	用途
blueprint-energy-webgl	将蓝图、线框或工程图转化为可交互的 WebGL 能量激活场景。
build-immersive-webgl-story	构建 Three.js/WebGL、GSAP 与滚动叙事结合的电影感沉浸式网站，包含脚手架和验证脚本。
build-webgl-editorial-hero	构建编辑式 WebGL 首屏、程序化 Shader 场景和连贯的完整页面。
gsap-core	GSAP 基础 Tween、缓动、stagger、默认值与响应式动画。
gsap-frameworks	Vue、Nuxt、Svelte 等框架中的 GSAP 生命周期与清理。
gsap-performance	动画性能、合成属性、批处理和卡顿优化。
gsap-plugins	ScrollSmoother、Flip、Draggable、SplitText、SVG 与物理类插件。
gsap-react	React 和 Next.js 中的 useGSAP、作用域与卸载清理。
gsap-scrolltrigger	滚动触发、固定、scrub、视差和章节驱动动画。
gsap-timeline	多段动效编排、位置参数、嵌套时间线和播放控制。
gsap-utils	clamp、mapRange、snap、wrap 等 GSAP 工具函数。
threejs	Three.js 场景、材质、交互、后期处理、性能、Shader 与 WebGPU 参考。
playwright	使用 Playwright 自动化浏览器测试和页面验证。
playwright-interactive	交互式控制浏览器并持续检查页面状态。
screenshot	截取网页或桌面画面并处理平台权限。

仓库结构

每个 Skill 至少包含一个 SKILL.md，并可按需要附带：

• agents/：Codex 展示与调用配置。
• assets/：模板、图标或可复用资源。
• references/：按需读取的详细参考资料。
• scripts/：脚手架、校验或自动化脚本。
• examples/：示例页面与实现参考。

manifest.json 记录每个 Skill 的名称、分类和目录路径，可用于索引或自动化安装。

维护原则

• 只同步适合公开复用的 Skill，不上传本机配置、缓存、密钥或私有数据。
• 保留 Skill 的目录结构，确保内部相对路径有效。
• 更新已有 Skill 时同步其引用文件、脚本、模板和示例。
• 使用前请查看各 Skill 的 license 字段或附带许可证文件。