@agent-native/core 0.79.27 → 0.80.1

package/docs/content/locales/es-ES/template-design.mdx

@@ -338,7 +338,7 @@ Cada operación invocable por el agente es un archivo TypeScript en `templates/d
 - **Diseños**: `create-design` (cáscara vacía), `generate-design` (contenido de HTML/JSX generado por escritura), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` y `apply-tweaks` para conservar los valores de las perillas de ajuste en vivo (color de acento, densidad, etc.).
 - **Archivos**: `create-file`, `update-file`, `list-files`, `delete-file` para los archivos dentro de un proyecto de diseño.
 - **Sistemas de diseño**: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` y `analyze-brand-assets` para recopilar datos de marca antes del análisis.
-- **Importar**: `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) y `import-design-project` para sacar un sistema de diseño de un proyecto existente.
+- **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportación y transferencia**: `export-html`, `export-pdf`, `export-svg`, `export-zip` y `export-coding-handoff` para convertir un diseño en una transferencia de herramienta de codificación.
 - **Contexto y navegación**: `view-screen` (diseño actual, archivo abierto, vista, pregunta pendiente o cuadrícula de variantes), `get-design-snapshot` (estado actual desde el cual un agente externo puede continuar) y `navigate`.
 
@@ -348,6 +348,70 @@ El agente siempre sabe lo que tienes abierto. `view-screen` devuelve el diseño
 
 Debido a que un diseño son solo archivos HTML/JSX independientes, el agente edita la misma fuente que representa el iframe y de donde proviene cada exportación; no hay un formato de "maqueta de IA" independiente para traducir. Un sistema de diseño vinculado proporciona tokens y `custom_instructions` el agente honra en cada paso de generación. Seleccione texto o una región en la vista previa y presione Cmd+I para enfocar al agente exactamente en esa parte.
 
+### Modelo del editor
+
+Design prioriza la vista general para el trabajo con varias pantallas. Después
+de generar o aplicar actualizaciones amplias, el editor abre la vista general de
+pantallas: un lienzo infinito donde cada pantalla es un marco estático que se
+puede seleccionar, mover, redimensionar, soltar o duplicar. Usa el botón de vista completa del marco cuando una pantalla necesite
+desplazamiento enfocado o interacción de prototipo.
+
+El modo de una sola pantalla sirve para desplazarse, interactuar con el
+comportamiento del prototipo y editar las capas DOM/código dentro de un archivo
+renderizado. El panel de capas refleja esa división: las pantallas son marcos de
+nivel superior, con capas DOM/código anidadas para la pantalla activa.
+
+Instala `/visual-edit` cuando un agente de código deba abrir una app local en
+ejecución dentro de Design en lugar de generar HTML de prototipo independiente:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Después de que el servidor dev de la app objetivo esté corriendo, `/visual-edit`
+usa `npx @agent-native/core@latest design connect` más `add-localhost-screens`
+para colocar cada ruta o URL solicitada como su propia pantalla iframe respaldada
+por URL. Los flujos numerados como `localhost:1234/onboarding/1`,
+`/onboarding/2` y `/onboarding/3` se mantienen como pantallas separadas y
+ordenadas en modo de vista general.
+
+Para nombres de capa estables, agrega `data-agent-native-layer-name` a los
+elementos importantes. Design lo usa antes de los respaldos semánticos/de texto
+y puede persistir cambios de nombre editando ese atributo. HTML inline admite
+ediciones locales de capas de código para texto, clases, estilos, atributos,
+orden del código fuente y pequeños cambios estructurales; las ediciones visuales
+de capas de código solo admiten HTML por ahora. El modo de fuente localhost
+puede registrar y resolver artboards de rutas locales, pero las lecturas y
+escrituras de archivos locales siguen siendo un contrato de puente hasta que se
+endurezcan los controles explícitos de permisos.
+
+### Extensiones del editor de Design
+
+El editor incluye una pestaña de inspector **Extensions** después de
+**Tweaks**. Funciona como un carril de plugins específico de Design: los
+usuarios pueden hacer clic en **+ Extension** para pedirle al agente que cree
+una extensión, o instalar una extensión que declare el slot
+`design.editor.inspector`.
+
+Las extensiones de Design se renderizan en línea junto al artboard mediante el
+sandbox estándar de extensiones. El host pasa actualizaciones de
+`window.slotContext` y `window.onSlotContext(...)` con el `designId` actual, el
+archivo activo, la lista de pantallas, los ids de pantalla seleccionados, los
+metadatos del elemento seleccionado, el modo de vista, el zoom, la herramienta
+activa y los valores de tweaks. Eso permite que una extensión muestre
+información sobre la selección actual, ofrezca controles de estilo o construya
+flujos compactos alrededor del diseño abierto.
+
+Para trabajo determinista, las extensiones pueden llamar acciones de la app a
+través del puente de extensiones. Para cambios impulsados por IA, haz que la
+extensión llame `agentNative.chat.send(...)` con el selector/id de origen del
+elemento seleccionado y el cambio solicitado. El agente debe llamar primero
+`view-screen`, luego usar `apply-visual-edit` para cambios de estilo, clase,
+texto o movimiento de elementos, o `update-design` / `generate-design` con
+`canvasFrames` para cambios de colocación del artboard. Consulta
+[Extensions](/docs/extensions#what-an-extension-can-do) para el sandbox, el
+estado persistente y las APIs del puente.
+
 ### Personalizarlo
 
 El diseño es una plantilla completa y clonable. Algunas ideas prácticas de extensión:

package/docs/content/locales/fr-FR/skills-guide.mdx

@@ -118,6 +118,10 @@ Le domaine skills suit le même format que le framework skills. Ils codent des m
 
 ## skills soutenu par une application {#app-backed-skills}
 
+Les skills basées sur des apps incluent aujourd'hui `visual-plan` et
+`visual-recap` depuis Plan, `visual-edit` depuis Design, `assets` depuis Assets
+et `content` pour l'édition docs/blog/MDX depuis le dépôt.
+
 skills basé sur une application regroupe une application native d'agent en tant qu'artefact de marché de compétences. L'ensemble peut inclure des instructions d'agent, des métadonnées de connecteur skills exportées et MCP, des instructions de lancement hébergées/locales et des surfaces UI telles que les applications MCP.
 
 > **Tous les détails ci-dessous :** les mécanismes du skills basé sur l'application (format du manifeste, commandes CLI, adaptateurs de marché, hachage de mise à jour automatique) sont couverts dans [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ travail hors ligne ou utilisation sensible à la confidentialité.
 ```bash
 # Chemin heureux : instructions exportées et connecteur MCP hébergé.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Édition docs/blog/MDX avec Content, d'abord dans le dépôt.

package/docs/content/locales/fr-FR/template-design.mdx

@@ -338,7 +338,7 @@ Chaque opération appelable par un agent est un fichier TypeScript dans `templat
 - **Designs** — `create-design` (coque vide), `generate-design` (contenu HTML/JSX généré par écriture), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` et `apply-tweaks` pour conserver les valeurs du bouton de réglage en direct (couleur d'accent, densité, etc.).
 - **Fichiers** — `create-file`, `update-file`, `list-files`, `delete-file` pour les fichiers contenus dans un projet de conception.
 - **Systèmes de conception** : `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` et `analyze-brand-assets` pour collecter des données de marque avant l'analyse.
-- **Importer** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) et `import-design-project` pour extraire un système de conception d'un projet existant.
+- **Importer** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportation et transfert** : `export-html`, `export-pdf`, `export-svg`, `export-zip` et `export-coding-handoff` pour transformer une conception en transfert d'outil de codage.
 - **Contexte et navigation** – `view-screen` (conception actuelle, fichier ouvert, vue, question en attente ou grille de variantes), `get-design-snapshot` (état actuel à partir duquel un agent externe peut continuer) et `navigate`.
 
@@ -348,6 +348,69 @@ L'agent sait toujours ce que vous avez ouvert. La conception actuelle, le fichie
 
 Étant donné qu'une conception n'est constituée que de fichiers HTML/JSX autonomes, l'agent édite la même source que celle du rendu iframe et celle d'où provient chaque exportation : il n'existe pas de format de « maquette IA » distinct à traduire. Un système de conception lié fournit des jetons et `custom_instructions` que l'agent honore à chaque passage de génération. Sélectionnez du texte ou une région dans l'aperçu et appuyez sur Cmd+I pour concentrer l'agent exactement sur cette partie.
 
+### Modèle d'éditeur
+
+Design privilégie la vue d'ensemble pour le travail multi-écran. Après une
+génération ou une mise à jour large, l'éditeur ouvre la vue d'ensemble des
+écrans : un canevas infini où chaque écran est un cadre statique que vous pouvez
+sélectionner, déplacer, redimensionner, déposer ou dupliquer. Utilisez le bouton de vue complète du cadre lorsqu’un écran nécessite un
+défilement ciblé ou une interaction de prototype.
+
+Le mode écran unique sert à faire défiler, interagir avec le comportement du
+prototype et modifier les couches DOM/code dans un fichier rendu. Le panneau des
+couches reflète cette séparation : les écrans sont des cadres de niveau
+supérieur, avec les couches DOM/code imbriquées pour l'écran actif.
+
+Installez `/visual-edit` lorsqu'un agent de code doit ouvrir une app locale en
+cours d'exécution dans Design au lieu de générer du HTML de prototype autonome :
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Une fois le serveur dev de l'app cible lancé, `/visual-edit` utilise
+`npx @agent-native/core@latest design connect` avec `add-localhost-screens` pour
+placer chaque chemin ou URL demandé comme son propre écran iframe adossé à une
+URL. Les flows numérotés comme `localhost:1234/onboarding/1`,
+`/onboarding/2` et `/onboarding/3` restent des écrans séparés et ordonnés en
+mode overview.
+
+Pour des noms de couche stables, ajoutez `data-agent-native-layer-name` aux
+éléments importants. Design l'utilise avant les replis sémantiques/textuels et
+peut persister les renommages en modifiant cet attribut. Le HTML inline prend en
+charge les modifications locales de couches de code pour le texte, les classes,
+les styles, les attributs, l'ordre source et les petits changements structurels;
+les modifications visuelles de couches de code sont uniquement HTML aujourd'hui.
+Le mode source localhost peut enregistrer et résoudre des artboards de routes
+locales, mais les lectures/écritures de fichiers locaux restent un contrat de
+pont jusqu'au durcissement des contrôles d'autorisation explicites.
+
+### Extensions de l'éditeur Design
+
+L'éditeur inclut un onglet d'inspecteur **Extensions** après **Tweaks**. Il
+fonctionne comme une piste de plugins propre à Design : les utilisateurs peuvent
+cliquer sur **+ Extension** pour demander à l'agent de créer une extension, ou
+installer une extension qui déclare le slot `design.editor.inspector`.
+
+Les extensions Design s'affichent en ligne à côté de l'artboard via le bac à
+sable standard des extensions. L'hôte transmet les mises à jour
+`window.slotContext` et `window.onSlotContext(...)` avec le `designId` actuel,
+le fichier actif, la liste des écrans, les ids d'écran sélectionnés, les
+métadonnées de l'élément sélectionné, le mode d'affichage, le zoom, l'outil
+actif et les valeurs de tweaks. Cela permet à une extension d'afficher des
+informations sur la sélection actuelle, d'offrir des contrôles de style ou de
+créer des workflows compacts autour du design ouvert.
+
+Pour un travail déterministe, les extensions peuvent appeler les actions de
+l'app via le pont d'extension. Pour les changements pilotés par l'IA,
+l'extension doit appeler `agentNative.chat.send(...)` avec le sélecteur/id source
+de l'élément sélectionné et la modification demandée. L'agent doit d'abord
+appeler `view-screen`, puis utiliser `apply-visual-edit` pour les changements de
+style, classe, texte ou déplacement d'élément, ou `update-design` /
+`generate-design` avec `canvasFrames` pour les changements de placement de
+l'artboard. Consultez [Extensions](/docs/extensions#what-an-extension-can-do)
+pour le bac à sable, l'état persistant et les APIs du pont.
+
 ### Le personnaliser
 
 Design est un modèle complet et clonable. Quelques idées d'extension pratiques :

package/docs/content/locales/hi-IN/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills, `.agents/skills/<name>/SKILL.md` पर लाइव है और इ
 
 ## ऐप-समर्थित skills {#app-backed-skills}
 
+मौजूदा app-backed skills में Plan के `visual-plan` और `visual-recap`, Design का
+`visual-edit`, Assets का `assets`, और repo-backed docs/blog/MDX editing के लिए
+`content` शामिल हैं.
+
 ऐप-समर्थित skills एक कौशल बाज़ार आर्टिफैक्ट के रूप में एक एजेंट-मूल ऐप को पैकेज करता है। बंडल में एजेंट निर्देश, निर्यातित skills, MCP कनेक्टर मेटाडेटा, होस्टेड/स्थानीय लॉन्च निर्देश और UI सतह जैसे MCP ऐप्स शामिल हो सकते हैं।
 
 > **पूर्ण विवरण नीचे:** ऐप-समर्थित skills (प्रकट प्रारूप, CLI कमांड, मार्केटप्लेस एडाप्टर, ऑटो-अपडेट हैशिंग) के यांत्रिकी [App-backed skills — full details](#app-backed-skills-full) में शामिल हैं।
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # शुभ पथ: निर्यात किए गए निर्देश और होस्ट किए गए MCP कनेक्टर।
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # रेपो-प्रथम Content docs/blog/MDX संपादन।

package/docs/content/locales/hi-IN/template-design.mdx

@@ -338,7 +338,7 @@ UI में रूट `templates/design/app/routes/` के अंतर्ग
 - **डिज़ाइन** - `create-design` (खाली शेल), `generate-design` (लाइव बनाए रखने के लिए HTML/JSX सामग्री लिखें), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design`, और `apply-tweaks` ट्विक-नॉब मान (उच्चारण रंग, घनत्व, आदि)।
 - **फ़ाइलें** - एक डिज़ाइन प्रोजेक्ट के अंदर फ़ाइलों के लिए `create-file`, `update-file`, `list-files`, `delete-file`।
 - **डिज़ाइन सिस्टम** - विश्लेषण से पहले ब्रांड डेटा इकट्ठा करने के लिए `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system`, और `analyze-brand-assets`।
-- **आयात** - `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), और `import-design-project` किसी मौजूदा प्रोजेक्ट से डिज़ाइन सिस्टम को हटाने के लिए।
+- **आयात** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **निर्यात और हैंडऑफ़** - किसी डिज़ाइन को कोडिंग-टूल हैंडऑफ़ में बदलने के लिए `export-html`, `export-pdf`, `export-svg`, `export-zip`, और `export-coding-handoff`।
 - **संदर्भ और नेविगेशन** - `view-screen` (वर्तमान डिज़ाइन, खुली फ़ाइल, दृश्य, लंबित प्रश्न या भिन्न ग्रिड), `get-design-snapshot` (बाहरी एजेंट के लिए वर्तमान स्थिति जारी रखने के लिए), और `navigate`।
 
@@ -348,6 +348,64 @@ UI में रूट `templates/design/app/routes/` के अंतर्ग
 
 क्योंकि एक डिज़ाइन केवल स्टैंडअलोन HTML/JSX फ़ाइलें है, एजेंट उसी स्रोत को संपादित करता है जो iframe प्रस्तुत करता है और प्रत्येक निर्यात आता है - अनुवाद करने के लिए कोई अलग "AI मॉकअप" प्रारूप नहीं है। एक लिंक्ड डिज़ाइन सिस्टम टोकन की आपूर्ति करता है और एजेंट हर जेनरेशन पास पर `custom_instructions` का सम्मान करता है। पूर्वावलोकन में टेक्स्ट या एक क्षेत्र का चयन करें और एजेंट को ठीक उसी हिस्से पर केंद्रित करने के लिए Cmd+I दबाएं।
 
+### संपादक मॉडल
+
+कई स्क्रीन वाले काम के लिए Design पहले overview खोलता है। generation या बड़े
+updates के बाद editor screen overview खोलता है: एक infinite canvas जहां हर
+screen एक static frame है जिसे select, move, resize, drop या duplicate किया जा
+सकता है। जब किसी screen को focused scrolling या prototype interaction चाहिए, तो frame के full-view button का उपयोग करें।
+
+Single-screen mode scrolling, prototype behavior से interact करने, और एक
+rendered file के अंदर DOM/code layers edit करने के लिए है। Layers panel यही
+model दिखाता है: screens top-level frames हैं, और active screen के नीचे nested
+DOM/code layers होते हैं।
+
+जब coding agent को standalone prototype HTML बनाने के बजाय running local app को
+Design में खोलना हो, तब `/visual-edit` install करें:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Target app dev server चलने के बाद, `/visual-edit`
+`npx @agent-native/core@latest design connect` और `add-localhost-screens` का
+उपयोग करके हर requested path या URL को अपने URL-backed iframe screen के रूप में
+place करता है। `localhost:1234/onboarding/1`, `/onboarding/2`, और
+`/onboarding/3` जैसे numbered flows overview mode में separate ordered screens
+रहते हैं।
+
+Stable layer names के लिए meaningful elements पर
+`data-agent-native-layer-name` जोड़ें। Design semantic/text fallbacks से पहले
+इसे उपयोग करता है और इसी attribute को edit करके layer renames persist कर सकता
+है। Inline HTML text, classes, styles, attributes, source order, और छोटे
+structural changes के लिए local code-layer edits support करता है; visual
+code-layer edits आज केवल HTML files के लिए हैं। Localhost source mode local
+route artboards register और resolve कर सकता है, लेकिन local file reads/writes
+explicit permission controls harden होने तक bridge contract ही हैं।
+
+### Design संपादक एक्सटेंशन
+
+संपादक में **Tweaks** के बाद एक **Extensions** इंस्पेक्टर टैब शामिल है। यह
+Design-विशिष्ट plugin lane की तरह काम करता है: उपयोगकर्ता **+ Extension** पर
+क्लिक करके एजेंट से एक्सटेंशन बनवा सकते हैं, या ऐसा एक्सटेंशन इंस्टॉल कर सकते
+हैं जो `design.editor.inspector` slot घोषित करता है।
+
+Design एक्सटेंशन मानक extension sandbox के माध्यम से artboard के बगल में inline
+render होते हैं। host `window.slotContext` और `window.onSlotContext(...)`
+updates में वर्तमान `designId`, सक्रिय फ़ाइल, screen list, selected screen ids,
+selected element metadata, view mode, zoom, active tool, और tweak values भेजता
+है। इससे एक्सटेंशन वर्तमान selection की जानकारी दिखा सकता है, style controls
+दे सकता है, या खुले design के आसपास compact workflows बना सकता है।
+
+Deterministic काम के लिए, एक्सटेंशन extension bridge के माध्यम से app actions
+कॉल कर सकते हैं। AI-driven बदलावों के लिए, एक्सटेंशन से
+`agentNative.chat.send(...)` कॉल करवाएं जिसमें selected element selector/source
+id और मांगा गया बदलाव शामिल हो। एजेंट को पहले `view-screen` कॉल करना चाहिए,
+फिर element style, class, text, या move changes के लिए `apply-visual-edit`, या
+artboard placement changes के लिए `canvasFrames` के साथ `update-design` /
+`generate-design` का उपयोग करना चाहिए। sandbox, persistent state, और bridge
+APIs के लिए [Extensions](/docs/extensions#what-an-extension-can-do) देखें।
+
 ### इसे अनुकूलित करना
 
 डिज़ाइन एक पूर्ण, क्लोन करने योग्य टेम्पलेट है। कुछ व्यावहारिक विस्तार विचार:

package/docs/content/locales/ja-JP/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills は `.agents/skills/<name>/SKILL.md` にあり、エージェント向け
 
 ## アプリベースの skills {#app-backed-skills}
 
+現在の app-backed skills には、Plan の `visual-plan` と `visual-recap`、
+Design の `visual-edit`、Assets の `assets`、repo-backed docs/blog/MDX
+編集用の `content` があります。
+
 アプリベースの skills は、エージェント ネイティブ アプリをスキル マーケットプレイス アーティファクトとしてパッケージ化します。バンドルには、エージェントの指示、エクスポートされた skills、MCP コネクタ メタデータ、ホスト/ローカルの起動指示、MCP アプリなどの UI サーフェスを含めることができます。
 
 > **詳細は以下の通り:** アプリベースの skills の仕組み (マニフェスト形式、CLI コマンド、マーケットプレイス アダプター、自動更新ハッシュ) は、[App-backed skills — full details](#app-backed-skills-full) で説明されています。
@@ -328,6 +332,7 @@ Hosted はデフォルトのインストール パスです。ローカル起動
 ```bash
 # ハッピー パス: エクスポートされた命令とホストされた MCP コネクタ。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # リポジトリ優先コンテンツ docs/blog/MDX 編集。

package/docs/content/locales/ja-JP/template-design.mdx

@@ -340,7 +340,7 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 - **デザイン** — `create-design` (空のシェル)、`generate-design` (生成された HTML/JSX コンテンツを書き込む)、`update-design`、`get-design`、`list-designs`、`duplicate-design`、`delete-design`、および `apply-tweaks` (ライブ永続化用)ノブの値を調整します (アクセントカラー、濃度など)。
 - **ファイル** — 設計プロジェクト内のファイルの `create-file`、`update-file`、`list-files`、`delete-file`。
 - **デザイン システム** — 分析に先立ってブランド データを収集するための `create-design-system`、`update-design-system`、`get-design-system`、`list-design-systems`、`delete-design-system`、`set-default-design-system`、および `analyze-brand-assets`。
-- **インポート** — `import-code`、`import-figma`、`import-github`、`import-from-url`、`import-document` (DOCX/PPTX/PDF/XLSX)、および `import-design-project` を使用して、既存のプロジェクトからデザイン システムを取り出します。
+- **インポート** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **エクスポートとハンドオフ** — デザインをコーディング ツールのハンドオフに変換するための `export-html`、`export-pdf`、`export-svg`、`export-zip`、および `export-coding-handoff`。
 - **コンテキストとナビゲーション** — `view-screen` (現在のデザイン、開いているファイル、ビュー、保留中の質問またはバリアント グリッド)、`get-design-snapshot` (外部エージェントが続行する現在の状態)、および `navigate`。
 
@@ -350,6 +350,67 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 
 デザインは単なるスタンドアロンの HTML/JSX ファイルであるため、エージェントは iframe がレンダリングし、すべてのエクスポート元と同じソースを編集します。変換する個別の「AI モックアップ」形式はありません。リンクされた設計システムはトークンと `custom_instructions` を提供し、エージェントは世代パスごとにそれを尊重します。プレビューでテキストまたは領域を選択し、Cmd+I を押して、エージェントをその部分に正確に集中させます。
 
+### エディターモデル
+
+Design は複数画面の作業では概要を最初に使います。生成後または大きな更
+新後、エディターは画面概要を開きます。これは無限キャンバスで、各画面は
+選択、移動、リサイズ、ドロップ、複製できる静的フレームです。集中スクロールやプロトタイプ操作が必要な画面では、フレームのフルビューボタンを使用します。
+
+単一画面モードは、スクロール、プロトタイプ動作とのインタラクション、1
+つのレンダリング済みファイル内の DOM/コードレイヤー編集に使います。レ
+イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
+画面の下に DOM/コードレイヤーがネストされます。
+
+コーディングエージェントがスタンドアロンのプロトタイプ HTML を生成する
+代わりに、実行中のローカルアプリを Design で開く必要がある場合は
+`/visual-edit` をインストールします。
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+対象アプリの dev server が起動したら、`/visual-edit` は
+`npx @agent-native/core@latest design connect` と `add-localhost-screens` を
+使い、要求された各 path または URL を URL ベースの iframe 画面として配置
+します。`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3`
+のような番号付きフローは、overview mode で個別の順序付き画面として保持
+されます。
+
+安定したレイヤー名には、意味のある要素に
+`data-agent-native-layer-name` を追加します。Design はセマンティック/テ
+キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名
+変更を永続化できます。Inline HTML は、テキスト、class、style、attribute、
+ソース順、小さな構造変更のローカルコードレイヤー編集をサポートします。
+ビジュアルコードレイヤー編集は現在 HTML のみです。Localhost source mode
+はローカル route artboard を登録・解決できますが、ローカルファイルの読
+み書きは明示的な権限制御が強化されるまで bridge contract のままです。
+
+### Design エディター拡張機能
+
+エディターには **Tweaks** の後に **Extensions** インスペクタータブがあり
+ます。これは Design 専用のプラグインレーンのように機能します。ユーザー
+は **+ Extension** をクリックしてエージェントに拡張機能を作成させるか、
+`design.editor.inspector` スロットを宣言する拡張機能をインストールできま
+す。
+
+Design 拡張機能は、標準の拡張機能サンドボックスを通じてアートボードの
+横にインライン表示されます。ホストは `window.slotContext` と
+`window.onSlotContext(...)` の更新として、現在の `designId`、アクティブ
+なファイル、画面一覧、選択中の画面 ID、選択中の要素メタデータ、表示モー
+ド、ズーム、アクティブツール、tweak 値を渡します。これにより、拡張機能
+は現在の選択に関する情報を表示したり、スタイル操作を提供したり、開いて
+いるデザインの周辺に小さなワークフローを構築したりできます。
+
+決定的な処理では、拡張機能は拡張機能ブリッジ経由で app actions を呼び
+出せます。AI 主導の変更では、選択中の要素 selector/source id と要求され
+た変更を含めて `agentNative.chat.send(...)` を呼び出すようにします。エー
+ジェントはまず `view-screen` を呼び出し、要素の style、class、text、move
+変更には `apply-visual-edit` を、アートボード配置の変更には `canvasFrames`
+付きの `update-design` / `generate-design` を使うべきです。サンドボックス、
+永続状態、ブリッジ API については
+[Extensions](/docs/extensions#what-an-extension-can-do) を参照してくださ
+い。
+
 ### カスタマイズ
 
 デザインは完全な複製可能なテンプレートです。いくつかの実践的な拡張アイデア:

package/docs/content/locales/ko-KR/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills는 `.agents/skills/<name>/SKILL.md`에 거주하며 상담원을 위한
 
 ## 앱 지원 skills {#app-backed-skills}
 
+현재 app-backed skills에는 Plan의 `visual-plan`과 `visual-recap`, Design의
+`visual-edit`, Assets의 `assets`, repo-backed docs/blog/MDX editing을 위한
+`content`가 포함됩니다.
+
 앱 지원 skills는 에이전트 기반 앱을 스킬 마켓플레이스 아티팩트로 패키지합니다. 번들에는 에이전트 지침, 내보낸 skills, MCP 커넥터 메타데이터, 호스팅/로컬 실행 지침 및 MCP 앱과 같은 UI 표면이 포함될 수 있습니다.
 
 > **아래 전체 세부정보:** 앱 지원 skills의 메커니즘(매니페스트 형식, CLI 명령, 마켓플레이스 어댑터, 자동 업데이트 해싱)은 [App-backed skills — full details](#app-backed-skills-full)에서 다룹니다.
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # 해피 경로: 내보낸 지침과 호스팅된 MCP 커넥터.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Repo-first 콘텐츠 docs/blog/MDX 편집.

package/docs/content/locales/ko-KR/template-design.mdx

@@ -338,7 +338,7 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 - **설계** — `create-design`(빈 셸), `generate-design`(생성된 HTML/JSX 콘텐츠 쓰기), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` 및 `apply-tweaks` - 실시간 조정 손잡이 값 유지 (악센트 색상, 밀도 등).
 - **파일** — 디자인 프로젝트 내부 파일의 경우 `create-file`, `update-file`, `list-files`, `delete-file`.
 - **디자인 시스템** — 분석에 앞서 브랜드 데이터를 수집하기 위한 `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` 및 `analyze-brand-assets`.
-- **가져오기** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) 및 `import-design-project`는 기존 프로젝트에서 디자인 시스템을 끌어올립니다.
+- **가져오기** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **내보내기 및 핸드오프** — `export-html`, `export-pdf`, `export-svg`, `export-zip` 및 `export-coding-handoff` - 설계를 코딩 도구 핸드오프로 전환합니다.
 - **컨텍스트 및 탐색** — `view-screen`(현재 디자인, 열린 파일, 보기, 보류 중인 질문 또는 변형 그리드), `get-design-snapshot`(계속할 외부 에이전트의 현재 상태) 및 `navigate`.
 
@@ -348,6 +348,63 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 
 디자인은 독립형 HTML/JSX 파일이므로 에이전트는 iframe이 렌더링하고 모든 내보내기가 시작되는 동일한 소스를 편집합니다. 번역할 별도의 "AI 모형" 형식은 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다. 미리보기에서 텍스트나 영역을 선택하고 Cmd+I를 눌러 상담사가 정확히 해당 부분에 집중하도록 합니다.
 
+### 편집기 모델
+
+Design은 여러 화면 작업에서 overview를 우선합니다. 생성 또는 넓은 업데이트
+후 편집기는 screen overview를 엽니다. 이곳은 각 화면이 선택, 이동, 크기 조정,
+드롭, 복제 가능한 정적 frame으로 배치되는 infinite canvas입니다. frame을 두
+번 클릭하면 단일 화면에 집중합니다.
+
+Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나의 렌더링된
+파일 안의 DOM/code layers 편집에 사용합니다. Layers panel도 같은 구조를
+반영합니다. screens는 top-level frames이고, active screen 아래에 nested
+DOM/code layers가 표시됩니다.
+
+코딩 에이전트가 독립형 prototype HTML을 생성하는 대신 실행 중인 로컬 앱을
+Design에서 열어야 할 때 `/visual-edit`를 설치하세요:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+대상 앱 dev server가 실행된 뒤 `/visual-edit`는
+`npx @agent-native/core@latest design connect`와 `add-localhost-screens`를
+사용해 요청된 각 path 또는 URL을 URL-backed iframe screen으로 배치합니다.
+`localhost:1234/onboarding/1`, `/onboarding/2`, `/onboarding/3` 같은 번호가
+붙은 흐름은 overview mode에서 분리된 순서 있는 화면으로 유지됩니다.
+
+안정적인 layer name을 위해 의미 있는 요소에 `data-agent-native-layer-name`을
+추가하세요. Design은 semantic/text fallback보다 이것을 먼저 사용하며, 해당
+attribute를 편집해 layer rename을 persist할 수 있습니다. Inline HTML은 text,
+classes, styles, attributes, source order, 작은 structural changes에 대한 local
+code-layer edits를 지원합니다. visual code-layer edits는 현재 HTML-only입니다.
+Localhost source mode는 local route artboards를 register/resolve할 수 있지만,
+local file reads/writes는 explicit permission controls가 harden될 때까지 bridge
+contract로 남아 있습니다.
+
+### Design 편집기 확장
+
+편집기에는 **Tweaks** 뒤에 **Extensions** 검사기 탭이 있습니다. Design 전용
+플러그인 레인처럼 작동합니다. 사용자는 **+ Extension**을 클릭해 에이전트에게
+확장을 만들게 하거나 `design.editor.inspector` 슬롯을 선언한 확장을 설치할
+수 있습니다.
+
+Design 확장은 표준 확장 sandbox를 통해 artboard 옆에 inline으로 렌더링됩니다.
+호스트는 현재 `designId`, 활성 파일, 화면 목록, 선택된 화면 id, 선택된 요소
+메타데이터, 보기 모드, zoom, 활성 도구, tweak 값을 `window.slotContext`와
+`window.onSlotContext(...)` 업데이트로 전달합니다. 이를 통해 확장은 현재
+selection 정보를 표시하고, 스타일 컨트롤을 제공하거나, 열린 디자인 주변의
+작은 워크플로를 만들 수 있습니다.
+
+결정적인 작업의 경우 확장은 extension bridge를 통해 app actions를 호출할 수
+있습니다. AI 기반 변경의 경우 선택된 요소 selector/source id와 요청한 변경을
+담아 `agentNative.chat.send(...)`를 호출하게 하세요. 에이전트는 먼저
+`view-screen`을 호출한 다음 요소 style, class, text, move 변경에는
+`apply-visual-edit`를, artboard placement 변경에는 `canvasFrames`와 함께
+`update-design` / `generate-design`를 사용해야 합니다. sandbox, persistent
+state, bridge APIs는 [Extensions](/docs/extensions#what-an-extension-can-do)를
+참조하세요.
+
 ### 맞춤 설정
 
 디자인은 완전하고 복제 가능한 템플릿입니다. 실용적인 확장 아이디어:

package/docs/content/locales/pt-BR/skills-guide.mdx

@@ -118,6 +118,10 @@ O domínio skills segue o mesmo formato do framework skills. Eles codificam padr
 
 ## skills com suporte de aplicativo {#app-backed-skills}
 
+As skills com suporte de app atuais incluem `visual-plan` e `visual-recap` do
+Plan, `visual-edit` do Design, `assets` do Assets e `content` para editar
+docs/blog/MDX a partir do repositório.
+
 O skills apoiado por aplicativo empacota um aplicativo nativo do agente como um artefato do mercado de habilidades. O pacote pode incluir instruções do agente, metadados exportados do conector skills, MCP, instruções de inicialização hospedadas/locais e superfícies UI, como aplicativos MCP.
 
 > **Detalhes completos abaixo:** a mecânica do skills baseado em aplicativo (formato de manifesto, comandos CLI, adaptadores de mercado, hash de atualização automática) é abordada em [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ trabalho off-line ou uso sensível à privacidade.
 ```bash
 # Caminho feliz: instruções exportadas mais conector MCP hospedado.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Edição de Content docs/blog/MDX com repo como fonte primária.

package/docs/content/locales/pt-BR/template-design.mdx

@@ -338,7 +338,7 @@ Cada operação que pode ser chamada pelo agente é um arquivo TypeScript em `te
 - **Designs** — `create-design` (shell vazio), `generate-design` (gravação de conteúdo HTML/JSX gerado), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` e `apply-tweaks` para valores de botão de ajuste ao vivo persistentes (cor de destaque, densidade, etc.).
 - **Arquivos** — `create-file`, `update-file`, `list-files`, `delete-file` para os arquivos dentro de um projeto de design.
 - **Sistemas de design** — `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` e `analyze-brand-assets` para coletar dados da marca antes da análise.
-- **Importar** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) e `import-design-project` para extrair um sistema de design de um projeto existente.
+- **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportação e transferência** — `export-html`, `export-pdf`, `export-svg`, `export-zip` e `export-coding-handoff` para transformar um design em uma transferência de ferramenta de codificação.
 - **Contexto e navegação** — `view-screen` (design atual, arquivo aberto, visualização, pergunta pendente ou grade de variantes), `get-design-snapshot` (estado atual para um agente externo continuar) e `navigate`.
 
@@ -348,6 +348,67 @@ O agente sempre sabe o que você tem em aberto. O design atual, o arquivo aberto
 
 Como um design consiste apenas em arquivos HTML/JSX independentes, o agente edita a mesma fonte que o iframe renderiza e de onde vem cada exportação — não há um formato de "maquete de IA" separado para traduzir. Um sistema de design vinculado fornece tokens e `custom_instructions` que o agente homenageia em cada passagem de geração. Selecione o texto ou uma região na visualização e pressione Cmd+I para focar o agente exatamente nessa parte.
 
+### Modelo do editor
+
+Design prioriza a visão geral para trabalhos com várias telas. Depois da
+geração ou de atualizações amplas, o editor abre a visão geral de telas: uma
+tela infinita onde cada tela é um frame estático que pode ser selecionado,
+movido, redimensionado, solto ou duplicado. Use o botão de visualização completa
+do frame quando uma tela precisar de rolagem focada ou interação de protótipo.
+
+O modo de tela única serve para rolar, interagir com o comportamento do
+protótipo e editar as camadas DOM/código dentro de um arquivo renderizado. O
+painel de camadas reflete essa divisão: telas são frames de nível superior, com
+camadas DOM/código aninhadas para a tela ativa.
+
+Instale `/visual-edit` quando um agente de código precisar abrir um app local em
+execução no Design em vez de gerar HTML de protótipo independente:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Depois que o dev server do app alvo estiver rodando, `/visual-edit` usa
+`npx @agent-native/core@latest design connect` junto com `add-localhost-screens`
+para posicionar cada path ou URL solicitado como sua própria tela iframe baseada
+em URL. Fluxos numerados como `localhost:1234/onboarding/1`, `/onboarding/2` e
+`/onboarding/3` permanecem como telas separadas e ordenadas no modo overview.
+
+Para nomes de camada estáveis, adicione `data-agent-native-layer-name` a
+elementos importantes. O Design usa isso antes de fallbacks semânticos/de texto
+e pode persistir renomeações editando esse atributo. HTML inline aceita edições
+locais de camadas de código para texto, classes, estilos, atributos, ordem do
+código-fonte e pequenas mudanças estruturais; edições visuais de camadas de
+código são somente HTML hoje. O modo de fonte localhost pode registrar e
+resolver artboards de rotas locais, mas leituras/escritas de arquivos locais
+continuam sendo um contrato de bridge até que controles explícitos de permissão
+sejam fortalecidos.
+
+### Extensões do editor de Design
+
+O editor inclui uma aba de inspetor **Extensions** depois de **Tweaks**. Ela
+funciona como uma faixa de plugins específica do Design: os usuários podem
+clicar em **+ Extension** para pedir ao agente que crie uma extensão, ou
+instalar uma extensão que declare o slot `design.editor.inspector`.
+
+As extensões do Design são renderizadas inline ao lado do artboard pelo sandbox
+padrão de extensões. O host passa atualizações de `window.slotContext` e
+`window.onSlotContext(...)` com o `designId` atual, arquivo ativo, lista de
+telas, ids de telas selecionadas, metadados do elemento selecionado, modo de
+visualização, zoom, ferramenta ativa e valores de tweaks. Isso permite que uma
+extensão mostre informações sobre a seleção atual, ofereça controles de estilo
+ou crie fluxos compactos ao redor do design aberto.
+
+Para trabalho determinístico, as extensões podem chamar ações do app pelo
+bridge de extensões. Para mudanças guiadas por IA, faça a extensão chamar
+`agentNative.chat.send(...)` com o seletor/id de origem do elemento selecionado
+e a mudança solicitada. O agente deve chamar `view-screen` primeiro e depois
+usar `apply-visual-edit` para mudanças de estilo, classe, texto ou movimento de
+elementos, ou `update-design` / `generate-design` com `canvasFrames` para
+mudanças de posicionamento do artboard. Veja
+[Extensions](/docs/extensions#what-an-extension-can-do) para o sandbox, estado
+persistente e APIs do bridge.
+
 ### Personalizando
 
 Design é um modelo completo e clonável. Algumas ideias práticas de extensão:

package/docs/content/locales/zh-CN/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills 位于 `.agents/skills/<name>/SKILL.md`，包含针对代理的详细指
 
 ## 应用程序支持的 skills {#app-backed-skills}
 
+当前应用支持的 skills 包括 Plan 的 `visual-plan` 和 `visual-recap`、Design
+的 `visual-edit`、Assets 的 `assets`，以及用于仓库内 docs/blog/MDX 编辑的
+`content`。
+
 应用程序支持的 skills 将代理本机应用程序打包为技能市场工件。该捆绑包可以包含代理指令、导出的 skills、MCP 连接器元数据、托管/本地启动指令和 UI 表面（例如 MCP 应用程序）。
 
 > **完整详细信息如下：** [App-backed skills — full details](#app-backed-skills-full) 中介绍了应用程序支持的 skills 的机制（清单格式、CLI 命令、市场适配器、自动更新哈希）。
@@ -328,6 +332,7 @@ Hosted 是默认安装路径。本地启动是明确的定制，
 ```bash
 # 愉快的路径：导出的指令加上托管的 MCP 连接器。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # 回购优先内容 docs/blog/MDX 编辑。