mcpField
T
tech-logos

tech-logos

github.com/crafter-station设计与 UI526103 次安装11 周前更新
代码仓库

关于 tech-logos

tech-logos 是用于从 Elements 注册表安装品牌标志的技能,面向构建界面的开发者。它提供主题适配的标志组件、安装方式和缺失标志的请求流程。

主要功能

  1. 01从 Elements 注册表安装标志
  2. 02支持图标和字标变体
  3. 03适配浅色与深色主题
  4. 04提供按类别打包的标志
  5. 05生成缺失标志请求链接

适用场景

  1. 01为应用界面添加品牌标志
  2. 02按 AI 服务或社交平台安装标志
  3. 03为未收录品牌提交请求

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/crafter-station/elements --skill tech-logos

安装后在 Claude Code 中输入/tech-logos确认已加载。

详细介绍

科技品牌标志

从 Elements 注册表安装官方且适配主题的品牌标志。

安装模式

npx shadcn@latest add @elements/{name}-logo

示例:clerk-logo、github-logo、openai-logo、vercel-logo

查找可用标志

选项 A:扫描注册表(如果在 elements 仓库中)

ls registry/default/blocks/logos/ | sed 's/-logo$//'

选项 B:浏览 https://tryelements.dev/docs/logos

安装后

标志会安装到 components/logos/{name}.tsx:

import { ClerkLogo } from "@/components/logos/clerk"

<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />

常用属性

  • variant:"icon" | "wordmark"
  • mode:"light" | "dark"(自动检测主题)
  • className:标准 className 属性

套件

需求命令
所有标志@elements/logos
AI 服务提供商@elements/ai-services
社交平台@elements/social-media
包管理器@elements/package-managers

快速模式

# Auth stack
npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo

# AI models
npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo

# Social footer
npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo

# Tech stack
npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo

找不到标志?

如果注册表中没有该标志,请帮助用户提交请求:

生成预填充的 GitHub issue URL:

https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request

以“Neon”标志为例:

https://github.com/crafter-station/elements/issues/new?title=%5BLogo%20Request%5D%20Add%20Neon%20logo&body=%23%23%20Logo%20Request%0A%0A**Company%2FService%3A**%20Neon%0A**Website%3A**%20https%3A%2F%2Fneon.tech%0A%0A%23%23%20Why%20this%20logo%3F%0A%3C!--%20Brief%20description%20--%3E%0A%0A---%0A*Auto-generated%20from%20tech-logos%20skill*&labels=enhancement,logo-request

告诉用户:

“目前还没有 {Name} 标志。点击此处请求添加 - issue 已预先填好!”

评论

支持 Markdown