web-artifacts-builder
Web Artifacts 生成器 (Web Artifacts Builder)
要构建强大的前端 claude.ai artifact,请遵循以下步骤:
- 使用
scripts/init-artifact.sh初始化前端仓库 - 通过编辑生成的代码来开发你的 artifact
- 使用
scripts/bundle-artifact.sh将所有代码打包成单个 HTML 文件 - 向用户展示 artifact
- (可选) 测试 artifact
技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
设计与风格指南
非常重要:为了避免通常被称为“AI 废话 (AI slop)”的设计,请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。
快速上手
第 1 步:初始化项目
More from leastbit/claude_skills_zh-cn
docx
全面的文档创建、编辑和分析功能,支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档(.docx 文件)时使用:(1) 创建新文档,(2) 修改或编辑内容,(3) 处理修订追踪,(4) 添加批注,或其他任何文档任务
52frontend-design
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能(例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任何网页 UI 进行样式美化)。生成富有创意、精致的代码和 UI 设计,避免千篇一律的 AI 审美。
41pptx
演示文稿创建、编辑和分析。当 Claude 需要处理演示文稿(.pptx 文件)时使用,包括:(1) 创建新演示文稿,(2) 修改或编辑内容,(3) 处理版式,(4) 添加批注或演讲者备注,或其他任何演示文稿任务
39xlsx
全面的电子表格创建、编辑和分析功能,支持公式、格式化、数据分析和可视化。当 Claude 需要处理电子表格(.xlsx、.xlsm、.csv、.tsv 等)时使用,包括:(1) 创建带有公式和格式的新电子表格,(2) 读取或分析数据,(3) 修改现有电子表格同时保留公式,(4) 电子表格中的数据分析和可视化,或 (5) 重新计算公式
34pdf
全面的 PDF 操作工具包,用于提取文本和表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单或以编程方式大规模处理、生成或分析 PDF 文档时使用。
33canvas-design
使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。
25