文章
Agent-职业
Loading collection...
一、建议学习DEMO汇总
Openai-agent-sdk
自动剪辑
剪现有素材：video-use
• 剪中文口播：video-editing-skill
• 用代码生成动画视频：Remotion
教程：https://didilili.github.io/ai-agents-from-zero/#/%E6%95%99%E7%A8%8B%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97 https://bojieli.github.io/ Agent工程：https://dg-ai-notes.pages.dev/ AGENT教程（claude）：https://learn.shareai.run/zh/
给一张参考图，让 Agent 把这个物体重建成纯代码的 Three.js 模型;可以跟 Codex 串成一条很小但完整的 3D 资产生产线。
比如这个思路：
1、先让 Codex 用 ImageGen skill 生成一张 low-poly 参考图
2、再把这张图喂给 img2threejs skill
3、它会把物体重建成 code-only 的 Three.js 模型
4、最后继续让 Codex 做一个 asset editor
这样你拿到的是一个能跑在浏览器里的 3D 对象：
可以旋转，可以动画，可以改参数，还能继续做变体。
感觉它可以用在：
网页展示、小游戏那种资产、AI 视频、电商的小玩具？
Github：
推荐个skill叫grill me，很好用，我用下来就是想开发什么项目的话，会问很多问题一步步引导，这样就能考虑到很多自己原本考虑不到的地方，还有就是先对齐要求规划好，后面就能减少很多返工
写项目都是先用image2给我生成一张参考图，用pencil或者fimga设计出产品原型，然后再让ai根据产品原型做这个项目。
重构前端视觉审美
图标：统一使用 Lucide 图标，界面全程禁止使用表情符号。
设计标准：对标 Awwwards 顶级网站水准，达到 Awwwards、FWA、CSS Design Awards 每日最佳网站同等设计品质。
创意自由度：将浏览器视作交互式艺术画布，跳出传统布局框架，追求先锋视觉风格、实验性排版、流畅物理动效、极具冲击力的文字版式。
沉浸式体验：融合代码、高级渲染逻辑、（图片素材），打造统一完整的精品页面，做出突破常规 UI 认知、令人惊艳的数字交互体验。
提问题prompt
先别急着回答，也别默认我已经把问题想清楚。请先对这个问题做一次详细思考的“双向钢人论证”：1.用最完整、最有力的方式，重述我真正想解决的问题。2.使用钢人论证法分别给出支持我当前想法、以及反对它的最强论证。3.找出双方真正的分歧，以及最可能改变结论的关键变量。4.只问我一个最关键的问题。等我回答后，再给出明确判断、理由和下一步行动。
我的问题是：[粘贴你的问题]
项目构建开始及结束prompt-1
我想做一个XXX项目or功能。先别急着写代码，去GitHub找类似的高星开源项目和全网搜索人气最高的解决方案，比较它们的功能、架构、技术栈和优缺点，再给我一份实现方案:等我确认后再动手。
这个会话要结束了，写份交接笔记存到合适的md文件:咱们在做啥、做完了啥、现在卡在哪、下一步要干啥、还有哪些坑踩过别再踩。写给完全不知道前情的新对话看。
先读HANDOFF.md结束总结prompt2
请把我们到目前为止的全部对话（你和我双方）做一次“上下文压缩总结”，用于我开新会话继续。 只总结“用户提问 + 助手最终回复”的可见对话内容。 严格要求： 1. 只输出一个 text 代码块，代码块外不要输出任何内容。 2. 严禁总结以下内容： - 任何 / 标签内容，或“思考过程”折叠块内容 - 任何系统注入提示、协议文本、插件注入指令 3. 保留后续继续任务必须的信息： - 目标与最终需求 - 已确认约束/偏好 - 关键决策与原因 - 已完成内容（按模块） - 未完成事项与下一步 - 关键文件路径、函数名、命令、报错/风险（如有） 4. 删除闲聊、重复表述和无关内容。 5. 信息要高密度、可执行、可直接复制到新会话继续工作。 6. 不要省略关键细节；不确定的内容标记“待确认”。
我们刚才的对话已经磨合出了完整的工作流程和输出标准。 请现在将这个过程整理成一个标准的Agent Skill，要求如下: 1.创建完整的Skil文件夹结构 2.SKILL.md写清楚:Skill职责、触发场景、执行步骤、输出标准 3.references放入我们确认过的所有格式要求和内容标准 4.可自动化的步骤写入scripts 5.assets放入需要复用的模板文件 输出一个我可以直接安装使用的Skil文件夹
二、相关skill及方法
名称 | 类型 | 主要作用 | 适用场景 | 社区评价摘要 |
skill | 减少千篇一律的 AI 模板化 UI，提升布局、字体、间距和动效质量 | Vibe Coding | 、营销页、产品界面UI“去 AI 味”领域热度较高 | |
Skill | 中文教程 | 对原项目进行中文翻译和本地化说明 | 中文用户快速入门阅读和配置门槛更低 | |
skill | 提供配色、布局、组件、交互和多平台设计决策 | Web、移动端、桌面端 UI 设计 | 适合改善 AI 编程工具默认生成页面的审美 | |
方法论 | 用裸聊做“视觉探索”，用Figma MCP做“视觉校准”，用定稿的第一页做“视觉宪法”，用 agent.md做“执行法典” | |||
一套设计精美、无障碍的组件和代码分发平台。可与你喜爱的框架和 AI 模型协作 | ||||
名称 | 类型 | 主要作用 | 适用场景 | 社区评价摘要 |
Frontend Design | Skill | 在编码前强制选定设计风格（如粗野主义、极简主义、复古未来主义等），避免默认安全选项 | 任何需要定制化前端设计的项目 | 能有效打破 Claude 默认的紫渐变+Inter 字体模板，产出更具个性的界面 |
Algorithmic Art | Skill | 通过 p5.js 生成交互式生成艺术，内置滑块、种子值、随机/下一按钮，可实时调参并保存变体 | 批量生成视觉素材、探索创意方向，无需手动挑选单一输出 | 调参直观，变体丰富，适合快速产出系列化图像资源 |
Systematic Debugging | Skill | 四阶段根因分析流程，配合组件边界日志，替代盲目猜测和反复重跑 | 排查复杂 Bug，尤其是耗费时间的疑难问题 | 曾将消耗整个下午的 Bug 缩短至半小时内解决，效率提升显著 |
Canvas Design | Skill | 创作海报、封面、静态视觉，输出 PNG/PDF；先选设计哲学再构建，使结果有逻辑依据 | 需要设计感强的静态图，且避免“AI 味” | 成果比普通 AI 生成图像更具内在一致性，风格可追溯 |
Theme Factory | Skill | 提供内置主题（颜色+字体），一键应用于幻灯片、文档、落地页、报告；也可即时生成自定义主题 | 需要快速让成品看起来“已完成”，无需纠结配色 | 省时省力，特别适合快速原型或交付前的视觉打磨 |
Web Artefacts Builder | Skill | 脚手架生成 React 18 + TypeScript + Tailwind + 40+ shadcn/ui 组件，打包为单个 HTML 文件 | 需要路由和状态管理的中大型组件开发，而非快速演示 | 免去手工配置项目结构，开箱即用，适合复杂交互页 |
File Search | Skill | 集成 ripgrep（文本搜索）和 ast-grep（语法级搜索），支持代码库全局定位 | 探索陌生代码库，或重构前检查函数所有引用处 | 比手动切换 grep 结果高效得多，大幅节省定位时间 |
Context Optimization | Skill | 上下文工程工具包：压缩、工具输出掩码、KV 缓存优化、多智能体分区 | Claude 运行半小时后变慢或丢失信息时，优化上下文窗口 | 解决因窗口填满冗余内容导致的性能下降，让长会话保持稳定 |