
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 的技能

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
指导智能体为新界面或改版界面进行独特、有意图的视觉设计。