webf
一个让Flutter应用内嵌完整Web运行时的开发框架。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：webf。 它的用途是：一个让Flutter应用内嵌完整Web运行时的开发框架。 完整的 Skill 内容见：https://321skill.com/skills/webf/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Flutter开发一个电商App，商品详情页想用Vue3 + Tailwind CSS来快速实现并频繁迭代，同时需要能调用原生的相机和支付插件。”，它会建议你使用 WebF 来承载这个商品详情页模块，指导你如何用 Vite 构建 Vue 项目，并通过 WebF 的 API 与 Flutter 端的原生插件进行通信，实现高效开发和原生体验的结合。
介绍
WebF 解决了在 Flutter 应用中无法高效、高性能地运行标准 Web 技术（HTML/CSS/JavaScript）的痛点。它并非一个简单的 WebView 封装，而是一个完全基于 Flutter 自研的、符合 W3C 标准的渲染引擎和 JavaScript 运行时，允许开发者将 React、Vue 等现代前端框架构建的组件直接嵌入到 Flutter 应用中，实现原生级的交互性能。
使用 WebF，开发者可以通过 npm 安装前端依赖，使用 Vite 等工具构建项目，并将生成的 Web 资源打包进 Flutter 应用。在 Flutter 端，通过一个 WebF 组件即可加载并渲染整个 Web 应用，同时支持 Web 与 Flutter/Native 代码之间的双向直接通信，无需传统的桥接协议。
它非常适合希望复用现有 Web 技术栈和团队能力，但又需要构建高性能、跨平台原生应用的前端开发者、Flutter 开发者以及全栈开发者。对于需要快速进行 UI 迭代或希望一套代码覆盖 Web 和 Native 场景的团队尤为有益。
建议从官方文档的“快速开始”入手，先尝试将一个小型 React/Vue 项目集成到 Flutter 中。需要注意的是，WebF 旨在提供应用级的 Web 运行时，而非替代完整浏览器，因此不适合需要完整浏览器特性（如插件、DevTools 全部功能）的网页浏览场景。
核心特点
与传统的 WebView 方案（如 webview_flutter）不同，WebF 拥有自研的 Flutter 渲染管线，实现了真正的原生性能融合；与 Flutter Web 不同，WebF 允许在移动端/桌面端原生应用中嵌入一个持久的、完整的 JavaScript 上下文和 DOM 环境，并能深度与 Flutter Widget 互操作。
注意事项
不适合需要完整浏览器功能（如浏览器扩展、所有 Web API）的网页浏览或爬虫场景。
常见问题
WebF 和 Flutter Web 有什么区别？
Flutter Web 将 Dart 代码编译为 JavaScript 在浏览器中运行；而 WebF 是在 Flutter 原生应用中嵌入了一个能运行 HTML/CSS/JS 的运行时，让你能用 Web 技术开发原生应用的 UI 模块。
WebF 的性能如何？
由于采用自研渲染引擎并与 Flutter 深度集成，其在动画、滚动等交互上性能远超传统 WebView，支持 60fps 流畅体验，且 JavaScript 与原生通信无桥接损耗。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/webf/raw/index.md 读取 webf 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/webf/raw/index.md（查看排版版本）