示意封面由本站生成，真实效果请查看源仓库示例。

如何使用

1
复制安装提示
登录后点击右侧黑色按钮，一键复制。
2
粘贴给你的 agent
在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。
3
用一句话调用
像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/shadcn-ui 帮我做：查找、安装、定制 shadcn/ui 组件

示例对话，仅演示调用方式，不代表实际产出。

你会得到

组件发现与安装流程
定制最佳实践
项目初始化清单

适合

查找、安装、定制 shadcn/ui 组件

不适合

非 React 项目

你需要

React 项目；shadcn CLI（npx shadcn），可选 shadcn MCP

许可证: Apache-2.0
作者: @google-labs-code
来源: google-labs-code/stitch-skills/plugins/stitch-build/skills/shadcn-ui · ★ 8,427

支持:Claude CodeCodexCursorGemini CLIOpenCode

上游描述

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

其他安装方式

更喜欢自己动手？下面的命令和上方按钮效果相同。

安装提示词（粘贴给你的 Agent）

Read https://skilloop.dev/skills/shadcn-ui/install.md and follow the instructions to install the skill.

一行命令安装 · Claude Code

npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui -g -a claude-code

一行命令安装 · Codex / Cursor

npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui -g -a codex

手动安装（git） · Claude Code

git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills
mkdir -p ~/.claude/skills && cp -r /tmp/stitch-skills/plugins/stitch-build/skills/shadcn-ui ~/.claude/skills/shadcn-ui

作品版权归原作者所有，依其许可证分发；本站仅做链接与介绍。

SaaS 落地页

单页 SaaS 落地页：首屏、功能、社会证明、定价与 CTA，一个 HTML 文件搞定。

作者: nexu-ionexu-io/html-anything · Apache-2.0

免费

网页8.4k

高品位设计系统 DESIGN.md

生成 agent 友好的 DESIGN.md，约束高级、不雷同的 UI：严谨字体、校准色彩、非对称布局与微动效。

作者: google-labs-codegoogle-labs-code/stitch-skills · Apache-2.0

免费

网页8.4k

设计系统提炼

分析已有 Stitch 项目，把其语义化设计系统提炼成 DESIGN.md。

作者: google-labs-codegoogle-labs-code/stitch-skills · Apache-2.0

免费

网页179.8k

前端设计

让 agent 做出有辨识度、有意图的 UI：审美方向、字体与自我审视，而非模板化默认值。

作者: anthropicsanthropics/skills · Apache-2.0