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

Resource Library

资源中心

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

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

gsap-skills

codex和claude code的神级外挂。提供了一套标准化的技能文件，直接让主流AI工具写出最标准的官方级动画代码。

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

Scrapling--网络爬虫框架

一个自适应的网络爬虫框架，能够处理从单一请求到全面爬取的所有任务！

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

公众号排版 Skill--gzh-design-skill

把Markdown一键排成可直接粘进公众号编辑器的精致HTML6套精选主题+主题生成器+双关卡校验。An Al-agent skill that turnsMarkdown into paste-ready WeChatarticle HTML.该 skill 目前内置了 6 套主题模版（后续会持续更新），也可以自己设计主题模版。这个skill，适配WorkBuddy/Codex/Claude Code等 Agent 工具，以下就是 WorkBuddy 安装gzh-designskill 排版出的效果。

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

flyfish-dev / file-viewer--206 种文件预览

File Viewer 最初要解决的问题很朴素：企业系统里的附件越来越复杂，用户希望直接在浏览器里看，不想为了一个 Word、一个 CAD 图纸、一个压缩包或者一封邮件，再额外跳到本地软件、服务端转码、云端转换。File Viewer 的基础能力：206 个扩展名映射。24 条 renderer 链路。52 个 npm 发布目标。16 个组件目标。27 条 smoke 渲染链。432 个组件渲染目标。Apache-2.0 协议，支持商用、二开、企业内部集成和私有化部署。从格式覆盖看，项目现在主要面向这些场景：Office：Word、Excel、PPTX、RTF、ODT、ODS 等。PDF / OFD / Typst：页面渲染、缩放、搜索、目录、打印和导出持续完善。CAD / 工程图纸：DWG、DXF、DWF、DWFX、XPS 等走工程图纸链路。压缩包：ZIP、RAR、7Z、TAR、GZ、ISO、APK、CBZ 等，支持目录读取和内部文件继续预览。邮件：EML、MSG、MBOX，支持正文、头信息、附件和附件继续预览。绘图与脑图：Draw.io、Excalidraw、Mermaid、PlantUML、XMind。设计与数据：PSD、SQLite、Parquet、Avro、GeoJSON、KML、GDSII、OASIS 等。常规文件：Markdown、代码、patch、git bundle、图片、HEIC、音视频、字体、3D 模型等。 它的核心价值在于分层：不同格式拆成独立 renderer，再通过 preset 和 full 包给不同团队选择。想轻量就按需装，想快速验收就用 full，想工程化就用 Vite 插件和离线资产复制。

管理员 0 浏览
插件|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 浏览