能点能切换,这款Skill做交互网页

使用 React 和 Tailwind 构建复杂的网页组件。

web-artifacts-builder 是 Anthropic 用来制作复杂网页作品的 Skill,指导 AI 用 React 等工具构建交互界面,再打包成独立 HTML 文件。适合想在 claude.ai 中展示可点击、可切换内容的人。

比如一份产品比较资料,读者选择不同选项后,页面跟着展示对应内容。这类作品要管理交互状态,有时还会切换视图,已经超出几行静态 HTML 的范围。文档提供项目初始化、组件开发和最终打包的流程,供 AI 按需要使用。

交付时,脚本、样式和依赖被合进一个 bundle.html。对于需要传递或展示网页作品的场景,这样不用同时解释一整套项目目录。

它的重点是构建网页产物。需要登录、保存真实业务数据或公开部署时,还要另外安排相关部分。如果内容只是简单说明页,也没必要因为有这份 Skill,就强行做成复杂应用。

分类:编程开发

来源仓库:anthropics/skills

适合用来做什么

  • 使用React和Tailwind CSS构建一个复杂的用户界面。
  • 创建一个带有状态管理和路由功能的web应用。

安装 web-artifacts-builder

npx skills add https://www.iskills.cc/skills/anthropics/skills/web-artifacts-builder/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 web-artifacts-builder 的用途与原始说明

浏览全部 Skill 指南