website-builder-setup
一键为 Claude Code 安装网页设计三件套，变身网页设计工作室。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：website-builder-setup。 它的用途是：一键为 Claude Code 安装网页设计三件套，变身网页设计工作室。 完整的 Skill 内容见：https://321skill.com/skills/website-builder-setup/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为我的瑜伽工作室建一个清新、宁静的官网，要有课程介绍、老师团队展示和预约功能，整体风格要温馨且有流畅的滚动动画。’ 它会调用集成的设计库选择配色与字体，使用动画库添加页面过渡和滚动效果，并利用预制组件库快速搭建出包含导航栏、英雄区、课程卡片、团队介绍和联系表单的完整响应式网站。
介绍
这个 Skill 解决了用户在 Claude Code 中快速搭建专业、美观的动画网站时，需要分别寻找和集成多种设计工具和组件的繁琐问题。它通过一个简单的安装命令，一次性集成了 UI/UX Pro Max、Framer Motion 和 21st.dev Magic 三个核心工具，覆盖了设计风格、动画效果和预制组件三大关键环节，让用户无需编码经验即可高效产出高质量的网页。
使用方式极其简单，只需在 Claude Code 中告诉 AI 安装此 Skill 的 GitHub 链接，或通过终端克隆仓库到指定目录，然后在 Claude Code 中输入 /website-builder-setup 命令即可启动。之后，用户只需用自然语言描述想要的网站（如“为我的咨询公司建一个面向小企业主的深色现代风格着陆页，带动画效果”），Claude 便会调用这些工具自动完成设计、布局、动画和响应式适配等所有工作。
它非常适合希望快速制作网站原型、需要高质量设计但缺乏专业前端开发技能的个人开发者、创业者、内容创作者、营销人员以及任何想用 Claude 高效完成网页设计任务的用户。
与同类单一功能的 Skill 相比，它的核心优势在于“一站式集成”。它不是提供零散的代码片段或单一功能，而是将一套经过精心搭配、能协同工作的专业网页设计工具包直接嵌入 Claude Code 的工作流中，实现了从创意描述到成品网站的完整自动化流水线，大大降低了用户的学习和整合成本。
核心特点
核心区别在于提供了一套预集成、协同工作的专业网页设计工具包（UI/UX设计库、动画库、预制组件库），而非单一功能。它通过一键安装，将 Claude Code 直接转变为具备完整设计、动画和组件能力的网页工作室，实现了从自然语言描述到高质量成品网站的端到端自动化。
注意事项
不适合需要深度自定义底层代码、或项目技术栈与此 Skill 集成的工具（如 React、Framer Motion）不兼容的场景。
常见问题
需要会编程才能用吗？
完全不需要，只需用自然语言向 Claude 描述你的网站需求即可。
安装后怎么开始建网站？
在 Claude Code 中直接输入 `/website-builder-setup` 命令，或直接告诉 Claude 你想建什么网站。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/website-builder-setup/raw/index.md 读取 website-builder-setup 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/website-builder-setup/raw/index.md（查看排版版本）