@agent-native/core 0.84.38 → 0.84.40

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -373,6 +373,7 @@ interface DesignCanvasProps {
   }) => void;
   onElementDblClickText?: (info: ElementInfo) => void;
   onIframeHotkey?: (event: IframeHotkeyPayload) => void;
+  onFigmaClipboardPaste?: (event: IframeFigmaClipboardPastePayload) => void;
   onIframeContextMenu?: (event: IframeContextMenuPayload) => void;
   onEditorDragStateChange?: (active: boolean) => void;
   onVisualStructureChange?: (
@@ -612,6 +613,10 @@ export interface IframeHotkeyPayload {
   repeat: boolean;
 }
 
+export interface IframeFigmaClipboardPastePayload {
+  content: string;
+}
+
 export interface IframeContextMenuPayload {
   clientX: number;
   clientY: number;
@@ -653,6 +658,7 @@ export function DesignCanvas({
   onTextEditingStateChange,
   onElementDblClickText,
   onIframeHotkey,
+  onFigmaClipboardPaste,
   onIframeContextMenu,
   onEditorDragStateChange,
   onVisualStructureChange,
@@ -1168,6 +1174,12 @@ export function DesignCanvas({
         });
         return;
       }
+      if (e.data.type === "figma-clipboard-paste") {
+        const content =
+          typeof e.data.content === "string" ? e.data.content : "";
+        if (content) onFigmaClipboardPaste?.({ content });
+        return;
+      }
       if (e.data.type === "element-contextmenu") {
         const clientX = Number(e.data.clientX);
         const clientY = Number(e.data.clientY);
@@ -1291,6 +1303,7 @@ export function DesignCanvas({
     onTextEditingStateChange,
     onElementDblClickText,
     onIframeHotkey,
+    onFigmaClipboardPaste,
     onIframeContextMenu,
     onEditorDragStateChange,
     onVisualStructureChange,

package/corpus/templates/design/app/components/design/DesignImportPanel.tsx

@@ -5,6 +5,7 @@ import {
   IconChevronRight,
   IconCircleCheck,
   IconCode,
+  IconCopy,
   IconHtml,
   IconUpload,
 } from "@tabler/icons-react";
@@ -23,6 +24,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import {
+  getFigmaClipboardContent,
+  importResultSummary,
+  looksLikeStandaloneHtml,
+  VISUAL_EDIT_CONNECT_COMMAND,
+  type ImportResult,
+} from "@/lib/design-import";
 import { cn } from "@/lib/utils";
 
 import type { DesignExtensionSlotContext } from "./DesignExtensionsPanel";
@@ -31,31 +39,7 @@ interface DesignImportPanelProps {
   context: Pick<DesignExtensionSlotContext, "designId" | "viewMode">;
 }
 
-interface ImportResult {
-  designId?: string;
-  files?: Array<{ id: string; filename: string }>;
-  warnings?: string[];
-  error?: string;
-}
-
-type ImportMode = "figma-paste" | "fig-file" | "html";
-
-function hasFigmaPayload(html: string): boolean {
-  return /\(figmeta\)|\(figma\)|data-metadata=|data-buffer=/i.test(html);
-}
-
-function looksLikeHtml(value: string): boolean {
-  return /<(html|body|main|section|div|article|header|footer|button|img)\b/i.test(
-    value,
-  );
-}
-
-function resultSummary(result: ImportResult | undefined, fallback: string) {
-  const count = result?.files?.length ?? 0;
-  if (count === 0) return fallback;
-  if (count === 1) return `Imported ${result!.files![0]!.filename}.`;
-  return `Imported ${count} screens.`;
-}
+type ImportMode = "figma-paste" | "fig-file" | "html" | "local-app";
 
 export function DesignImportPanel({ context }: DesignImportPanelProps) {
   const t = useT();
@@ -78,7 +62,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
         queryClient.invalidateQueries({ queryKey: ["action", "get-design"] }),
         queryClient.invalidateQueries({ queryKey: ["action"] }),
       ]);
-      toast.success(resultSummary(result, fallback));
+      toast.success(importResultSummary(result, fallback));
       if (result?.warnings?.length) {
         toast.warning(t("designEditor.import.warningsToast"), {
           description: result.warnings[0],
@@ -91,7 +75,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
 
   const importHtmlString = useCallback(
     (content: string, originalName?: string) => {
-      if (!looksLikeHtml(content)) {
+      if (!looksLikeStandaloneHtml(content)) {
         toast.error(t("designEditor.import.errors.notHtml"));
         return;
       }
@@ -129,13 +113,14 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
       const text = event.clipboardData.getData("text/plain");
       const content = html || text;
       if (!content) return;
-      if (hasFigmaPayload(content)) {
+      const figmaContent = getFigmaClipboardContent(event.clipboardData);
+      if (figmaContent) {
         event.preventDefault();
         importSource.mutate(
           {
             designId: context.designId,
             sourceType: "figma-paste-html",
-            content,
+            content: figmaContent,
             originalName: "figma-paste.html",
           },
           {
@@ -157,7 +142,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
         );
         return;
       }
-      if (looksLikeHtml(content)) {
+      if (looksLikeStandaloneHtml(content)) {
         event.preventDefault();
         importHtmlString(content, "pasted-html.html");
       }
@@ -233,23 +218,32 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
     toast.success(t("designEditor.import.visualEditSent"));
   }, [t]);
 
+  const copyVisualEditCommand = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(VISUAL_EDIT_CONNECT_COMMAND);
+      toast.success(t("designEditor.copied"));
+    } catch {
+      toast.error(t("designEditor.toasts.clipboardBlocked"));
+    }
+  }, [t]);
+
   const busy = importSource.isPending || uploading;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div className="flex h-16 shrink-0 items-center border-b border-border/60 px-4">
+      <div className="flex h-14 shrink-0 items-center border-b border-border/60 px-3.5">
         <div className="min-w-0">
-          <h3 className="truncate text-xl font-semibold tracking-tight text-foreground">
+          <h3 className="truncate text-base font-semibold tracking-tight text-foreground">
             {t("designEditor.import.title")}
           </h3>
-          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
             {"Bring source screens into this design" /* i18n-ignore */}
           </p>
         </div>
       </div>
 
-      <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4 pt-4">
-        <div className="space-y-1">
+      <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-3.5 pb-4 pt-3">
+        <div className="space-y-0.5">
           <ImportSourceRow
             id="figma-paste-import"
             icon={<IconBrandFigma className="size-3.5" />}
@@ -264,10 +258,11 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               )
             }
           >
-            <div className="p-2.5">
+            <div className="p-2">
               <div
                 role="textbox"
                 tabIndex={0}
+                data-hotkeys-scope="text"
                 aria-label={t("designEditor.import.figmaPasteTarget")}
                 onPaste={handlePaste}
                 className={cn(
@@ -290,7 +285,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               setActiveMode((mode) => (mode === "fig-file" ? null : "fig-file"))
             }
           >
-            <div className="space-y-2 p-2.5">
+            <div className="space-y-2 p-2">
               <input
                 ref={fileInputRef}
                 type="file"
@@ -330,7 +325,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               setActiveMode((mode) => (mode === "html" ? null : "html"))
             }
           >
-            <div className="space-y-2 p-2.5">
+            <div className="space-y-2 p-2">
               <Textarea
                 value={htmlText}
                 onChange={(event) => setHtmlText(event.target.value)}
@@ -369,11 +364,11 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
           </ImportSourceRow>
         </div>
 
-        <div className="mt-5 border-t border-border/60 pt-4">
-          <p className="mb-2 text-xs font-medium text-muted-foreground">
+        <div className="mt-4 border-t border-border/60 pt-3">
+          <p className="mb-1.5 text-[11px] font-medium text-muted-foreground">
             {"More sources" /* i18n-ignore */}
           </p>
-          <div className="space-y-1">
+          <div className="space-y-0.5">
             <CompactSourceRow
               icon={<IconBrandGithub className="size-3.5" />}
               title={t("designEditor.import.githubTitle")}
@@ -382,24 +377,47 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
               }
               badge={t("designEditor.import.comingSoon")}
             />
-            <CompactSourceRow
+            <ImportSourceRow
+              id="local-app-import"
               icon={<IconCode className="size-3.5" />}
               title={t("designEditor.import.localTitle")}
-              description={
-                "Connect a running app with visual-edit." /* i18n-ignore */
+              description={t("designEditor.import.localDescription")}
+              isOpen={activeMode === "local-app"}
+              onToggle={() =>
+                setActiveMode((mode) =>
+                  mode === "local-app" ? null : "local-app",
+                )
               }
-              badge={t("designEditor.import.comingSoon")}
-              action={
+            >
+              <div className="space-y-2 p-2">
+                <p className="text-[11px] leading-snug text-muted-foreground">
+                  {t("designEditor.import.visualEditGuidance")}
+                </p>
+                <div className="flex items-center gap-1.5 rounded-md border border-border/70 bg-muted/40 p-1.5">
+                  <code className="min-w-0 flex-1 truncate font-mono text-[10px] leading-5 text-foreground/80">
+                    {VISUAL_EDIT_CONNECT_COMMAND}
+                  </code>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 shrink-0 px-1.5 text-[10px]"
+                    onClick={copyVisualEditCommand}
+                  >
+                    <IconCopy className="size-3" />
+                    {"Copy" /* i18n-ignore */}
+                  </Button>
+                </div>
                 <Button
                   size="sm"
-                  variant="ghost"
-                  className="h-7 px-2 text-[11px]"
+                  variant="outline"
+                  className="h-7 w-full justify-center text-[11px]"
                   onClick={askVisualEdit}
                 >
                   {t("designEditor.import.useVisualEditNow")}
                 </Button>
-              }
-            />
+              </div>
+            </ImportSourceRow>
           </div>
         </div>
 
@@ -448,24 +466,24 @@ function ImportSourceRow({
         aria-controls={id}
         onClick={onToggle}
         className={cn(
-          "group flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-2.5 text-left transition-colors hover:bg-accent/60 active:bg-accent",
+          "group flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent/60 active:bg-accent",
           isOpen && "bg-accent/45",
         )}
       >
-        <span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-border/70 bg-muted/70 text-muted-foreground transition-colors group-hover:border-border group-hover:bg-muted">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border/70 bg-muted/70 text-muted-foreground transition-colors group-hover:border-border group-hover:bg-muted">
           {icon}
         </span>
         <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium leading-tight text-foreground">
+          <span className="block truncate text-[13px] font-medium leading-tight text-foreground">
             {title}
           </span>
-          <span className="mt-0.5 line-clamp-1 text-xs leading-snug text-muted-foreground">
+          <span className="mt-0.5 line-clamp-1 text-[11px] leading-snug text-muted-foreground">
             {description}
           </span>
         </span>
         <IconChevronRight
           className={cn(
-            "size-4 shrink-0 text-muted-foreground transition-transform",
+            "size-3.5 shrink-0 text-muted-foreground transition-transform",
             isOpen && "rotate-90",
           )}
         />
@@ -473,7 +491,7 @@ function ImportSourceRow({
       {isOpen ? (
         <div
           id={id}
-          className="mb-2 mt-1 overflow-hidden rounded-md border border-border/70 bg-background/70"
+          className="mb-1.5 mt-1 overflow-hidden rounded-md border border-border/70 bg-background/70"
         >
           {children}
         </div>
@@ -496,13 +514,13 @@ function CompactSourceRow({
   action?: ReactNode;
 }) {
   return (
-    <div className="flex items-center gap-2 rounded-md px-2 py-2 text-left opacity-85">
+    <div className="flex items-center gap-2 rounded-md px-2 py-1.5 text-left opacity-85">
       <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/50 text-muted-foreground">
         {icon}
       </span>
       <span className="min-w-0 flex-1">
         <span className="flex items-center gap-1.5">
-          <span className="truncate text-xs font-medium text-foreground">
+          <span className="truncate text-[13px] font-medium text-foreground">
             {title}
           </span>
           <Badge variant="secondary" className="h-4 px-1 text-[9px]">

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -53,6 +53,7 @@ import {
   LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT,
   appendHitTestResponder,
   type IframeContextMenuPayload,
+  type IframeFigmaClipboardPastePayload,
   type IframeHotkeyPayload,
 } from "./DesignCanvas";
 import {
@@ -323,6 +324,9 @@ interface MultiScreenCanvasProps {
   onBoardElementClear?: () => void;
   onBoardElementDblClickText?: (info: ElementInfo) => void;
   onBoardIframeHotkey?: (event: IframeHotkeyPayload) => void;
+  onBoardFigmaClipboardPaste?: (
+    event: IframeFigmaClipboardPastePayload,
+  ) => void;
   onBoardIframeContextMenu?: (event: IframeContextMenuPayload) => void;
   onBoardTextEditingStateChange?: (state: {
     active: boolean;
@@ -1142,6 +1146,7 @@ export function MultiScreenCanvas({
   onBoardElementClear,
   onBoardElementDblClickText,
   onBoardIframeHotkey,
+  onBoardFigmaClipboardPaste,
   onBoardIframeContextMenu,
   onBoardTextEditingStateChange,
   boardClearSelectionRequest,
@@ -4949,6 +4954,7 @@ export function MultiScreenCanvas({
                   onElementHover={onBoardElementHover ?? (() => {})}
                   onClearSelection={onBoardElementClear}
                   onIframeHotkey={onBoardIframeHotkey}
+                  onFigmaClipboardPaste={onBoardFigmaClipboardPaste}
                   onIframeContextMenu={onBoardIframeContextMenu}
                   onVisualStructureChange={onBoardVisualStructureChange}
                   onVisualStyleChange={onBoardVisualStyleChange}

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -4965,26 +4965,98 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     true,
   );
 
+  var pendingPlainPasteHotkeyTimer: number | null = null;
+
+  function clearPendingPlainPasteHotkey() {
+    if (pendingPlainPasteHotkeyTimer === null) return;
+    window.clearTimeout(pendingPlainPasteHotkeyTimer);
+    pendingPlainPasteHotkeyTimer = null;
+  }
+
+  function postDesignHotkey(payload) {
+    (window.parent as Window).postMessage(
+      {
+        type: "design-hotkey",
+        key: payload.key,
+        code: payload.code,
+        metaKey: !!payload.metaKey,
+        ctrlKey: !!payload.ctrlKey,
+        shiftKey: !!payload.shiftKey,
+        altKey: !!payload.altKey,
+        repeat: !!payload.repeat,
+      },
+      "*",
+    );
+  }
+
   document.addEventListener(
     "keydown",
     function (e) {
       if (!shouldForwardDesignHotkey(e)) return;
+      var key = e.key;
+      var normalized = key && key.length === 1 ? key.toLowerCase() : key;
+      var primary = e.metaKey || e.ctrlKey;
+      var plainPasteHotkey =
+        primary && normalized === "v" && !e.altKey && !e.shiftKey;
       if (e.key === "Escape" && cancelActiveBridgeDrag()) {
         stopNativeInteraction(e);
         return;
       }
+      var payload = {
+        key: e.key,
+        code: e.code,
+        metaKey: !!e.metaKey,
+        ctrlKey: !!e.ctrlKey,
+        shiftKey: !!e.shiftKey,
+        altKey: !!e.altKey,
+        repeat: !!e.repeat,
+      };
+      if (plainPasteHotkey) {
+        clearPendingPlainPasteHotkey();
+        pendingPlainPasteHotkeyTimer = window.setTimeout(function () {
+          pendingPlainPasteHotkeyTimer = null;
+          postDesignHotkey(payload);
+        }, 0);
+        return;
+      }
       stopNativeInteraction(e);
       if (e.key === "Escape") clearRuntimeSelection();
+      postDesignHotkey(payload);
+    },
+    true,
+  );
+
+  function hasFigmaClipboardPayload(value) {
+    return /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
+      String(value || ""),
+    );
+  }
+
+  function getFigmaClipboardContent(data) {
+    if (!data || !data.getData) return "";
+    var html = data.getData("text/html") || "";
+    if (hasFigmaClipboardPayload(html)) return html;
+    var text = data.getData("text/plain") || "";
+    return hasFigmaClipboardPayload(text) ? text : "";
+  }
+
+  document.addEventListener(
+    "paste",
+    function (e) {
+      if (
+        (activeTextEditEl && e.target && activeTextEditEl.contains(e.target)) ||
+        isEditorTypingTarget(e.target)
+      ) {
+        return;
+      }
+      var content = getFigmaClipboardContent(e.clipboardData);
+      clearPendingPlainPasteHotkey();
+      if (!content) return;
+      stopNativeInteraction(e);
       (window.parent as Window).postMessage(
         {
-          type: "design-hotkey",
-          key: e.key,
-          code: e.code,
-          metaKey: !!e.metaKey,
-          ctrlKey: !!e.ctrlKey,
-          shiftKey: !!e.shiftKey,
-          altKey: !!e.altKey,
-          repeat: !!e.repeat,
+          type: "figma-clipboard-paste",
+          content: content,
         },
         "*",
       );

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -294,9 +294,9 @@ const messages = {
       githubTitle: "GitHub",
       githubDescription: "即將推出：直接從儲存庫匯入螢幕和元件。",
       localTitle: "本機 app / VS Code",
-      localDescription: "即將推出：連接執行中的本機 app 並匯入 URL 螢幕。",
+      localDescription: "使用 visual-edit 連接執行中的本機 app。",
       visualEditGuidance:
-        "目前可請代理使用 visual-edit。它可以執行 app、呼叫 `npx @agent-native/core@latest design connect`，並新增 URL 螢幕。",
+        "啟動 app，在 app repo 中執行下方命令，然後請代理使用 visual-edit skill 新增 URL 螢幕。",
       useVisualEditNow: "立即使用 visual-edit",
       comingSoon: "即將推出",
       warningsToast: "匯入完成但有警告",

package/corpus/templates/design/app/i18n-data.ts

@@ -301,10 +301,9 @@ const enUS = {
       githubDescription:
         "Coming soon: import screens and components directly from a repository.",
       localTitle: "Local app / VS Code",
-      localDescription:
-        "Coming soon: connect a running local app and import URL-backed screens.",
+      localDescription: "Connect a running local app with visual-edit.",
       visualEditGuidance:
-        "Today, ask the agent to use visual-edit. It can run the app, call `npx @agent-native/core@latest design connect`, and add URL-backed screens.",
+        "Start your app, run the command below from the app repo, then ask the agent to use the visual-edit skill to add URL-backed screens.",
       useVisualEditNow: "Use visual-edit now",
       comingSoon: "Coming soon",
       warningsToast: "Import completed with warnings",
@@ -10116,9 +10115,9 @@ const designImportOverrides = {
         githubTitle: "GitHub",
         githubDescription: "即將推出：直接從儲存庫匯入螢幕和元件。",
         localTitle: "本機 app / VS Code",
-        localDescription: "即將推出：連接執行中的本機 app 並匯入 URL 螢幕。",
+        localDescription: "使用 visual-edit 連接執行中的本機 app。",
         visualEditGuidance:
-          "目前可請代理使用 visual-edit。它可以執行 app、呼叫 `npx @agent-native/core@latest design connect`，並新增 URL 螢幕。",
+          "啟動 app，在 app repo 中執行下方命令，然後請代理使用 visual-edit skill 新增 URL 螢幕。",
         useVisualEditNow: "立即使用 visual-edit",
         comingSoon: "即將推出",
         warningsToast: "匯入完成但有警告",
@@ -10158,9 +10157,9 @@ const designImportOverrides = {
         githubTitle: "GitHub",
         githubDescription: "即将推出：直接从仓库导入屏幕和组件。",
         localTitle: "本地 app / VS Code",
-        localDescription: "即将推出：连接正在运行的本地 app 并导入 URL 屏幕。",
+        localDescription: "使用 visual-edit 连接正在运行的本地 app。",
         visualEditGuidance:
-          "现在可以让代理使用 visual-edit。它可以运行 app，调用 `npx @agent-native/core@latest design connect`，并添加 URL 屏幕。",
+          "启动 app，在 app repo 中运行下方命令，然后让代理使用 visual-edit skill 添加 URL 屏幕。",
         useVisualEditNow: "立即使用 visual-edit",
         comingSoon: "即将推出",
         warningsToast: "导入完成但有警告",
@@ -10202,10 +10201,9 @@ const designImportOverrides = {
         githubDescription:
           "Próximamente: importar pantallas y componentes directamente desde un repositorio.",
         localTitle: "App local / VS Code",
-        localDescription:
-          "Próximamente: conectar una app local en ejecución e importar pantallas con URL.",
+        localDescription: "Conecta una app local en ejecución con visual-edit.",
         visualEditGuidance:
-          "Hoy puedes pedir al agente que use visual-edit. Puede ejecutar la app, llamar a `npx @agent-native/core@latest design connect` y añadir pantallas con URL.",
+          "Inicia tu app, ejecuta el comando siguiente desde el repo de la app y luego pide al agente que use la skill visual-edit para añadir pantallas con URL.",
         useVisualEditNow: "Usar visual-edit ahora",
         comingSoon: "Próximamente",
         warningsToast: "La importación terminó con advertencias",
@@ -10248,9 +10246,9 @@ const designImportOverrides = {
           "Bientôt : importer des écrans et composants directement depuis un dépôt.",
         localTitle: "App locale / VS Code",
         localDescription:
-          "Bientôt : connecter une app locale en cours d’exécution et importer des écrans par URL.",
+          "Connectez une app locale en cours d’exécution avec visual-edit.",
         visualEditGuidance:
-          "Aujourd’hui, demandez à l’agent d’utiliser visual-edit. Il peut lancer l’app, appeler `npx @agent-native/core@latest design connect` et ajouter des écrans par URL.",
+          "Lancez votre app, exécutez la commande ci-dessous depuis le dépôt de l’app, puis demandez à l’agent d’utiliser la skill visual-edit pour ajouter des écrans par URL.",
         useVisualEditNow: "Utiliser visual-edit maintenant",
         comingSoon: "Bientôt",
         warningsToast: "Import terminé avec avertissements",
@@ -10292,10 +10290,9 @@ const designImportOverrides = {
         githubDescription:
           "Demnächst: Bildschirme und Komponenten direkt aus einem Repository importieren.",
         localTitle: "Lokale App / VS Code",
-        localDescription:
-          "Demnächst: eine laufende lokale App verbinden und URL-basierte Bildschirme importieren.",
+        localDescription: "Verbinde eine laufende lokale App mit visual-edit.",
         visualEditGuidance:
-          "Heute kannst du den Agenten bitten, visual-edit zu verwenden. Er kann die App starten, `npx @agent-native/core@latest design connect` aufrufen und URL-basierte Bildschirme hinzufügen.",
+          "Starte deine App, führe den folgenden Befehl im App-Repo aus und bitte den Agenten dann, die visual-edit-Skill zu verwenden, um URL-basierte Bildschirme hinzuzufügen.",
         useVisualEditNow: "visual-edit jetzt verwenden",
         comingSoon: "Demnächst",
         warningsToast: "Import mit Warnungen abgeschlossen",
@@ -10337,10 +10334,9 @@ const designImportOverrides = {
         githubDescription:
           "近日対応: リポジトリから画面とコンポーネントを直接インポートします。",
         localTitle: "ローカル app / VS Code",
-        localDescription:
-          "近日対応: 実行中のローカル app に接続し、URL ベースの画面をインポートします。",
+        localDescription: "visual-edit で実行中のローカル app に接続します。",
         visualEditGuidance:
-          "現在はエージェントに visual-edit の使用を依頼できます。app を起動し、`npx @agent-native/core@latest design connect` を呼び出して URL ベースの画面を追加できます。",
+          "app を起動し、app repo で下のコマンドを実行してから、エージェントに visual-edit skill で URL ベースの画面を追加するよう依頼してください。",
         useVisualEditNow: "visual-edit を今すぐ使う",
         comingSoon: "近日対応",
         warningsToast: "警告付きでインポートが完了しました",
@@ -10382,10 +10378,9 @@ const designImportOverrides = {
         githubDescription:
           "곧 제공: 저장소에서 화면과 컴포넌트를 직접 가져옵니다.",
         localTitle: "로컬 app / VS Code",
-        localDescription:
-          "곧 제공: 실행 중인 로컬 app을 연결하고 URL 기반 화면을 가져옵니다.",
+        localDescription: "visual-edit로 실행 중인 로컬 app을 연결합니다.",
         visualEditGuidance:
-          "지금은 에이전트에게 visual-edit 사용을 요청하세요. app을 실행하고 `npx @agent-native/core@latest design connect`를 호출한 뒤 URL 기반 화면을 추가할 수 있습니다.",
+          "app을 시작하고 app repo에서 아래 명령을 실행한 다음, 에이전트에게 visual-edit skill로 URL 기반 화면을 추가해 달라고 요청하세요.",
         useVisualEditNow: "지금 visual-edit 사용",
         comingSoon: "곧 제공",
         warningsToast: "경고와 함께 가져오기가 완료되었습니다",
@@ -10427,10 +10422,9 @@ const designImportOverrides = {
         githubDescription:
           "Em breve: importe telas e componentes diretamente de um repositório.",
         localTitle: "App local / VS Code",
-        localDescription:
-          "Em breve: conecte um app local em execução e importe telas por URL.",
+        localDescription: "Conecte um app local em execução com visual-edit.",
         visualEditGuidance:
-          "Hoje, peça ao agente para usar visual-edit. Ele pode executar o app, chamar `npx @agent-native/core@latest design connect` e adicionar telas por URL.",
+          "Inicie seu app, execute o comando abaixo no repo do app e depois peça ao agente para usar a skill visual-edit para adicionar telas por URL.",
         useVisualEditNow: "Usar visual-edit agora",
         comingSoon: "Em breve",
         warningsToast: "Importação concluída com avisos",
@@ -10472,10 +10466,9 @@ const designImportOverrides = {
         githubDescription:
           "जल्द आ रहा है: repository से screens और components सीधे import करें।",
         localTitle: "स्थानीय app / VS Code",
-        localDescription:
-          "जल्द आ रहा है: चल रहे local app को connect करके URL-backed screens import करें।",
+        localDescription: "चल रहे local app को visual-edit से connect करें।",
         visualEditGuidance:
-          "आज agent से visual-edit skill इस्तेमाल करने को कहें। यह app चला सकता है, `npx @agent-native/core@latest design connect` call कर सकता है, और URL-backed screens जोड़ सकता है।",
+          "अपना app शुरू करें, app repo से नीचे वाला command चलाएँ, फिर agent से visual-edit skill इस्तेमाल करके URL-backed screens जोड़ने को कहें।",
         useVisualEditNow: "अभी visual-edit इस्तेमाल करें",
         comingSoon: "जल्द आ रहा है",
         warningsToast: "Import warnings के साथ पूरा हुआ",
@@ -10516,10 +10509,9 @@ const designImportOverrides = {
         githubTitle: "GitHub",
         githubDescription: "قريبا: استيراد الشاشات والمكونات مباشرة من مستودع.",
         localTitle: "تطبيق محلي / VS Code",
-        localDescription:
-          "قريبا: توصيل تطبيق محلي قيد التشغيل واستيراد شاشات مدعومة بروابط URL.",
+        localDescription: "وصّل تطبيقا محليا قيد التشغيل باستخدام visual-edit.",
         visualEditGuidance:
-          "اليوم، اطلب من الوكيل استخدام visual-edit. يمكنه تشغيل التطبيق واستدعاء `npx @agent-native/core@latest design connect` وإضافة شاشات مدعومة بروابط URL.",
+          "شغّل التطبيق، ثم نفّذ الأمر أدناه من مستودع التطبيق، وبعدها اطلب من الوكيل استخدام مهارة visual-edit لإضافة شاشات مدعومة بروابط URL.",
         useVisualEditNow: "استخدم visual-edit الآن",
         comingSoon: "قريبا",
         warningsToast: "اكتمل الاستيراد مع تحذيرات",