关于 tech-logos
tech-logos 是用于从 Elements 注册表安装品牌标志的技能,面向构建界面的开发者。它提供主题适配的标志组件、安装方式和缺失标志的请求流程。
主要功能
- 01从 Elements 注册表安装标志
- 02支持图标和字标变体
- 03适配浅色与深色主题
- 04提供按类别打包的标志
- 05生成缺失标志请求链接
适用场景
- 01为应用界面添加品牌标志
- 02按 AI 服务或社交平台安装标志
- 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