让AI生成的页面告别”歪Logo”——tech-logos这个Skill有点东西

Logo 用错地方，比没有 Logo 更尴尬。

比如你的 landing page 做好了，兴冲冲给甲方演示——结果右上角的 Vercel Logo 糊成一坨，GitHub 图标比例变形，OpenAI 的 mark 压根不是官方版本。

tech-logos 就是来解决这个问题的。

这是一个专门给 AI 编程助手（Claude Code、Cursor、Gemini CLI 等）用的 Skill，安装之后你需要技术公司 Logo 时，它会从 Elements 官方仓库拉取高清、正确比例的品牌资产。覆盖范围包括：

• 开发工具：Vercel、GitHub、Clerk、Linear、Stripe
• AI 提供商：OpenAI、Anthropic、Claude、Google Gemini
• 社交平台：Twitter/X、Discord、Slack

也就是说，你不需要再去 Google 搜 “Vercel logo PNG”，也不需要临时去品牌官网扒素材——直接说”给我加上 OpenAI 的 Logo”，Skill 自动给你找正确的 SVG/PNG，比例、配色都对照官方版本。

使用方式很简单：

对你的 Agent 说：

帮我把 Vercel、GitHub 和 Claude 的 Logo 加到这个 landing page 上

或者更具体：

用 tech-logos 给我调 Clerk 的 logo，放在登录页右上角

Skill 会自动识别你需要的品牌，下载对应的官方资源，然后按照你项目的设计规范（颜色模式、尺寸）做适配。

如果你用的是 Clerk、shadcn/ui 或者其他走 Elements 体系的设计系统，它甚至可以直接集成进你的组件库——不只是把图片放上去，而是作为 React 组件引用，主题色自动跟随。

这个 Skill 的价值不光是”省事”，而是品牌一致性问题：很多 AI 生成页面的 Logo 之所以看起来别扭，不是因为设计不行，而是因为 Logo 源文件本身就不对——分辨率低、比例错误、颜色跑偏。tech-logos 从官方仓库拿资产，从源头规避这些问题。

适合谁用：

• 经常做 landing page / auth UI 的前端开发者
• 用 AI 编程工具快速搭建产品 demo 的创业者
• 需要在文档里嵌入正确品牌 Logo 的技术写作者

直接对你的 AI 编程助手说”安装 tech-logos Skill”，然后就可以随时调用了。

GitHub: https://github.com/crafter-station/elements

GitHub: https://github.com/crafter-station/elements