Back to Details

visual-edit-precision

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Visual Edit Precision

视觉编辑精准性

Overview

概述

When visual context accompanies a change request (element selections, annotations, screenshots), make targeted, minimal edits. Precision over ambition: change exactly what was indicated, preserve everything else.
当变更请求附带视觉上下文（元素选择、注释、截图）时，请进行有针对性的最小化编辑。精准优先于求全：只修改指定内容，保留其他所有部分。

Process

流程

When visual context is provided:
  1. IDENTIFY - What exact element(s) were indicated? Which component file owns them?
  2. SCOPE - Change ONLY what was pointed at. Don't refactor surrounding code.
  3. PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
  4. TARGETED - Make the minimal CSS/markup change that achieves the visual result.
  5. VERIFY - Confirm the change renders correctly without side effects.
当提供视觉上下文时：
  1. 识别 - 确定被指定的具体元素是什么？哪个组件文件包含它们？
  2. 界定范围 - 只修改被指向的内容。不要重构周边代码。
  3. 保留 - 保留现有样式、类和行为。仅修改被要求的部分。
  4. 针对性修改 - 做出能实现视觉效果的最小CSS/markup变更。
  5. 验证 - 确认变更渲染正确且无副作用。

Key Principles

核心原则

Precision Over Ambition

精准优先于求全

Visual context gives a SPECIFIC element. Don't:
  • Refactor the entire component when only one style was requested
  • Change the component's API when only its appearance was pointed at
  • Touch logic when only visuals were selected
Do:
  • Find the exact file and line for the selected element
  • Make the minimal edit that achieves the described visual change
  • Preserve all existing behavior, event handlers, accessibility
视觉上下文指向特定元素。请勿：
  • 仅需修改一个样式时重构整个组件
  • 仅需修改外观时更改组件的API
  • 仅选择了视觉元素时改动逻辑
请：
  • 找到所选元素对应的具体文件和行
  • 做出能实现描述的视觉变更的最小编辑
  • 保留所有现有行为、事件处理程序、可访问性特性

Multiple Edits

多编辑场景

When multiple visual edits arrive:
  • Each targets its own element independently
  • Don't wait for one to finish before processing another
  • If two edits conflict (same element, different requests), handle the most recent
当收到多个视觉编辑请求时：
  • 每个请求独立针对各自的元素
  • 无需等待一个完成再处理另一个
  • 如果两个请求冲突（同一元素，不同要求），处理最新的请求

Common Mistakes

常见错误

  • Rewriting an entire component when the user pointed at one button
  • Changing global config when only one element's color needs adjusting
  • Breaking responsive behavior by adding fixed widths to match a selection
  • Ignoring specificity (user indicated ONE card, agent changed ALL cards)
  • Removing accessibility attributes (aria-*, role, tabindex) during visual edits
  • 用户指向一个按钮时重写整个组件
  • 仅需调整一个元素颜色时修改全局配置
  • 通过添加固定宽度匹配选择内容而破坏响应式行为
  • 忽略特异性（用户指定一张卡片，Agent修改了所有卡片）
  • 在视觉编辑期间移除可访问性属性（aria-*、role、tabindex）