内容
# Webasyst Tapestry：基于AI的Webasyst模块化生态系统构建器
[](https://amit491k-del.github.io/webasyst-ai-workbench/)
## 智能编排器，用于Webasyst组件生成、主题工程和插件架构
*弥合人工智能与Webasyst生态系统之间的差距 — 将您的自然语言指令转化为可投入生产的应用程序、主题和插件，无需编写任何样板代码。*
---
## 目录
- [Webasyst Tapestry背后的愿景](#the-vision-behind-webasyst-tapestry)
- [架构概述](#architecture-overview)
- [重新定义Webasyst开发的关键功能](#key-features-that-redefine-webasyst-development)
- [Emoji 操作系统兼容性矩阵](#emoji-os-compatibility-matrix)
- [系统需求](#system-requirements)
- [安装和设置](#installation-and-setup)
- [示例配置文件](#example-profile-configuration)
- [示例控制台调用](#example-console-invocation)
- [Mermaid图：Tapestry如何将智能编织到Webasyst](#mermaid-diagram-how-tapestry-weaves-intelligence-into-webasyst)
- [与OpenAI API和Claude API集成](#integration-with-openai-api-and-claude-api)
- [使用AI辅助构建响应式UI组件](#building-responsive-ui-components-with-ai-assistance)
- [多语言支持和全球化](#multilingual-support-and-globalization)
- [24/7客户支持架构](#247-customer-support-architecture)
- [免责声明](#disclaimer)
- [许可证](#license)
- [贡献](#contributing)
- [再次下载](#download-again)
---
## Webasyst Tapestry背后的愿景
想象一个个人架构师，它了解Webasyst框架的复杂结构 — 每个钩子、每个API端点、每个主题变量和每个插件约定。现在想象这个架构师会说你的语言，几乎可以读懂你的心思，并可以在你喝早晨咖啡的同时生成完整的Webasyst组件。
**Webasyst Tapestry**不仅仅是另一个MCP服务器。它是一个生态系统编排器，改变了开发人员和非开发人员与Webasyst宇宙的交互方式。如果现有的`webasyst-mcp`提供了工具，那么这个项目就提供了**蓝图引擎** — 决定使用哪些工具、何时使用它们以及如何将它们组合成比部分之和更大的东西的智能。
把Webasyst想象成一个大型图书馆，而Tapestry是图书管理员，不仅知道每本书，还可以根据需求编写新章节，用自定义主题进行插图，并将它们绑定到功能插件中。这是模块化Web开发的未来 — 您的想法直接通过AI通道流入可执行的代码。
---
## 架构概述
Webasyst Tapestry作为一个**元编排器**，位于MCP协议之上。 而基础MCP服务器提供原子操作（创建应用、生成主题、验证插件），Tapestry引入：
- **意图解析层** — 将模糊的人类请求转换为结构化的Webasyst操作
- **组件依赖映射** — 了解主题如何依赖应用程序、插件如何扩展控制器以及所有组件如何连接
- **版本感知生成** — 知道您要针对的Webasyst版本，并相应地调整输出
- **多模型路由** — 可以根据任务复杂性将任务路由到不同的AI模型（OpenAI GPT-4、Claude 3.5 Sonnet）
核心架构在**纺锤线-线程**隐喻上运行：纺锤线（Tapestry）持有核心逻辑，而线程（MCP服务器）承载特定功能。 当您请求“具有暗色模式切换的多语言电子商务主题”时，Tapestry将主题生成、国际化和UI组件库的线程编织在一起。
---
## 重新定义Webasyst开发的关键功能
| 功能 | 描述 | 影响 |
|---------|-------------|--------|
| **意图到应用程序管道** | 用自然语言描述应用程序的目的 | 将开发时间从几天缩短到几分钟 |
| **语义主题织造器** | 生成自动匹配品牌指南的主题 | 消除CSS漂移和设计不一致 |
| **插件依赖图** | 可视化插件与Webasyst核心模块的交互方式 | 在冲突发生之前预防冲突 |
| **多模型AI路由器** | 将简单任务路由到Claude Haiku，将复杂任务路由到GPT-4 Turbo | 同时优化成本和质量 |
| **实时预览生成** | 在组件创建过程中创建实时HTML预览 | 在不切换上下文的情况下查看进度 |
| **自动文档合成器** | 为每个生成的组件生成README文件和API文档 | 您的项目从第一天就带有文档 |
| **迁移路径分析器** | 检查新插件是否会破坏现有安装 | 生产部署的安全网 |
| **响应式UI脚手架** | 构建适用于所有屏幕尺寸的移动优先界面 | 一个主题适用于所有设备 |
| **多语言模板引擎** | 自动生成本地化文件和翻译键 | 为50多种语言的全球受众做好准备 |
| **24/7支持机器人集成** | 通过生成的窗口连接到您的帮助台 | 永不睡眠的客户支持 |
---
## Emoji 操作系统兼容性矩阵
| 操作系统 | 兼容性 | Emoji | 注意 |
|-----------------|---------------|-------|-------|
| Windows 11 | 完整支持 | ✅ | 已在Node 20+上测试 |
| macOS Sonoma+ | 完整支持 | ✅ | 原生ARM64支持 |
| Ubuntu 22.04+ | 完整支持 | ✅ | 需要Python 3.10+用于AI路由 |
| Debian 12 | 完整支持 | ✅ | 需要额外的系统依赖 |
| Fedora 39+ | 完整支持 | ✅ | 可用RPM包 |
| Alpine Linux | 部分支持 | ⚠️ | 某些GPU功能不可用 |
| FreeBSD 14 | 社区支持 | 🧪 | 实验性支持 |
| ChromeOS（Linux容器） | 部分支持 | ⚠️ | 需要USB设备直通 |
所有标记为✅的平台都运行完整的Tapestry软件包，并具有完整的AI集成。标记为⚠️的平台将具有功能性的基础功能，但可能缺少高级优化模块。
---
## 系统需求
- **Node.js**：版本20.0.0或更高（推荐使用LTS版本进行生产）
- **Python**：版本3.10或更高（AI模型路由所需）
- **内存**：最低4GB RAM（推荐8GB+用于AI驱动的生成）
- **存储**：核心安装2GB，生成的项目需要额外空间
- **Webasyst**：版本1.12.0或更新（或2.0.0使用兼容模式）
- **互联网连接**：AI模型API调用所需
- **OpenAI API密钥**或**Anthropic API密钥**：至少有一个用于AI功能
可选但推荐：
- **Docker**：用于隔离的开发环境
- **Git**：用于版本控制集成
- **ngrok或类似工具**：用于在本地测试Webhook
---
## 安装和设置
[](https://amit491k-del.github.io/webasyst-ai-workbench/)
### 快速入门
```bash
# 克隆仓库
git clone https://amit491k-del.github.io/webasyst-ai-workbench/
cd webasyst-tapestry
# 安装核心依赖
npm install --production
# 安装Python AI路由模块
pip install -r ai-routing/requirements.txt
# 配置API密钥
cp .env.example .env
# 编辑.env以设置您的首选AI提供商密钥
# 初始化Tapestry
npx tapestry init
# 验证安装
npx tapestry doctor
```
### Docker安装（推荐用于生产）
```bash
docker pull tapestry/webasyst-tapestry:latest
docker run -d \
--name tapestry-server \
-p 3000:3000 \
-v /path/to/your/webasyst:/webasyst \
-e OPENAI_API_KEY=your_key \
-e CLAUDE_API_KEY=your_key \
tapestry/webasyst-tapestry:latest
```
### 平台特定说明
**Windows用户**：确保Node.js已添加到您的PATH中。如果遇到权限错误，请以管理员身份运行PowerShell进行初始设置。
**macOS用户**：如果您使用Homebrew，可以使用`brew install node python@3.11`安装依赖项。
**Linux用户**：某些发行版可能需要`build-essential`软件包。在基于Debian的系统上运行`sudo apt-get install build-essential`。
---
## 示例配置文件
配置文件在Webasyst Tapestry中定义AI助手的个性、领域专业知识和首选输出样式。以下是为电子商务专家配置的配置文件示例：
```json
{
"profile": "ecommerce-architect",
"description": "专攻构建具有Webasyst的在线商店",
"persona": {
"system_prompt": "您是一位拥有10年电子商务经验的Webasyst专家。你更喜欢干净、模块化的代码，并严格分离关注点。你总是考虑支付网关集成。",
"temperature": 0.3,
"max_tokens": 4096
},
"branding": {
"primary_color": "#2E7D32",
"secondary_color": "#66BB6A",
"font_family": "Inter, sans-serif"
},
"targeting": {
"webasyst_version": "1.12.0",
"php_version": "8.1",
"responsive_level": "mobile-first"
},
"plugins": [
"payment-stripe",
"shipping-fedex",
"tax-calculator-pro"
],
"theme_preferences": {
"layout": "full-width",
"grid_system": "12-column",
"animation_style": "subtle-fade"
},
"ai_router": {
"simple_tasks": "claude-haiku",
"complex_tasks": "gpt-4-turbo",
"code_generation": "claude-sonnet-3.5"
}
}
```
此配置告诉Tapestry以电子商务专家的身份行事，具有特定的品牌颜色、插件偏好和成本优化的AI路由策略。您可以为不同的项目创建多个配置文件，并通过单个命令在它们之间切换。
---
## 示例控制台调用
以下是如何从命令行使用Tapestry生成完整的Webasyst组件：
```bash
# 使用AI助手生成新应用
npx tapestry generate app \
--name "MembershipHub" \
--profile "ecommerce-architect" \
--features "user-tiers,recurring-billing,content-gating" \
--multilingual "en,es,fr,de" \
--responsive true \
--api-provider openai
# 创建具有实时预览的主题
npx tapestry theme create \
--name "DarkMatter" \
--base "default" \
--palette "dark-mode" \
--responsive true \
--preview-port 8080
# 验证现有插件的兼容性
npx tapestry validate plugin \
--path ./plugins/social-login \
--webasyst-version 1.14.0
# 交互式会话（启动类似聊天的界面）
npx tapestry session \
--profile "ecommerce-architect" \
--continue-session ./sessions/last-session.json
# 导出整个项目到ZIP文件
npx tapestry export \
--format "webasyst-package" \
--include-docs true \
--output ./exports/my-project.zip
```
每个命令都返回结构化的JSON输出，可以将其输送到其他工具，使Tapestry成为CI/CD管道和自动化部署工作流的理想选择。
---
## Mermaid图：Tapestry如何将智能编织到Webasyst
```mermaid
graph TB
User([开发者 / AI助手]) -->|自然语言请求| IntentParser[意图解析层]
IntentParser -->|结构化查询| ProfileRouter[配置文件路由器]
ProfileRouter --> AIOrchestrator{AI编排器}
subgraph AIProviders["AI提供商集成"]
OpenAI[OpenAI GPT-4 Turbo]
Claude[Claude Sonnet 3.5]
Local[本地LLM备用]
end
AIOrchestrator --> OpenAI
AIOrchestrator --> Claude
AIOrchestrator --> Local
OpenAI -->|生成代码| CodeSynthesizer[代码合成器]
Claude -->|主题资产| AssetGenerator[资产生成器]
Local -->|备用模板| TemplateEngine[模板引擎]
CodeSynthesizer --> WebasystCore{Webasyst生成核心}
AssetGenerator --> WebasystCore
TemplateEngine --> WebasystCore
subgraph WebasystComponents["生成的Webasyst工件"]
Apps[Webasyst应用]
Plugins[Webasyst插件]
Themes[主题]
Widgets[UI小部件]
end
WebasystCore --> Apps
WebasystCore --> Plugins
WebasystCore --> Themes
WebasystCore --> Widgets
Apps --> ValidationChecker[验证和依赖检查]
Plugins --> ValidationChecker
Themes --> ValidationChecker
Widgets --> ValidationChecker
ValidationChecker -->|兼容性报告| User
ValidationChecker -->|部署包| Download[下载工件]
style User fill:#4B0082,color:#fff
style AIOrchestrator fill:#8B0000,color:#fff
style WebasystCore fill:#006400,color:#fff
style Download fill:#B8860B,color:#fff
```
**如何解释此图**：您的请求通过意图解析器进入，意图解析器将模糊的语言转换为精确的指令。配置文件路由器确保使用首选的AI样式，然后AI编排器为每个任务选择最佳提供商。生成的代码、资产和模板在Webasyst生成核心中汇聚，该核心在生成最终工件之前验证所有内容与Webasyst的严格约定的一致性。
---
## 与OpenAI API和Claude API集成
Webasyst Tapestry从底层构建，具有多提供商AI集成。以下是每个提供商的贡献：
### OpenAI API集成（GPT-4 Turbo和GPT-4 Vision）
- **复杂逻辑生成**：处理复杂的业务规则、支付流程和多步骤工作流
- **分析和报告**：生成带有实时数据可视化的仪表板组件
- **错误处理**：创建全面的try-catch块和边缘情况处理
- **视觉支持**：可以分析现有的Webasyst站点截图并复制其设计模式
### Claude API集成（Claude 3.5 Sonnet和Claude Haiku）
- **主题和CSS生成**：擅长创建一致、可维护的样式，具有正确的CSS架构
- **文档**：生成人类可读、结构良好的文档，支持多种语言
- **UI/UX建议**：根据成熟的网页设计原则提供设计建议
- **安全执行**：Claude的安全过滤器防止生成潜在有害的代码模式
### 自动模型路由
Tapestry根据复杂性智能路由任务：
- **简单查询**（主题颜色、插件名称）→ Claude Haiku（快速且成本效益高）
- **中等复杂度**（表单生成、基本控制器）→ GPT-4 Turbo Mini
- **高复杂度**（完整应用生成、API集成）→ Claude Sonnet 3.5
- **视觉任务**（UI分析、设计复制）→ GPT-4 Vision
路由在配置文件设置中完全可配置。您可以在每条命令的基础上使用 `--api-provider`标志覆盖路由。
### 速率限制和成本管理
```json
{
"rate_limiting": {
"max_requests_per_minute": 60,
"budget_per_hour_usd": 2.50,
"fallback_on_overage": "cache"
},
"caching": {
"ttl_seconds": 3600,
"storage": "redis",
"hash_similarity": 0.85
}
```
此配置确保您永远不会超出预算，同时仍能获得快速的响应以应对重复或类似的请求。
---
## 使用AI辅助构建响应式UI组件
Webasyst Tapestry默认生成**响应式组件** - 不需要`@media`查询猜测。以下是其工作原理：
### 响应式蓝图引擎
您请求UI组件时，Tapestry分析：
1. **内容密度** - 每个断点需要显示多少信息
2. **交互模式** - 触摸目标适用于移动设备，悬停状态适用于桌面设备
3. **性能预算** - 可以延迟加载的内容 vs. 必须在折叠上方的内容
4. **可访问性要求** - 默认符合WCAG 2.1 AA合规性
### 生成的响应式模式
- **移动优先网格系统** - 组件从320px缩放到2560px
- **自适应导航** - 导航菜单转换为汉堡菜单在断点处
- **图像优化** - 自动生成srcset和picture元素
- **触摸优化控件** - 48px最小触摸目标用于所有交互元素
- **打印样式** - 自动包含用于电子商务收据和发票的打印样式
### 示例：响应式产品卡生成
```json
{
"component": "product-card",
"breakpoints": {
"mobile": {
"columns": 1,
"image_size": "full-width",
"cta_button": "bottom-sticky"
},
"tablet": {
"columns": 2,
"image_size": "300x300",
"cta_button": "inline"
},
"desktop": {
"columns": 3,
"image_size": "400x400",
"cta_button": "hover-reveal",
"quick_view": true
}
},
"accessibility": {
"aria_labels": true,
"keyboard_navigation": true,
"reduced_motion": "reduce"
}
}
```
这三个不同的布局变体共享相同的语义HTML结构，确保所有设备上的SEO一致性。
---
## 多语言支持和全球化
Tapestry了解现代Webasyst应用程序服务全球受众。 多语言引擎在三个级别工作：
### 1. 自动本地化生成
当您指定目标语言时，Tapestry自动：
- 创建本地化文件（`.po`, `.mo`格式兼容Webasyst）
- 生成所有UI文本元素的翻译键
- 添加RTL支持的本地化文件（`.po`, `.mo`格式兼容Webasyst）
- 生成UI文本元素的翻译键
- 添加RTL支持检测，用于阿拉伯语、希伯来语和波斯语
### 2. 上下文感知翻译
AI不会只是翻译单词 - 它会翻译含义。例如：
- “Checkout”在德国语中变为“Kasse”（购物车上下文）但在开发上下文中变为“Auschecken”
- “Home”在法语中变为“Accueil”（温暖、亲切的语气）而变为“Maison”（字面翻译、冷漠的翻译）
- 货币格式、日期模式和数字符号自动调整
---
## 24/7客户支持架构
Webasyst Tapestry旨在为您的客户提供全天候支持。以下是其工作原理：
* **自动生成小部件**：Tapestry根据您的产品和文档自动创建可嵌入的帮助台小部件。
* **上下文感知响应**：AI驱动的机器人根据客户查询提供相关、准确的响应。
* **多语言支持**：我们的AI可以处理多种语言的查询，确保全球客户得到支持。
---
## 免责声明
本文件所提供的信息仅供参考。Webasyst Tapestry的所有功能和特性可能会有所变动。
---
## 许可证
Webasyst Tapestry根据[插入许可证]许可证发布。
---
## 贡献
欢迎为Webasyst Tapestry做出贡献。请参阅我们的GitHub仓库以获取更多信息。
---
## 再次下载
[](https://amit491k-del.github.io/webasyst-ai-workbench/)
：文化适应
Tapestry 超越语言，考虑文化细微差别：
- 色彩调色板调整（避免文化上不敏感的组合）
- 布局更改（针对阿拉伯语脚本的 RTL 镜像）
- 图片选择建议（地区适宜的图像）
- 表单字段排序（适应本地地址格式）
### 支持的语言
| 语言 | 原语名称 | 地区代码 | RTL 支持 |
| --- | --- | --- | --- |
文 | 中文 | | 否 |
| 英语 | English | en_US | 否 |
班牙语 | Español | es_ES | 否 |
| 法语 | Français | fr_FR | 否 德语 | Deutsch | de_DE | 否 |
| 阿拉 | العربية | ar_S 是 |
| 希伯 | עברית | he_IL | 是 |
| 日语 | 日本語 | ja_JP | 否 |
| 俄语 | Русский | ru_RU | 否 |
| 葡萄牙语 | Português | pt_BR | 否 |
另外 40 多种语言通过扩展包提供。所有翻译都包含正式和非正式变体（例如，法语的“vous”与“tu”）。
---
## 24/7 客户支持架构
Webasyst Tapestry 不仅生成代码，还为持续的客户支持生成基础设施。
### 自愈文档
Tapestry 生成的每个组件都包含：
- **内联代码注释**，以您的网站语言显示，而不仅仅是英语
- **API 文档**，格式为 OpenAPI 3.1
- **故障排除指南**，自动填充常见错误场景
- **更新迁移说明**，跟踪版本之间的更改
### 集成帮助台小部件
在生成电子商务或 SaaS 组件时，Tapestry 可以自动包含：
- **实时聊天小部件**（为您的支持团队配置）
- **工单系统集成**（与 Zendesk、Freshdesk、Jira 兼容）
- **知识库搜索**（索引您的生成文档）
- **聊天机器人备用**（当人工代理离线时）
### 主动错误监控
生成的应用程序包含一个可选的遥测模块：
- 检测常见配置错误
- 在用户报告问题之前建议修复
- 跟踪用户在 UI 中的摩擦点
- 生成每周支持改进报告
### 示例支持配置
```json
{
"support": {
"widget_position": "bottom-right",
"availability_hours": "24/7",
"chat_provider": "tawk.to",
"ticket_system": "zendesk",
"knowledge_base": {
"auto_generate": true,
"languages": ["zh", "es", "fr"],
"include_screenshots": true
},
"fallback_bot": {
"provider": "openai",
"persona": "friendly_technical",
"escalation_threshold": 3
}
}
}
```
此配置在您的 Webasyst 安装中创建了一个功能齐全的支持生态系统 - 用户无需离开您的网站即可获得帮助。
---
## 免责声明
**重要的法律和用法免责声明**
Webasyst Tapestry 是一个**非官方**的第三方工具，与 Webasyst LLC、OpenAI、Anthropic 或任何其他引用的公司或组织无关。
- “Webasyst”一词是 Webasyst LLC 的注册商标。该项目仅使用该名称来描述与 Webasyst 框架的兼容性和集成。
- 由该工具生成的 AI 代码在部署到生产环境之前应由合格的开发人员审查。
-维护者不负责因使用生成的代码而造成的任何损害、数据丢失或安全漏洞。
- OpenAI、Anthropic 或其他服务的 API 您的机器上本地处理，永远不会传输给除各自 API 端点之外的任何第三方。
- 所有生成的内容都受在生成过程中使用的 AI 提供商的服务条款约束。
-按“原样，不提供任何明示或暗示的保证。
使用 Webasyst Tapestry，即表示您已阅读、理解并同意这些条款。如果您不同意，请勿下载或使用此软件。
---
## 许可证
该项目许可证 - 一种允许您使用、修改、发布和分发宽容许可证，且限制极少。
**MIT 许可证：**
- ✅ 允许商业使用
- ✅ 允许修改和发布
- ✅ 允许私人使用
- ✅ 允许
- ❌ 作者不承担损害赔偿责任
- ❌ 不提供任何保证
许可证全文请参见：[MIT License on Open](https://opensource.org/licenses/MIT)
---
## 贡献
Webasyst Tapestry 依靠社区贡献蓬勃发展您是修复错别字新的 AI 提供商集成，还是改进主题生成算法，您的帮助都是受欢迎的。
### 如何贡献
1. Fork 仓库
2. 创建一个功能分支（`git checkout -b feature/amazing-idea`）
3. 提交您的更改（`git commit -m 'Add amazing idea'`）
4. 推送到分支（`git push origin feature/amazing-idea`）
5. 打开拉取请求
### 贡献指南
- 所有代码必须通过现有的测试（在提交前运行 `npm test`）
- 新功能必须包含单元测试和文档
- AI 提示必须经过安全性和偏见测试
- 遵循现有的代码风格（使用提供的 ESLint 配置）
### 获取帮助
- 为 bug 或功能请求打开 GitHub 问题
- 在 GitHub Discussions 上加入我们的社区讨论
- 查看 `docs/` 文件夹以获取文档
---
## 再次下载
[](https://amit491k-del.github.io/webasyst-ai-workbench/)
* 2026 Webasyst Tapestry 贡献者。 为 Webasyst 社区精心打造。 充满好奇心和 AI 辅助创造的无限可能性的咖啡因驱动的开发。*
**Webasyst Tapestry** — *您的想象力与 Webasyst 架构相遇，由人工智能最精细的线程编织而成。*
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器