视觉编辑器——点击界面元素让 AI 帮你改，不用写 CSS

视觉编辑器的定位

传统低代码平台的界面编辑是"拖拽组件 → 配置属性 → 写 CSS 微调"的流程。Genesis 则试图让这一切变得更简单：

点击你想改的东西，然后用自然语言描述你想怎么改。

这个能力叫做 Element Selector——它是 Genesis 应用迭代最快的方式。

核心概念

在 Preview 模式下，界面上的每个元素都可以被"选中"：

• 文字段落、按钮、表单字段、卡片、导航栏
• 整个区块（一个 Section）、整个页面

选中后你可以：

1. 直接编辑文字（最简单）
2. 在 Taskade EVE 聊天里描述修改需求（最强大）

使用方法

模式一：快速文字编辑

选中一段文字 → 直接输入新内容。适合：

• 改文案
• 改按钮标签
• 改字段标题

模式二：AI 视觉编辑（强大模式）

选中元素 → 在聊天里描述你的需求。Taskade EVE 会：

1. 理解你选了什么（通过元素的位置、内容和页面结构推断）
2. 生成修改方案
3. 实时应用到预览

实际例子

场景：你觉得表单的提交按钮太小了、颜色和品牌不搭

1. 用 Element Selector 选中那个按钮
2. 在聊天里输入：

• "把按钮放大到更醒目的尺寸，主色改成深绿色（#2E7D32）"
• "同时在按钮旁边加一个小的 loading spinner"

1. 实时看到：按钮变大、颜色改变、旁边出现 loading 图标

场景：你觉得 Dashboard 的图表排列太乱

1. 选中整个 Dashboard 区域
2. 输入：

• "把 KPI 数字排成 2 列网格，顶部的折线图加宽占满整行"
• "每个图表卡片加上阴影效果，卡片标题用更大更粗的字体"

1. 实时看到布局调整

场景：你想加一个新功能

1. 选中一个空区域或整个页面
2. 输入：

• "在这里加一个'最近活动'时间线组件，展示 Projects 里的最近 10 条变更"

1. Genesis 自动创建新的界面元素、Projects 查询逻辑、数据绑定

进阶：跨元素描述

你可以不选中特定元素，而是描述你想在整个应用里做的改动：

• "把整个应用的主色调改成可以公司的品牌色 #FF6B35"
• "所有表单字段的 placeholder 文字改成灰色、字体调小一号"
• "给每个页面底部加一个简洁的版权声明"

Taskade EVE 会自动找到这些元素并统一修改。

视觉编辑器的边界

Element Selector 很强，但也有明确的适用范围：

适合的场景

• 文案和布局调整
• 颜色、字体、间距等样式微调
• 添加/删除界面组件
• 调整 Projects 数据的呈现方式

需要注意的场景

复杂的自定义样式：如果你需要精确的 CSS 动画或特殊效果，描述性提示词可能够不到。这时候：

• 把改动拆成小步骤一个个描述
• 或者让 AI 先生成基础版本，再逐步微调

新增复杂功能：比如"加一个实时协作编辑功能"——这已经不是改界面，而是改应用逻辑了。你可能需要：

• 用提示词重新描述需求
• 让 Genesis 重新构建应用
• 或者在 Automations 里手动补充缺失的逻辑

跨页面的一致调整：如果你改了一个页面的导航栏样式，其他页面会不会自动同步？答案是视情况而定——Genesis 会尽量保持一致性，但如果遇到不一致，直接在聊天里说"帮我统一所有页面的导航栏"。

视觉编辑器和提示词构建的配合

实际使用中，Genesis 应用的迭代通常是这样的节奏：

第一次提示词 → 生成可用但粗糙的 MVP
  ↓
视觉编辑器快速调整 → 让界面看起来像样
  ↓
实际测试 → 发现流程上的问题
  ↓
补一次提示词 → 让 Genesis 补逻辑和功能
  ↓
视觉编辑器精修 → 最终效果

提示词负责"生成功能和逻辑"，视觉编辑器负责"让它看起来顺眼"。两者配合是最有效率的方式。