<aside> 🚘

Trickle 官网直通车：https://trickle.so

</aside>

Magic Canvas 让人机共创真正落地，在一块可视化画布上即可完成应用和网站的搭建。

Trickle Magic Canvas 是首个面向 AI 协作的可视化画布。在这里，人与 AI 可以并肩创作，从零开始构建完整的应用和网站。本指南将带你快速了解核心理念、功能亮点和使用流程，帮助你高效上手。

Magic Canvas 是什么？

Magic Canvas 并不是单纯的 no-code 画板，也不是只能输入 Prompt 的对话框，而是一个 上下文驱动的多模态空间。

AI 会通过多维度信息理解你的意图，包括：

• 页面布局（组件和位置）
• 输入内容（Prompt、指令、编辑）
• 逻辑规则（笔记、限制条件、逻辑关系）
• 素材与数据（图片、数据库、搜索引用）

基于这些上下文，AI 能够实时生成、修改和扩展页面，在协作循环中持续完善。

快速上手 Magic Canvas

1. 进入 Canvas 模式

   打开主页切换到 Canvas 模式，输入第一个 Prompt，或者输入图片参考，AI 会在Canvas上直接生成初始页面和文案。

   

   

2. 上传品牌素材

   将 Logo、图片等素材拖入画布中的Asset(图片素材)区域，并用清晰的名称标注，AI 就能在项目中正确调用和复用。

   

   在 Asset 中，你可以用 AI 生成全新图像，或对现有素材进行二次创作与重构（基于 Gemini 2.5 Flash Image 模型，也称 nano-banana）；也可以直接从全局Library导入或Unsplash 搜索图片，再借助 AI 进行再创作。所有生成的图片都能无缝嵌入到网站相应位置，让创作过程更加流畅自然。更多AI生图详情教程请参考*’AI 生图与素材’*章节。

   

3. 启用数据库（如需要）

   当项目涉及动态内容或结构化数据时，AI 会根据需求自动创建数据库并设定关联字段；你也可以通过 Prompt 手动激活内置数据库，定义集合和数据条目。

   

4. 添加规则和笔记

   你可以在画布上写下关键规则或说明，设定行为规范（如设计风格、语气、响应结构），以帮助 AI 更精准地理解需求；也可以将其交由 Coding Agent 自动推断和补充。