牧码人--Vibe Coding作品和资源

Resource Library

资源中心

教程、Prompt 素材、工具指南和知识库沉淀在这里。

投稿资源
资源类型
全部类型 插件|skill Prompt素材 提示词 优质合集 知识库
插件|skill 原创
免费

qwen image edit angles--多视角镜头控制

只需要一张照片，可以生成各个角度的照片。阿里通义千问 Qwen-Image-Edit 图像编辑大模型配套的多视角镜头控制 LoRA 轻量插件，专门解决「单张图片生成全新相机视角」的需求从hugging face/spaces进入

管理员 1 浏览
插件|skill 非原创
免费

ScreenCoder

项目全称 ScreenCoder，是香港中文大学团队开源的 AI 截图转前端代码工具，核心能力：上传网页 / APP UI 截图、设计稿，自动输出像素对齐、可直接二次开发的 HTML+CSS 代码一、项目定位与核心价值一句话定位：多智能体视觉 UI 转代码开源框架，解决 “设计图还原前端页面耗时、布局错位、代码杂乱” 痛点，适合前端快速原型、复刻页面、设计师转代码学习。 输入：任意网页截图、App 界面截图、UI 设计稿图片 输出：结构规范、可编辑、像素级还原的 HTML/CSS，支持原生 CSS 或 Tailwind 布局 配套：有学术论文支撑、在线 HuggingFace 演示、本地 Python 一键部署方案AI分享圈 二、核心技术架构（三段式多智能体流水线）项目采用模块化 Agent 分工处理，分为三大核心模块，源码对应独立文件：1. Grounding Agent（UIED 视觉检测引擎）对应文件：block_parsor.py、UIED 检测模块 视觉分割识别截图内全部元素：按钮、文字、图片、输入框、导航栏、卡片、图标 输出每个组件坐标、尺寸、文本内容、类型标签，解决普通 VLM 分不清多层布局的问题화니의 세... 2. Planning Agent（布局规划引擎）负责层级排版逻辑： 根据检测到的组件坐标，自动划分父 / 子层级，生成 Grid/Flex 布局结构 区分侧边栏、列表、卡片、弹窗等常见页面模块，保证还原不跑偏 输出标准化布局 JSON，作为代码生成输入 3. Generation Agent（代码生成引擎）对应文件：html_generator.py 对接主流大模型 API 生成前端代码 支持多模型切换：GPT、Gemini、通义千问 Qwen、豆包 Doubao 自适应 Prompt，控制代码整洁度、语义化标签、CSS 样式还原度DeepWiki 辅助模块： image_replacer.py：自动占位图片映射，可替换本地图片资源 mapping.py：元素坐标与 DOM 节点对齐校准，减少像素偏差 三、关键功能特性 像素级 UI 还原 相比普通截图转代码工具，通过视觉检测 + 布局分层双重校验，页面对齐精度大幅提升，适合复刻官网、后台管理页、移动端界面。 多 LLM 模型自由切换 无需重新部署，仅配置对应 API 密钥即可切换模型，国内用户优先支持通义千问、豆包，无需海外网络。 代码可商用、易二次修改 生成代码无冗余垃圾标签，语义化 HTML，CSS 分离，可直接套入项目，支持导出 Tailwind CSS 版本。 两种使用方式 在线体验：HuggingFace Demo（开箱即用，无需本地环境） https://huggingface.co/spaces/Jimmyzheng-10/ScreenCoder 本地部署：Python 开源项目，克隆仓库、配置 API Key 即可离线运行 开源学术背书 配套 arXiv 技术论文：https://arxiv.org/pdf/2507.22827，完整阐述多智能体 UI 转代码算法原理，可用于二次研究、微调模型寻道AI小... 四、适用场景 前端快速原型：产品草图、UI 稿直接生成页面，省去切图写布局 页面复刻：参考优秀网站截图快速复刻页面结构，二次修改 设计师转前端学习：对比截图与生成代码，理解布局逻辑 小团队 / 创业公司提效：减少设计转开发沟通成本，降低前端人力消耗 AI 多模态代码生成研究：开源模块化架构，可二次改造训练自有视觉模型 五、本地部署极简流程bash运行# 1. 克隆仓库 git clone https://github.com/leigest519/ScreenCoder.git cd ScreenCoder # 2. 创建虚拟环境安装依赖 python -m venv venv pip install -r requirements.txt # 3. 配置模型API密钥（修改对应txt文件：gpt_api.txt/qwen_api.txt等） # 4. 启动主流水线 python main.py 运行后上传截图，选择模型，一键生成完整 HTML 文件。六、对比同类工具优势 纯开源可本地私有化部署，无需付费云端服务 多智能体分层拆解视觉 + 布局 + 代码，比单一 LLM 直接看图更精准 原生适配国内大模型（通义、豆包），无海外网络门槛 模块化代码结构，开发者可单独替换视觉检测 / 代码生成模块 七、注意事项 工具依赖第三方大模型 API，需自行申请对应平台密钥并充值 复杂动效、JS 交互无法生成，仅输出静态 HTML+CSS 截图清晰度越高、界面元素越规整，生成代码效果越好 项目开源协议为学术友好开源，商用可基于生成代码二次开发

管理员 1 浏览
插件|skill 原创
免费

chrome:control chrome 插件

@ Chrome:Control Chrome 分析抖音上爆款内容的结构(标题、开头、节奏、情绪点)，总结模板提取高互动内容的关键词和表达方式，生成爆款公式对比普通内容和爆款内容的差异，输出优化建议

管理员 1 浏览
插件|skill 原创
免费

codex插件 hyperframes AE动画动态渲染

例：@hyperframes by hengen 生成一个科技产品演示页面，内容分三部分逐步展开(问题一解决方案-结果)

管理员 1 浏览
插件|skill 原创
免费

codex 插件 superpowers

Superpowers 是开源工程化编程工作流插件，GitHub 热门项目，专为 Codex、Cursor、Claude Code 等 AI 代码代理设计。和你之前了解的 Computer Use（电脑接管插件） 有本质区分：Computer Use（底层操作 Plugin）：提供键鼠、截图、桌面操控能力，负责操作电脑软件；Superpowers（流程规范 Plugin）：内置 14 套标准化开发 Skill，不给 AI 新增硬件 / 系统操作能力，而是强制约束 AI 编码流程、工程规范，把随意写代码的 AI 变成标准化工程师。Superpowers 封面核心一句话总结Superpowers 不是「工具」，是一套AI 开发纪律系统，解决普通 Codex 一上来直接写代码、需求不清、缺少测试、代码漏洞多、返工严重的痛点。

管理员 1 浏览
插件|skill 原创
免费

computer use 电脑接管插件

Computer Use 是 OpenAI Codex 桌面客户端内置的系统级 GUI 自动化插件，俗称「电脑接管插件」，属于底层 Plugin 工具，让 Codex 拥有视觉看屏 + 键鼠操控全系统桌面的能力，是 AI Agent 直接操作 Windows/macOS 图形界面的核心底层扩展。核心定位区分（Plugin vs Skill） Computer Use（Plugin 插件）：底层执行层，提供截图、鼠标点击、键盘输入、窗口切换的系统操作能力，是硬件 / 系统交互载体； Skill（技能）：业务流程层，基于 Computer Use 插件封装一套完整操作步骤（如批量导出 Excel、周报 PPT 制作），插件是 Skill 运行的底层依赖。 二、底层工作原理（视觉闭环）采用截图 + 多模态视觉识别 + 键鼠指令循环执行机制： 截图采集：插件申请屏幕录制权限，抓取桌面 / 指定窗口高清画面； 视觉推理：Codex 大模型识别界面按钮、输入框、文字、弹窗、文件； 下发动作：插件向系统发送原生键鼠指令（移动、单击 / 双击、输入文字、滚动、复制粘贴）； 状态回读：再次截图校验操作结果，循环执行直到任务完成 / 失败； 后台隔离：拥有独立 AI 光标，不抢占用户鼠标，可和你前台操作并行运行codex.dani...。 三、核心功能能力 全软件无差别操控 不受 API 限制，能操作所有本地桌面软件：Word/PPT/Excel、PS、微信、企业 ERP、本地客户端、文件夹、弹窗、多窗口切换； 完整键鼠模拟 左键 / 右键点击、拖拽、滚动、文本输入、快捷键、剪贴板读写、文件拖拽； Record & Replay 录制生成 Skill 你手动演示一遍完整流程，插件全程记录屏幕操作，自动封装为可复用 Skill，下次一句话即可自动复现整套工作流（报销、报表、素材上传等重复任务）； 跨软件联动 自动切换多软件完成长流程：Excel 导出数据→打开 PPT 模板→粘贴图表→保存文件； 任务断点续跑 界面卡顿、弹窗干扰时自动等待、重试，支持分段执行复杂任务； 黑白名单权限管控 可设置允许 / 禁止 AI 操作的软件，屏蔽支付、隐私文件夹等高风险程序。

管理员 1 浏览