UStackUStack
shieldcn icon

shieldcn

shieldcn 可產生 README 與文件用徽章，外觀仿 shadcn/ui 按鈕。支援 npm、GitHub、Discord 等直接 URL 徽章，並提供 PNG、SVG、JSON 輸出。

AI網站設計
AI圖標Logo產生器
AI開發者工具
訪問網站
shieldcn

shieldcn 的功能

shieldcn 是一個供 README、文件與其他可接受圖片 URL 場景使用的徽章產生器與端點服務。它呈現出仿 shadcn/ui 按鈕風格的徽章，並透過可預期的路徑提供 npm、GitHub、Discord、Homebrew、Tokscale、skills.sh、static 與 dynamic JSON 徽章。

這個產品設計成可直接替代 shields.io，基本使用不需要 API 金鑰或建置步驟。它支援 `.png` 與 `.svg` 輸出，而文件也說明了 `.json` 與 `/shields.json` 回應，可用於原始資料或 shields.io 相容性。

功能

多種徽章端點類型

徽章可透過簡單且文件化的 URL 模式提供，例如 `/npm/{package}`、`/github/{owner}/{repo}`、`/discord/{serverId}`、`/skills/{owner}/{repo}/{skill}` 與 `/badge/{label}-{message}-{color}`。

彈性的回應格式

每個徽章都可呈現為 `.png` 或 `.svg`，並可透過 `.json` 與 `/shields.json` 取得原始資料或相容 shields.io 的資料。

細緻的視覺自訂

徽章支援 shadcn Button 變體、尺寸選項、主題、字型、顏色、圖示覆寫、標籤與版面控制，還有僅限 SVG 的動畫效果，如 pulse、glow 與 shimmer。

圖示處理與覆寫

圖示會依提供者自動偵測，文件也允許明確指定 Simple Icons slug、React Icons 名稱、停用圖示，或傳入自訂 SVG data URI。

倉庫徽章產生

產生器可從 GitHub 倉庫 URL 自動偵測技術堆疊，並輸出可直接複製貼上的徽章標記，供 README 使用。

使用情境

  • 開源專案的 README 徽章

    使用直接圖片 URL，為專案 README 加上 npm、GitHub、Discord 或類似徽章。文件特別建議在 GitHub README 中使用 PNG，因為它在各種用戶端上的呈現更一致。

  • 具備倉庫感知的徽章產生

    從 GitHub 倉庫 URL 產生徽章，讓工具偵測技術堆疊，並將產生的 markdown 或圖片 URL 複製到文件或倉庫頁面。

  • 文件網站與產品頁徽章

    為產品文件、著陸頁或接受 image 標籤的內部文件建立按鈕與狀態樣式徽章。

  • 自訂與動態狀態徽章

    當你需要與單一套件或倉庫指標無關的徽章時，可使用 static、dynamic JSON、group 與自訂徽章端點。

  • 格式特定輸出

    依照你的渲染需求在 PNG 與 SVG 之間切換；需要廣泛相容性時使用 PNG，需要可縮放輸出或僅限 SVG 的動畫效果時使用 SVG。

  • skills.sh 與個人檔案徽章流程

    為 skills.sh 倉庫產生技能安裝與排名徽章，或透過使用者名稱流程為個人 README 頁面產生個人檔案徽章。

Pros and Cons

Pros

  • 涵蓋許多常見的開發者徽章來源，包括 npm、GitHub、Discord、X/Twitter、Homebrew、Tokscale 與 skills.sh。
  • 採用 shadcn/ui 按鈕風格，而不是一般的 shields.io 外觀。
  • 同時支援 PNG 與 SVG，並可輸出原始 JSON 與相容 shields.io 的格式。
  • 提供豐富的視覺控制，包括變體、尺寸、字型、主題、顏色、圖示與版面選項。
  • 靜態徽章與基本徽章產生不需要 API 金鑰。

Cons

  • 文件列出許多端點類型與參數，因此 URL 表面可能需要一些時間熟悉。
  • 某些進階選項，例如動畫效果，只支援 SVG。

FAQ

shieldcn 可以產生哪些類型的徽章？

它可根據可預測的 URL 格式產生徽章圖片。例如，文件中展示了 npm、GitHub、Discord、X/Twitter、Homebrew、Tokscale、skills.sh、static、dynamic JSON、flag 與群組徽章端點。

我可以從 GitHub 倉庫 URL 產生徽章嗎？

可以。產生器頁面支援 GitHub 倉庫 URL 或 owner/repo 輸入用於倉庫徽章，並且也提供以使用者名稱為基礎的流程來產生個人檔案徽章，供個人 README 使用。

shieldcn 支援哪些輸出格式？

可以。文件說明支援 `.png` 與 `.svg`，而且任何端點也都可以用 `.json` 或透過 `/shields.json` 取得，以相容 shields.io。

使用 shieldcn 需要 API 金鑰或額外設定嗎？

文件指出，基本徽章 URL 不需要任何設定、API 金鑰或建置步驟。

Quick Facts

類別
Developer Tool
主要用途
README 與文件徽章
輸出格式
PNG, SVG, JSON
支援的工作流程
透過直接端點或徽章產生器進行基於 URL 的徽章產生
來源網域
shieldcn.dev
價格
免費且開源

shieldcn 替代品

Ably Chat icon

Ably Chat

Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.

Ghost icon

Ghost

Ghost 是一款終端機 AI 助手，可在命令列中聊天、產生程式碼並執行任務。內建免費模型，支援 Linux、macOS、Windows，且為開源工具。

AakarDev AI icon

AakarDev AI

AakarDev AI helps teams manage AI provider access, project-level setups, logs, and analytics from one dashboard. It supports BYOK workflows and lists providers including OpenAI, Google Gemini, Anthropic, Groq, Mistral AI, and Perplexity AI.

DeepMotion icon

DeepMotion

DeepMotion 是一個基於網頁的 AI 動作捕捉與 3D 動畫平台，提供 Animate 3D 影片轉動畫與 SayMotion 文字轉動畫，讓創作者與團隊可在瀏覽器中產生動作並匯出常見製作格式。

Arduino VENTUNO Q icon

Arduino VENTUNO Q

Arduino VENTUNO Q is an edge AI computer for AI and robotics applications. It combines AI inference and deterministic control on a single board and is designed to work with Arduino App Lab.

Devin icon

Devin

Devin is an AI coding agent and software engineer that helps developers and engineering teams plan and execute complex software tasks. It is available through desktop, cloud, JetBrains, and CLI surfaces, with plans for individuals, teams, and enterprises.