内容
<div align="center">
<img src="docs/assets/logo.svg" alt="Motion Site Builder logo — the cubic-bezier(0.16, 1, 0.3, 1) curve" width="96" height="96">
# 运动站点构建工具
**使用人工智能设计、审查和改进运动驱动的界面。**
生成新的站点或改进现有的用户界面，通过配置文件感知的构建、严格的运动审查、整个代码库的审计、可执行的改进计划和确定性的17规则检查工具。
[](https://github.com/olbboy/motion-site-builder/actions/workflows/ci.yml)
[](https://github.com/olbboy/motion-site-builder/releases/latest)
[](LICENSE)
[](prompts/README.md)
[](skills/motion-site-builder/scripts/lint_motion.py)
[](https://github.com/olbboy/motion-site-builder/stargazers)
[](CONTRIBUTING.md)
[**在线演示**](https://olbboy.github.io/motion-site-builder/) · [快速入门](#-快速入门) · [工作原理](#-工作原理) · [设计DNA](#-设计DNA) · [文档](#-文档) · [贡献](#-贡献)
[](https://olbboy.github.io/motion-site-builder/)
*此[主页](https://olbboy.github.io/motion-site-builder/)（[`site/`](site)）由其自身的提示构建——一个电影般的壳，其英雄嵌入了一个实时五语言舞台——并在每个文件中获得100/A+的评分，使用捆绑的运动检查工具。*
</div>
---
## 你可以做什么
| 工作 | 开始 | 结果 |
|---|---|---|
| **构建新的用户界面** | 品牌简介、页面创意或现有的参考提示 | 可用的React/Vite/Tailwind代码或可移植的一次性提示 |
| **审查更改** | 差异或运动承载组件 | 配置文件感知的发现、精确的前后值和 **阻止/批准** 判决 |
| **改进现有应用** | 感觉迟缓、通用或不一致的代码库 | 优先审计 → 自包含计划 → 可选 `执行` → 审查实施 |
| **验证和调整** | 现有的CSS/JSX/TSX/HTML或正在进行的 设计决策 | 分数/等级加上精确的令牌、缓动、持续时间、模式和可重用的基元 |
该套件根据责任故意分成几部分：`motion-site-builder` 构建，`review-motion` 审查更改，`improve-motion` 调查代码库并计划最高影响的修复。它们共享相同的配置文件、17规则检查工具和运动标准。
## ✨ 内部
| | |
|---|---|
| 🎬 **[提示库](prompts/README.md)** | 54个原始提示（电影英雄、仪表板、文档、商店前台、活动）准备好粘贴到Bolt、Lovable、v0或Cursor——包括[我们自己的登陆页面](prompts/motion-site-builder-landing.md)，两个100/A+示例，每个非电影配置文件，和20个概念越南景观集合，带有Pexels源页面和本地下载目标。没有品牌复制品或热链接的第三方资产。 |
| 🤖 **代理技能（×3）** | **[motion-site-builder](skills/motion-site-builder/SKILL.md)**：15步计划 → 构建 → 验证工作流。 **[review-motion](skills/review-motion/SKILL.md)**：机械检查 + 高级判断 → 前后 + 阻止/批准。 **[improve-motion](skills/improve-motion/SKILL.md)**：侦察 → 8类别审计 → 优先、可执行的计划 → `执行` / `协调`。 |
| ✅ **[运动检查工具](skills/motion-site-builder/scripts/lint_motion.py)** | 在生成的代码或现有代码上运行它。17个配置文件感知的规则捕获缺少的减少运动、布局属性动画、缓动漂移、视频卫生、强调色滥用、`ease-in` UI、`scale(0)`、错误的弹出窗口原点、缺少按压反馈和无门控悬停运动。返回发现、分数和等级。 |
| 🔌 **[MCP服务器](skills/motion-site-builder/scripts/server.py)** | 8个零依赖工具公开五个配置文件、完整令牌、24个逐字基元、配置文件特定的模式建议、缓动/持续时间原理、语料库检索和内联/文件验证。 |
## 🚀 快速入门
### 路径1 — 复制生产提示（30秒）
1. 浏览[提示目录](prompts/README.md)并打开一个接近您想法的提示。
2. 将整个文件复制到 **Bolt / Lovable / v0 / Cursor**。
3. 个性化明确标记的值：品牌/复制、调色板在该配置文件的强调色预算内，以及许可的本地媒体或占位符。保持运动和可访问性约束完整。
### 路径2 — 安装完整的代理套件
从存储库根目录开始，这是Claude Code符号链接设置：
```bash
git clone https://github.com/olbboy/motion-site-builder
cd motion-site-builder
for s in motion-site-builder review-motion improve-motion; do
ln -s "$(pwd)/skills/$s" ~/.claude/skills/$s
done
```
对于另一个代理运行时，请使用相同的三个目录复制或链接，使用该运行时的`SKILL.md`发现约定。
使用与工作匹配的技能：
```text
"构建一个产品UI计费仪表板并返回可用的代码。"
"审查这个差异中的运动并给我一个阻止/批准的判决。"
"使用improve-motion深入审计这个应用程序；根据影响/努力优先修复。"
"执行计划/001-fix-dropdown-origin.md，然后审查差异。"
```
`improve-motion`在侦察/审计期间是只读的：它编写实现计划，而不是源代码更改。`execute <plan>`是明确的实现路径；它调度执行器并使用`review-motion`栏审查生成的差异。
### 路径3 — 启用MCP工具（可选，零依赖）
```json
{
"mcpServers": {
"motion-site-tools": {
"command": "python3",
"args": ["<repo>/skills/motion-site-builder/scripts/server.py"]
}
}
}
```
您将获得`motion_list_profiles`、`motion_validate`、`motion_get_tokens`、`motion_get_template`、`motion_suggest_pattern`、`motion_easing_rationale`、`motion_find_reference`、`motion_validate_file`。每个带有味道的工具都接受一个可选的`profile`参数。
## 🧠 工作原理
大多数AI生成的站点看起来很通用——而现有的产品往往感觉不一致——因为运动决策被留给机会。这存储库将味道转化为两个确定性的工作流：
```
新的简介 → 配置文件 → 计划 → 适配最近的54个 → 构建 → 检查 → 运行时烟雾测试
现有的UI → 侦察 → 审计 → 优先计划 → 执行 → 审查 → 验证
更改的差异 → 配置文件感知的检查 + 判断 → 阻止 / 批准
```
- **检索优于生成** — 技能找到最接近的现有提示并适配值，而不是凭空生成结构。
- **逐字基元** — 签名CSS（`liquid-glass`、`text-glow`，无缝视频淡入淡出，rAF+lerp视差）被精确粘贴，而不是改述。
- **确定性质量门控** — 检查工具对每个文件进行0-100的评分；错误阻止，警告建议。
- **检查后的判断** — 审查和审计添加频率、interruptibility、凝聚力和机会分析，regex无法看到。
- **计划在突变之前** — 整个代码库的改进在执行器触摸源代码之前被限定和审查。
## 🎨 设计DNA — 五个配置文件
引擎提供 **五个设计语言** — 选择一个，检查工具和工具强制执行 *该* 味道（`motion_list_profiles`，然后一个`profile`参数）。完整指南：[design-profiles.md](skills/motion-site-builder/references/design-profiles.md)。
| 配置文件 | 用于 | 签名 |
|---|---|---|
| **电影** *(默认)* | 英雄，登陆，启动 | 视频优先，玻璃，衬线，1个强调色，入口0.5–1.2s |
| **产品UI** | 仪表板，SaaS，管理 | 清晰，快速（<250ms），浅色+深色，语义多强调色 |
| **编辑** | 博客，文档，文章 | 排版优先，散文，克制运动 |
| **活泼** | 消费者，创意，活动 | 鲜活的多强调色，弹跳弹簧，装饰色 |
| **电子商务** | 商店前台，产品页面 | 图像优先，快速，快速查看，品牌+中性 |
所有五个配置文件都具有良好的运动 *感觉*（减少运动，仅限GPU，压反馈，没有`ease-in` UI）；节奏，调色板和排版因配置文件而异。
### 电影（默认）— 签名元素检查工具和令牌强制执行：
| 签名 | 含义 |
|---|---|
| 全屏视频背景 | 媒体是画布；UI在上面保持安静 |
| 显式z-index分层 | 通过分层实现深度（视频0 → 覆盖层1 → 内容10 → 导航20），永远不要使用WebGL |
| `rounded-full`药丸UI | 导航和按钮的玻璃药丸 |
| 显示类型的负跟踪 | 紧凑的编辑标题 |
| Glassmorphism（`backdrop-blur`） | `liquid-glass`表面基元 |
| 仪器衬线 + Inter配对 | 衬线显示在干净的无衬线主体上 |
| 签名缓动 `cubic-bezier(0.16, 1, 0.3, 1)` | 入口处的expo-out |
完整指南：[motion-design-dna.md](skills/motion-site-builder/references/motion-design-dna.md)。 **所有内容都是可定制的** — 电影默认值位于`config/motion-tokens.json`；其他四个语言位于`config/profiles/*.json`中，架构相同。参见[自定义指南](skills/motion-site-builder/README.md#customize-the-whole-point)。
## 📁 仓库结构
```
prompts/ # 库 — 每个提示一个.md（全部原创）
skills/motion-site-builder/ # 引擎（构建）
SKILL.md # 代理工作流（入口点）
references/ # 设计配置文件，DNA，交互标准，目录
config/motion-tokens.json # 电影味道（默认配置文件）
config/profiles/*.json # product-ui · editorial · playful · ecommerce
data/prompt-index.json # 生成的语料库索引
scripts/ # 检查工具 · 索引构建器 · MCP服务器（所有零依赖Python）
skills/review-motion/ # 严格的差异审查（前后表格 + 阻止/批准）
skills/improve-motion/ # 代码库审计 → 自包含计划（SKILL + AUDIT + PLAN-TEMPLATE）
site/ # 电影登陆页面 — 从其自己的提示中狗食
examples/ # 配置文件狗食（例如product-ui-dashboard — 在product-ui下100/A+）
docs/ # 入门，提示指南，架构
```
`review-motion`和`improve-motion`是 *方法* 技能 — 它们重用构建者的检查工具、令牌和标准，而不是复制它们。
## 📚 文档
- [入门](docs/getting-started.md) — 构建、审查、改进和独立验证路径
- [提示指南](docs/prompt-guidelines.md) — 如何编写和提交提示
- [架构](docs/architecture.md) — 技能、检查工具、索引和MCP服务器如何协同工作
- [交互标准](skills/motion-site-builder/references/interaction-standards.md) — 精确的微运动值和频率规则
- [审查技能](skills/review-motion/SKILL.md) · [改进技能](skills/improve-motion/SKILL.md) — 使用现有代码
- [技能README](skills/motion-site-builder/README.md) — 自定义和扩展引擎
## 🤝 贡献
提示、检查规则和基元都欢迎 — 参见[CONTRIBUTING.md](CONTRIBUTING.md)。简短版本：
1. 按照[指南](docs/prompt-guidelines.md)将您的提示添加到`prompts/`。
2. 运行`python3 skills/motion-site-builder/scripts/build_index.py`重新索引。
3. 如果您触摸了引擎，请运行`python3 skills/motion-site-builder/scripts/lint_motion.py --self-test`。
4. 打开一个PR — CI运行相同的检查。
## ⚖️ 许可证和出处
- **此存储库中的所有内容 — 代码、技能、检查工具、文档、登陆页面和所有54个提示**：[MIT](LICENSE)。
- **原始提示**：每个提示都从该项目自己的设计配置文件和运动DNA中编写。没有品牌复制品、复制的副本或热链接的第三方资产。
- **自带媒体**：大多数提示使用显式占位符。越南系列反而记录了Pexels源页面、摄影师积分、裁剪指导和本地下载目标；图像二进制文件未绑定。请在发布前重新检查源许可证。所有字体都是开放许可的（Google Fonts / OFL）。
---
<div align="center">
Made with an unhealthy obsession for <code>cubic-bezier(0.16, 1, 0.3, 1)</code>
</div>
