跳到正文
cccskills
免费在 GitHub 公开中文介绍

shadcn-ui

使用shadcn/ui实现结构清晰、兼顾无障碍使用的界面组件,并可结合Stitch中的设计迭代,将设计方案落实为界面部件。

原文查看原文说明

Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.

AI 评分70分/ 100查看安装方法

适用场景

  • 使用shadcn/ui构建界面组件
  • 实现兼顾无障碍使用的组件
  • 结合Stitch设计迭代进行开发

中文介绍

功能

此技能使用shadcn/ui实现构成界面的UI组件。组件就是界面中使用的各个部件。它关注组件结构的整理,也考虑无障碍使用,让不同用户更容易操作这些部件。组件实现还可以与Stitch中反复讨论、调整设计的工作结合起来。

适用场景

适合希望使用shadcn/ui制作界面部件,或在实现UI时兼顾易用性与无障碍使用的场景。如果先在Stitch中推敲设计,再将设计内容落实为组件,也可以使用此技能,将设计迭代与组件开发衔接起来。

使用示例

  • “使用shadcn/ui制作兼顾无障碍使用的UI组件。”
  • “结合Stitch中的设计迭代,实现界面中的各个部件。”

注意事项

这份资料是供OpenDesign发现技能的目录条目。要使用包含配套素材和脚本的完整流程,需要将上游技能包安装到当前使用的智能体的技能目录中。具体安装位置需要查阅上游README。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容,从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么
A良好资料明确说明使用shadcn/ui实现组件,并结合Stitch进行设计迭代。
步骤具体性步骤、输入输出和示例是否具体
C需确认资料说明了如何获取上游技能包,但没有组件实现步骤或输出示例。
安全性发送数据、删除文件、执行命令等是否有说明
A良好所列命令用open打开上游页面,未涉及删除或读取凭据。
安装难易度所需工具和 API 密钥是否少且有说明
B部分不足需要安装上游技能包,但具体安装位置需另查上游README。

总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI(OpenAI Codex)于 2026年10月20日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(1)

  • SKILL.md1.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

shadcn-ui

Curated from Google Labs (Stitch).

What it does

Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.

Source

How to use

This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:

# Inspect the upstream README for exact paths
open https://github.com/google-labs-code/skills

Then ask the agent to invoke this skill by name (shadcn-ui) or with one of the trigger phrases listed in this skill's frontmatter.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

8-bit-orbit-video-template

免费有简介AI 评分 90分

使用Hyperframes的HTML模板制作复古像素风格的三场景视频,替换标题、标签和配色,同时保留场景转换节奏及可重复的动画时序。

  • 制作像素风格的介绍视频
  • 替换三场景视频中的内容
  • 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月22日 更新

ad-creative

免费有简介AI 评分 80分

为社交媒体广告和搜索广告撰写标题、说明及正文,并反复调整措辞。可用于准备广告文案备选版本,以及检查现有文案并考虑修改方案。

  • 撰写社交媒体广告标题
  • 准备搜索广告说明
  • 修改广告正文措辞
nexu-io/open-design10.3万2026年10月22日 更新

after-hours-editorial-template

免费有简介AI 评分 80分

以深色背景和衬线字体制作时尚杂志风格的三页动态展示,结合文字逐步显现与章节转场,最终生成内嵌CSS和JavaScript的单个HTML文件。

  • 制作时尚杂志风格的动态介绍
  • 用三页展示简短故事
  • 将现有品牌风格融入深色版面
nexu-io/open-design10.3万2026年10月22日 更新

agent-browser

免费有简介AI 评分 100分

通过浏览器查看页面,执行点击、输入、截图和信息提取。主要用于检查OpenDesign的本地预览,以及核查网页应用的运行情况与质量。

  • 检查OpenDesign本地预览
  • 测试网页应用的点击和输入
  • 截取页面或元素图像
nexu-io/open-design10.3万2026年10月22日 更新

ai-music-album

免费有简介AI 评分 80分

用于AI音乐专辑制作,涵盖概念构思、歌词初稿、曲目排序和导出,适合独立专辑实验或品牌音乐企划;完整制作流程需另行安装上游资源包。

  • 策划独立制作的专辑
  • 围绕专辑主题起草歌词
  • 安排专辑曲目顺序
nexu-io/open-design10.3万2026年10月22日 更新

algorithmic-art

免费有简介AI 评分 80分

使用p5.js,根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面,适合制作海报、表现动感的静态图像和艺术构图草案。

  • 根据规则制作海报
  • 创作具有动感的静态图像
  • 试验艺术作品的构图
nexu-io/open-design10.3万2026年10月22日 更新

查看 nexu-io 的全部技能

报告此技能的问题