Backdrop

为小程序打造的开箱即用背景图案库。

精选渐变、光晕、网格等背景图案，在线预览真机效果，一键复制适配代码，无缝集成到你的小程序项目中。

扫码体验

_{微信扫码，在手机上体验 Backdrop 小程序}

特性

• 精选背景图案：渐变、光晕、网格等多种风格，持续更新
• 多框架代码生成：支持微信原生、uni-app、Taro、Wevu，可选样式分离、内联或 Tailwind 类名
• 在线预览：Web 端实时预览，手机模拟框查看小程序真实效果
• 本地收藏：常用图案一键收藏，数据保存在本地
• MCP 端点：把整个图案库接给 AI 助手，用中文描述就能拿到可粘贴代码

项目结构

快速开始

pnpm install

# 启动 Web 预览站
pnpm web

# 启动小程序（配合微信开发者工具）
pnpm mp

# 本地跑 MCP 服务（默认 http://localhost:8788/mcp）
pnpm mcp:dev

# MCP 检索与代码生成测试
pnpm mcp:test

构建与 SEO 产物

pnpm build:web 会先跑 Vite，再跑 scripts/prerender.ts，缺一不可：

# Vite 打包 + 预渲染（生成 /p/<id>/ 静态页、robots.txt、sitemap.xml）
pnpm build:web

预渲染为每个图案生成一份带独立标题、描述、canonical 和分享图的静态 HTML。微信、掘金、Twitter 的抓取器不执行 JS，只有这样才能让分享出去的图案链接显示对应的卡片。

分享卡片本身是提交到仓库的图片（public/og.png 与 public/og/<id>.jpg），构建时不重新生成——CI 上没有 Chromium 也能正常构建。新增或调整图案后重新生成一次：

# 需要本机有 Chromium / Chrome，可用 CHROME_PATH 指定
pnpm --filter @backdrop/web run gen:og

卡片里的图案用库里真实的 CSS 渲染，所以改了图案样式重跑这一步就能同步。

发布

推送只会更新仓库，不会部署。生产环境只在 release 时更新，三条路径等价：

# 1. 本地一键发布（需要本机已 `netlify login`，或设置 NETLIFY_AUTH_TOKEN / NETLIFY_SITE_ID）
pnpm release

# 2. 只上传一个草稿部署做验证，不影响线上
pnpm deploy:web:draft

# 3. 走 GitHub Actions：手动触发 Release 工作流，或推一个 v* 标签
git tag v0.1.0 && git push origin v0.1.0

工作流（.github/workflows/release.yml）在 Actions 里构建，再用 Netlify CLI 把 packages/web/dist 和 packages/mcp/functions 上传到 mpbackdrop 站点，因此不占用 Netlify 的构建额度。GitHub 仓库需要两个 secrets：NETLIFY_AUTH_TOKEN、NETLIFY_SITE_ID。

MCP 接入

线上端点即本站的 /mcp 无需密钥。把它加进支持远程 MCP 的客户端：

{
  "mcpServers": {
    "backdrop": {
      "url": "https://mpbackdrop.netlify.app/mcp"
    }
  }
}

提供两个工具：

• search_patterns：按中文或英文描述检索，返回候选的 id / name / nameZh / category / tags / url 和命中的查询词，不含代码。颜色会同时与图案真实的 CSS 值比对，所以「柔和一点的蓝色渐变」能命中名字里没有 blue 的 Azure Depths。结果多时用 limit / offset 翻页。
• get_pattern_code：按 id（或完整中文名 / 英文名）取单个图案的代码，framework 选微信原生 / uni-app / Taro / Wevu（默认微信原生），style 选内联 / 样式分离 / Tailwind（默认内联）。只做精确匹配：认不出会提示先用 search_patterns，不会猜一个近似图案。

两个工具都是只读、幂等的，返回结构化数据加一份文本摘要；id 忽略大小写、空格和连字符。搜索结果里的 url 指向本站的 /p/<id>/ 深链，点开就能看真机预览效果；这个地址在构建时会被预渲染成独立页面，各自带标题和分享图，所以贴到微信或掘金里会显示该图案自己的卡片，而不是站点通用卡片。旧的 ?pattern=<id> 写法仍然可用，只是分享效果差一些。

License

MIT © FliPPeDround

致谢

项目的灵感与背景样式来源于 pattern-craft，感谢 @megh-bari 的出色工作。
项目图标来自 @Lin