设计与多媒体

21st-design-sync

21st-dev/skill

Look at the current project's design (its shadcn / Tailwind CSS variables and color tokens) and publish it to the 21st.dev community as a shareable theme, using `21st publish-theme`. Use when the user says "publish my theme", "share our design as a 21st theme", "sync my design to 21st", "turn my globals.css into a theme", "залей наш дизайн темой", "опубликуй тему". This is the 21st equivalent of design-sync: it reads the project's design tokens and syncs them into the public theme library.

  • 1851 次安装
  • 31 星标
  • 收录于

安装命令

npx skills add https://github.com/21st-dev/skill --skill 21st-design-sync

SKILL.md

21st Design Sync — publish your project's design as a theme

Take the design a project already ships (its light + dark CSS variables) and publish it to the public 21st.dev theme library so anyone can preview, bookmark, and apply it. Under the hood this is one CLI call: 21st publish-theme <file.css> --name "…".

Pre-flight (always)

  1. Auth needs a real API key. publish-theme is a management endpoint: it accepts a 21st_sk_… key only, not a 21st login session token. Get one at https://21st.dev/mcp (or https://21st.dev/settings/api-keys) and pass it via --api-key 21st_sk_… or the TWENTYFIRST_TOKEN / API_KEY_21ST env var. If the user has no key, point them there — don't try to mint one.
  2. The CLI is the unified @21st-dev/cli (bin 21st). Use npx @21st-dev/cli if it isn't installed.
  3. Publishing is public and outward-facing. A published theme is immediately is_public in the community library (there is no unlisted/private option for themes). Confirm with the user before publishing.