LemonFace0309/charles-skills

项目介绍

这个仓库收集了一组面向会读取 SKILL.md 的编程 Agent 的技能，支持 Claude Code、Codex 等。技能聚焦界面设计与呈现，而非代码生成：charles-unslop 将「AI 味」界面围绕一个明确的设计想法重新组织；charles-polish 对已有 UI 逐步改进并逐帧检查动效；charles-ux-animation 把 UX 与动画原则整理为构建和审查流程 charles-ux-animation；charles-unreasonable-craft 推动 Web 与应用设计向获奖级水准靠拢 charles-unreasonable-craft。

部分技能负责产出素材：charles-accent-heroes 围绕一种醒目强调色生成落地页主图 charles-accent-heroes，charles-store-screenshots 按 iPhone、iPad 的确切尺寸渲染 App Store 截图组 charles-store-screenshots，charles-arcade-motion 制作与配音对齐的像素风动态图形 charles-arcade-motion。另外两个技能负责日常维护与剪辑：charles-storage-cleanup 找出 Mac 上占空间的文件，并支持先出报告再删除 charles-storage-cleanup；charles-claude-editing 按作者自己的工作流把口播视频剪成 Reels 和 TikTok charles-claude-editing。

快速使用

用 skills CLI 将单个技能安装到项目中，按需替换技能名：

npx skills add LemonFace0309/charles-skills --skill charles-unslop

加 -g 可安装到所有项目。手动安装时克隆仓库，把技能文件夹复制到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/：

git clone https://github.com/LemonFace0309/charles-skills
cp -R charles-skills/skills/charles-unslop ~/.claude/skills/

新开一个 Agent 会话，按 README 中列出的名称调用：

/charles-unslop this login page
/charles-polish the checkout flow, then verify the motion frame by frame

Codex 使用 $charles-unslop，而不是斜杠语法。

使用约束

技能本质是 SKILL.md 指令，能力受宿主 Agent 限制。生成素材的技能有额外依赖：charles-accent-heroes 需要 Python 和 OpenAI API Key，其文字检查仅限 macOS；charles-store-screenshots 需要 Python、Playwright 和 Chrome，生成图片需要 OpenAI API Key。charles-storage-cleanup 面向 Mac 存储；charles-claude-editing 写死了作者的音乐和音效路径，需要自行修改。charles-arcade-motion 未附带精灵图库，需自行生成角色。仓库元数据未声明许可证，但鸣谢说明 charles-unslop 改编自 CC BY 4.0 的 unslop，charles-ux-animation 参考了 userinterface.wiki 和 Laws of UX。