@agent-native/core 0.80.0 → 0.80.1

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`।
 
@@ -360,6 +360,20 @@ rendered file के अंदर DOM/code layers edit करने के ल
 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 कर सकता

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`。
 
@@ -361,6 +361,21 @@ Design は複数画面の作業では概要を最初に使います。生成後
 イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
 画面の下に 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 はセマンティック/テ
 キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名

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`.
 
@@ -360,6 +360,19 @@ Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나
 반영합니다. 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,

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`.
 
@@ -361,6 +361,19 @@ 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

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 编辑。

package/docs/content/locales/zh-CN/template-design.mdx

@@ -338,7 +338,7 @@ UI 中的路由位于 `templates/design/app/routes/` 下：`_index.tsx`（列表
 - **设计** - `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`。
 
@@ -357,6 +357,19 @@ Design 对多屏工作采用概览优先。生成或进行大范围更新后，
 单屏模式用于滚动、与原型行为交互，以及编辑一个已渲染文件内的 DOM/代码
 层。图层面板也反映这种分工：屏幕是顶层框架，活动屏幕下嵌套 DOM/代码层。
 
+当编码代理需要在 Design 中打开正在运行的本地应用，而不是生成独立原型 HTML
+时，请安装 `/visual-edit`：
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+目标应用的开发服务器运行后，`/visual-edit` 会结合
+`npx @agent-native/core@latest design connect` 和 `add-localhost-screens`，把每个
+请求的 path 或 URL 放置为独立的 URL-backed iframe 屏幕。像
+`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 这样的编号流程
+会在 overview 模式中保持为分开的有序屏幕。
+
 为了获得稳定的图层名称，请在有意义的元素上添加
 `data-agent-native-layer-name`。Design 会优先使用它，然后才使用语义/文本回
 退，并且可以通过编辑该属性来持久保存图层重命名。Inline HTML 支持本地代

package/docs/content/locales/zh-TW/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 將 Agent-Native 應用程式打包為技能市場工件。該捆綁包可以包含代理指令、匯出的 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 編輯。

package/docs/content/locales/zh-TW/template-design.mdx

@@ -338,7 +338,7 @@ UI 中的路由位於 `templates/design/app/routes/` 下：`_index.tsx`（清單
 - **設計** - `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`。
 
@@ -358,6 +358,19 @@ Design 對多畫面工作採用概覽優先。產生或進行大範圍更新後
 式碼圖層。圖層面板也反映這種分工：畫面是頂層框架，作用中畫面下嵌套
 DOM/程式碼圖層。
 
+當編碼代理需要在 Design 中開啟正在執行的本機應用，而不是產生獨立原型 HTML
+時，請安裝 `/visual-edit`：
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+目標應用的開發伺服器執行後，`/visual-edit` 會結合
+`npx @agent-native/core@latest design connect` 和 `add-localhost-screens`，把每個
+要求的 path 或 URL 放置為獨立的 URL-backed iframe 畫面。像
+`localhost:1234/onboarding/1`、`/onboarding/2`、`/onboarding/3` 這樣的編號流程
+會在 overview 模式中保持為分開的有序畫面。
+
 若要取得穩定的圖層名稱，請在有意義的元素上加入
 `data-agent-native-layer-name`。Design 會優先使用它，然後才使用語意/文字
 後備，並且可以透過編輯該屬性來持久保存圖層重新命名。Inline HTML 支援本

package/docs/content/skills-guide.mdx

@@ -120,6 +120,10 @@ Domain skills follow the same format as framework skills. They encode patterns s
 
 App-backed skills package an agent-native app as a skill marketplace artifact. The bundle can include agent instructions, exported skills, MCP connector metadata, hosted/local launch instructions, and UI surfaces such as MCP Apps.
 
+Current app-backed skills include `visual-plan` and `visual-recap` from Plan,
+`visual-edit` from Design, `assets` from Assets, and `content` for repo-backed
+docs/blog/MDX editing.
+
 > **Full details below:** the mechanics of app-backed skills (manifest format, CLI commands, marketplace adapters, auto-update hashing) are covered in [App-backed skills — full details](#app-backed-skills-full).
 
 ## Creating custom skills {#creating-skills}
@@ -328,6 +332,7 @@ offline work, or privacy-sensitive use.
 ```bash
 # Happy path: exported instructions plus hosted MCP connector.
 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 Content docs/blog/MDX editing.

package/docs/content/template-design.mdx

@@ -338,7 +338,7 @@ Every agent-callable operation is a TypeScript file in `templates/design/actions
 - **Designs** — `create-design` (empty shell), `generate-design` (write generated HTML/JSX content), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design`, and `apply-tweaks` for persisting live tweak-knob values (accent color, density, etc.).
 - **Files** — `create-file`, `update-file`, `list-files`, `delete-file` for the files inside a design project.
 - **Design systems** — `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system`, and `analyze-brand-assets` for gathering brand data ahead of analysis.
-- **Import** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` to lift a design system out of an existing project.
+- **Import** — `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 & handoff** — `export-html`, `export-pdf`, `export-svg`, `export-zip`, and `export-coding-handoff` to turn a design into a coding-tool handoff.
 - **Context & navigation** — `view-screen` (current design, open file, view, pending question or variant grid), `get-design-snapshot` (current state for an external agent to continue from), and `navigate`.
 
@@ -361,6 +361,19 @@ editing the DOM/code layers inside one rendered file. The layers panel reflects
 that split: screens are top-level frames, with nested DOM/code layers for the
 active screen.
 
+Install `/visual-edit` when a coding agent should open a running local app in
+Design instead of generating standalone prototype HTML:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+After the target app dev server is running, `/visual-edit` uses
+`npx @agent-native/core@latest design connect` plus `add-localhost-screens` to
+place each requested path or URL as its own URL-backed iframe screen. Numbered
+flows such as `localhost:1234/onboarding/1`, `/onboarding/2`, and
+`/onboarding/3` stay as separate ordered screens in overview mode.
+
 For stable layer names, add `data-agent-native-layer-name` to meaningful
 elements. Design uses it before semantic/text fallbacks and can persist layer
 renames by editing that attribute. Inline HTML supports local code-layer edits

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.80.0",
+  "version": "0.80.1",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/templates/design/actions/import-figma-file.ts

@@ -1,166 +0,0 @@
-import { defineAction } from "@agent-native/core";
-import {
-  buildImageMap,
-  decodeFig,
-  extractDesignSystemFromFig,
-  renderHtmlTemplates,
-} from "@agent-native/core/brand-kit/fig";
-import { z } from "zod";
-
-/** Per-frame HTML is capped so the tool result stays a manageable size. The
- * agent can re-run with a smaller selection or fetch the full design via the
- * editor if it needs the complete markup. */
-const MAX_FRAMES = 24;
-const MAX_HTML_BYTES = 120 * 1024; // ~120 KB per frame
-const MAX_FIG_BYTES = 80 * 1024 * 1024; // 80 MB upload guard
-
-/** Accepts either a bare base64 string or a `data:...;base64,<payload>` URL
- * and returns the decoded bytes. */
-function decodeBase64Input(input: string): Buffer {
-  const trimmed = input.trim();
-  const comma = trimmed.indexOf(",");
-  const payload =
-    trimmed.startsWith("data:") && comma >= 0
-      ? trimmed.slice(comma + 1)
-      : trimmed;
-  return Buffer.from(payload, "base64");
-}
-
-export default defineAction({
-  description:
-    "Deeply parse an uploaded Figma `.fig` binary (modern fig-kiwi or legacy " +
-    "zip format) entirely in-process — no Figma account or MCP needed. " +
-    "Decodes the document node tree, renders each top-level frame to " +
-    "standalone HTML, and extracts a design-system token set (colors, " +
-    "typography, spacing, border radius, shadows). " +
-    "Provide the file as a base64 string or data URL in `fileBase64` (or " +
-    "`fileDataUrl`). This is read-only and writes nothing. " +
-    "WORKFLOW: (1) call this action with the .fig contents; (2) review the " +
-    "returned `designSystem` tokens and call `create-design-system` with them " +
-    "(optionally set as default); (3) review the returned `frames` and call " +
-    "`create-design` + `generate-design` with the frame HTML to import screens. " +
-    "Convert nothing yourself — the colors are already hex, effects already " +
-    "CSS, and spacing already snapped to a 4/8px scale.",
-  schema: z
-    .object({
-      fileBase64: z
-        .string()
-        .optional()
-        .describe(
-          "The .fig file contents as a base64 string (or a data: URL). " +
-            "Either fileBase64 or fileDataUrl is required.",
-        ),
-      fileDataUrl: z
-        .string()
-        .optional()
-        .describe(
-          "The .fig file as a data URL (data:application/octet-stream;base64,...). " +
-            "Alias for fileBase64.",
-        ),
-      title: z
-        .string()
-        .optional()
-        .describe("Optional title for the design being imported."),
-    })
-    .refine((v) => !!(v.fileBase64 || v.fileDataUrl), {
-      message: "Provide the .fig file in fileBase64 or fileDataUrl",
-    }),
-  readOnly: true,
-  run: async ({ fileBase64, fileDataUrl, title }) => {
-    const raw = (fileBase64 ?? fileDataUrl) as string;
-    let buffer: Buffer;
-    try {
-      buffer = decodeBase64Input(raw);
-    } catch {
-      throw new Error("Could not decode the provided base64 .fig payload.");
-    }
-    if (buffer.length === 0) {
-      throw new Error("The provided .fig payload was empty.");
-    }
-    if (buffer.length > MAX_FIG_BYTES) {
-      throw new Error(
-        `The .fig file is too large to parse in-process (${buffer.length} bytes > ${MAX_FIG_BYTES}).`,
-      );
-    }
-
-    let decoded;
-    try {
-      decoded = decodeFig(buffer);
-    } catch (err) {
-      throw new Error(
-        `Failed to decode .fig file: ${err instanceof Error ? err.message : String(err)}`,
-      );
-    }
-
-    if (!decoded.document) {
-      throw new Error(
-        "The .fig file decoded, but its document payload was empty or " +
-          "malformed (no node tree). It may be an unsupported format version.",
-      );
-    }
-
-    // Render frames. Image URLs line up with the hash-based filenames the
-    // decoder emits, so a downstream importer can attach the images under an
-    // `images/` directory if desired.
-    const imageMap = buildImageMap(decoded.images);
-    const rendered = renderHtmlTemplates(decoded.document, {
-      imageMap,
-      imageRefBase: "images",
-    });
-
-    const allFrames = rendered.frames;
-    const truncatedFrames = allFrames.slice(0, MAX_FRAMES).map((frame) => {
-      const safeName = frame.relativePath.replace(/\//g, ".");
-      let html = frame.html;
-      let truncated = false;
-      if (Buffer.byteLength(html, "utf8") > MAX_HTML_BYTES) {
-        html = html.slice(0, MAX_HTML_BYTES);
-        truncated = true;
-      }
-      return {
-        filename: safeName,
-        pageName: frame.pageName,
-        frameName: frame.frameName,
-        html,
-        ...(truncated ? { truncated: true } : {}),
-      };
-    });
-
-    const designSystem = extractDesignSystemFromFig(decoded.document);
-
-    const thumbnailDataUrl = decoded.thumbnail
-      ? `data:image/png;base64,${decoded.thumbnail.toString("base64")}`
-      : undefined;
-
-    return {
-      source: "fig-file",
-      title: title ?? null,
-      format: decoded.format,
-      version: decoded.version ?? null,
-      frames: truncatedFrames,
-      frameCount: rendered.frameCount,
-      pageCount: rendered.pageCount,
-      framesTruncated: allFrames.length > MAX_FRAMES,
-      designSystem,
-      imageCount: decoded.images.length,
-      images: decoded.images.map((img) => ({
-        filename: `${img.hash}.${img.ext}`,
-        ext: img.ext,
-        sizeBytes: img.bytes.length,
-      })),
-      thumbnailDataUrl,
-      instructions: [
-        "Parsed the .fig file in-process. Next steps:",
-        "1. Build the design system: call create-design-system using the " +
-          "`designSystem` tokens above (colors are hex, effects are CSS, " +
-          "spacing is snapped to a 4/8px scale). Set it as default if the " +
-          "user wants it applied to new designs.",
-        "2. Import screens: call create-design, then generate-design with the " +
-          "`frames` HTML (one file per frame, or the most relevant frames). " +
-          "Each frame is complete standalone HTML.",
-        "3. Image fills reference `images/<hash>.<ext>` — upload those bytes " +
-          "as design assets if you need the images to render.",
-      ].join("\n"),
-    };
-  },
-});

package/corpus/templates/slides/server/lib/fig-design-system.ts

@@ -1,110 +0,0 @@
-import type {
-  BrandKitData,
-  BrandKitDefaults,
-} from "@agent-native/core/brand-kit";
-import {
-  extractFigBrandKit,
-  looksLikeFigFile,
-  type FigBrandKitPreview,
-} from "@agent-native/core/brand-kit/fig";
-
-import type { DesignSystemData } from "../../shared/api.js";
-
-export const MAX_FIG_BYTES = 200 * 1024 * 1024;
-
-export interface SlidesFigDesignSystemResult {
-  ok: true;
-  suggestedTitle: string;
-  data: DesignSystemData;
-  customInstructions: string;
-  preview: FigBrandKitPreview;
-  format: "kiwi" | "zip";
-  version: number | null;
-}
-
-function titleFromFilename(filename: string | undefined): string {
-  return (
-    (filename || "Imported brand")
-      .replace(/\.fig$/i, "")
-      .replace(/[-_]+/g, " ")
-      .trim() || "Imported brand"
-  );
-}
-
-export function withSlidesDesignSystemDefaults(
-  partial: Partial<BrandKitData> & { defaults?: BrandKitDefaults },
-): DesignSystemData {
-  const inferredDefaults = partial.defaults;
-  const dark = inferredDefaults?.background === "dark";
-  const colors = {
-    primary: "#609FF8",
-    secondary: "#4ADE80",
-    accent: "#00E5FF",
-    background: dark ? "#000000" : "#FFFFFF",
-    surface: dark ? "#0a0a0a" : "#F8FAFC",
-    text: dark ? "#ffffff" : "#0F172A",
-    textMuted: dark ? "rgba(255,255,255,0.55)" : "#64748B",
-    ...partial.colors,
-  };
-
-  return {
-    colors,
-    typography: {
-      headingFont: "Poppins",
-      bodyFont: "Poppins",
-      headingWeight: "900",
-      bodyWeight: "400",
-      headingSizes: { h1: "64px", h2: "40px", h3: "28px" },
-      ...partial.typography,
-    },
-    spacing: {
-      slidePadding:
-        partial.spacing?.slidePadding ??
-        partial.spacing?.pagePadding ??
-        "80px 110px",
-      elementGap: partial.spacing?.elementGap ?? "20px",
-    },
-    borders: { radius: "12px", accentWidth: "4px", ...partial.borders },
-    slideDefaults: {
-      background: colors.background,
-      labelStyle: inferredDefaults?.labelStyle ?? "uppercase",
-    },
-    logos: partial.logos ?? [],
-    ...(partial.imageStyle ? { imageStyle: partial.imageStyle } : {}),
-    ...(partial.customCSS ? { customCSS: partial.customCSS } : {}),
-    ...(partial.notes ? { notes: partial.notes } : {}),
-  };
-}
-
-export function parseSlidesFigDesignSystem(args: {
-  data: Uint8Array;
-  filename?: string;
-}): SlidesFigDesignSystemResult {
-  if (args.data.length > MAX_FIG_BYTES) {
-    throw new Error(
-      `File too large (max ${Math.round(MAX_FIG_BYTES / 1024 / 1024)} MB).`,
-    );
-  }
-  if (!looksLikeFigFile(args.data)) {
-    throw new Error("That doesn't look like a Figma .fig file.");
-  }
-
-  const extracted = extractFigBrandKit(args.data);
-  const data = withSlidesDesignSystemDefaults(extracted.data);
-  if (extracted.preview.thumbnailDataUrl) {
-    data.imageStyle = {
-      referenceUrls: [extracted.preview.thumbnailDataUrl],
-      styleDescription: data.imageStyle?.styleDescription ?? "",
-    };
-  }
-
-  return {
-    ok: true,
-    suggestedTitle: titleFromFilename(args.filename),
-    data,
-    customInstructions: extracted.customInstructions,
-    preview: extracted.preview,
-    format: extracted.format,
-    version: extracted.version,
-  };
-}