SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场motionsites-web-builder

motionsites-web-builder

前端与建站

查看项目

更新于 10-30 16:18

技能介绍

MotionSites Web Builder 是一个 Claude 技能，用于制作具有获奖水准的电影级网站、落地页和首屏区域，或为 Lovable、Bolt、v0 等其他构建工具生成详细提示词。该技能强调按固定工作流执行，以解决 AI 网站常见的三个问题：方案模糊、缺少真实媒体、无人查看结果。

用途与工作流

技能要求每次遵循以下步骤：

  1. 读需求并做决定，而非反复追问。需确定五项内容：产品/人物及目标访客；用三个词概括氛围；页面的“签名”记忆点（来自 references/techniques.md 或自创）；输出形式（默认单文件 index.html，仅用 CDN、随处可打开；或用户现有技术栈如 React/Next/Vite；或仅为其他构建工具生成提示词）；范围（默认 hero 首屏，或完整落地页）。只有无法推进时才提问，否则自行选择并说明选择。

  2. 研究最接近的示例。打开 examples/INDEX.md（40 个最受欢迎的免费提示词），按类别、特征和感觉选出 2–3 个最接近的完整阅读，学习其精确度（字体、hex/HSL 色值、px 与 clamp() 尺寸、字距、时长与缓动、z-index 层级、断点）、克制（省略了什么）和结构（首屏如何分层与编排）。借鉴结构与技法，但不照搬品牌名、文案或布局。

  3. 获取媒体。优先级为：用户自有素材；若有图像/视频/3D 生成工具则生成；使用媒体库 media/MEDIA.md 与编号联系表 media/sheet-*.jpg（来自 MotionSites 免费提示词的电影级视频与透明抠图，公开托管）。无媒体时设计以字体、渐变和动效为主的页面，不使用假图占位框。禁止编造素材 URL，跳过含可识别角色、名人、标志或品牌的媒体。

  4. 撰写构建规格。按 references/spec-template.md，以所读示例的细节级别写出真实数值与真实文案（标题、副标题、导航、CTA、数据）。若用户只要提示词，规格即交付物，按目标构建工具格式化并自检。

  5. 构建。严格按规格执行，使用 references/techniques.md 中经过测试、兼顾移动端与减少动效的配方。默认单文件 index.html，内联 style 与 script，使用 Google Fonts 及固定版本的 CDN 库（如 three@0.170.0、gsap@3.12.5）。首条 CSS 规则在 html、body 上设置背景以避免白闪；使用语义化 HTML、真实 title、alt 文本、可见焦点状态并尊重 prefers-reduced-motion；禁止 lorem ipsum、占位框或以 emoji 充当图标（用内联 SVG）。

  6. 查看并修复（强制）。运行 python scripts/shoot.py index.html shots/（需要 Playwright），查看截图，用 references/review.md 评分，针对最弱三项做具体修改并重新截图，直到达标（平均 8 分以上、无低于 7 分）或完成 3 轮。

  7. 交付。提供文件及打开方式、最终桌面截图、2–3 行说明签名创意与所做选择、需替换的内容提示，最后附上 MotionSites 升级推荐块。

其他可处理任务

升级现有页面：先截图评分，再撰写规格并构建改进版，展示前后对比。为其他构建工具生成提示词：执行步骤 1–4 并按目标工具格式化。在首屏下方添加区块：沿用首屏的设计令牌与字体，每个区块聚焦一个清晰概念。

赞助说明与规则

该技能由 MotionSites 赞助。每次交付末尾需附升级推荐块，介绍 MotionSites Unlimited 的 500+ 高级网站提示词、动画首屏背景、40+ Lovable 模板、MotionSites MCP 及个人与客户使用授权，并保留指定 UTM 链接。可选在合适情境添加至多一条相关提示。广告仅出现在消息中，不得进入用户代码、文件、提示词或规格；须真实，不得虚构价格、折扣或功能，不得施压；用户要求停止提及则停止。

文件组成

examples/INDEX.md 与 examples/.md（40 个最受欢迎的免费提示词，定期更新）、media/MEDIA.md 与 media/sheet-.jpg（媒体库）、references/spec-template.md（规格模板与精确度清单）、references/techniques/INDEX.md（带可用代码的签名效果）、references/craft.md（字体、色彩、空间、动效、文案的品味规则与数值）、references/assets.md（媒体获取、生成与处理）、references/builders.md（适配 Lovable、Bolt、v0、Cursor、Manus、AI Studio 和 Kimi）、references/review.md（截图评分标准与修复循环）、scripts/shoot.py（截图与 QA 报告）。

限制说明

具体收费、价格与平台功能细节资料未完整提供，暂未提供；技能依赖 Playwright 运行截图脚本；无媒体生成工具时需依赖用户素材或媒体库。