
21st Design Sync
21st-dev/skill/skills/21st-design-sync作者 21st-dev15c7436c41dc無授權條款12 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 週前更新
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.
僅公開檔案列表。將技能安裝到工作區後即可檢視檔案內容。
| 路徑 | 大小 | 類型 |
|---|---|---|
| SKILL.md | 4.9 KB | text/markdown |
來源與署名
來源:21st-dev/skill位於skills/21st-design-sync提交15c7436
授權條款: 無授權條款
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多來自 21st-dev/skill 的技能

21st Ui Review
21st-dev
審查現有 UI 的無障礙、響應式與設計系統缺陷,並提供安全的確定性修正。

21st Ui Explore
21st-dev
Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.

21st Ui Build
21st-dev
Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.

21st Registry
21st-dev
Publish your own work to 21st.dev and manage it from the terminal with the `21st` CLI (`@21st-dev/cli`): publish a React component to a team library, publish a CSS theme or a template listing, edit / unpublish / delete your published items, list and reopen existing component work, and read/replace your public profile page (bento board). Triggers when the user says "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент/тему/темплейт", "share with team", "make this reusable", "unpublish/edit/delete my component", "change its visibility", "find/open my old component or draft", "найди/открой мой старый компонент или драфт", "add this to my 21st profile/bento", "update my profile page", "обнови мой профиль на 21st", "добавь блок в бенто", "add controls/knobs to my demo", "сделай демо с контролами". For finding and installing existing items use `21st-cli-use`; for turning a project's design tokens into a theme use `21st-design-sync`.

21st Cli Use
21st-dev
指導使用 21st CLI 從 21st.dev 目錄搜尋、安裝與拉取 React/shadcn 元件、主題與範本。

21st Ai
21st-dev
Generate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the `21st-cli-use` skill; to publish your own, `21st-registry`.
更多Design & Creative技能

Theme Factory
anthropics
提供 10 套預設配色與字型主題,並可即時產生新主題,為簡報、文件、報告與 HTML 頁面統一風格。

Slack Gif Creator
anthropics
為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF,並提供 PIL 繪圖輔助、緩動函式與驗證工具。

Frontend Design
anthropics
在建立或改造使用者介面時,提供打造獨特、有意識視覺設計的指引。

Canvas Design
anthropics
依照寫好的設計理念創作原創視覺藝術,輸出 PNG 或 PDF,適合海報、藝術作品等靜態成品。

Brand Guidelines
anthropics
將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Frontend Design
anthropics
指導代理為新介面或改版介面進行獨特、有意的視覺設計。