finch-skin-studio 0.1.0 → 0.1.2

package/README.md

@@ -9,6 +9,7 @@ Design and manage how Finch looks — Home background and color skins — from o
 - **Extract your current skin** — already have a look you like? Save whatever is currently applied as a named custom skin, no need to remember the exact colors.
 - **6 built-in presets** — 3 light (Snow White, Mint Morning, Peach Cream) and 3 dark (Graphite, Midnight Berry, Deep Teal), ready to use immediately.
 - **Switch back to Finch's own theme** — not just custom skins: a segmented control lets you drop back to Finch's built-in Auto/Light/Dark system theme at any time.
+- **Ask the AI to design one** — a small button next to that control drops a ready-made "design me a skin" request into the Composer, so you only have to add the mood or colors you want before sending.
 - **Copy & paste skins** — copy any custom skin to the clipboard as a small JSON snippet to back it up or share it, then paste it into another Finch to add it to that library.
 - **Card gallery panel** — open the palette icon in the Composer toolbar (or the right Panel launcher) to browse every preset and custom skin as a rounded thumbnail card, switch with one click, and manage the background image — all without going through the AI.
 
@@ -16,7 +17,7 @@ Design and manage how Finch looks — Home background and color skins — from o
 
 **From chat:** just describe what you want — "把首页背景换成这张图，铺满显示" or "apply the Deep Teal skin" or "save this as 'My Sunset'" or "switch back to the system dark theme". The assistant calls the right tool and it takes effect immediately, exactly like editing Appearance Settings yourself.
 
-**From the panel:** click the palette icon in the Composer toolbar to open the Skin Studio panel. The background card lets you pick an image, toggle Fill/Tile, and adjust brightness. Above the skin gallery, a small Auto/Light/Dark control switches back to Finch's own built-in theme. The gallery itself shows built-in presets plus anything you've saved; click a card to apply it, hover a custom card to copy or delete it, click "Save current skin" to name and keep whatever's currently applied, or click "Import skin" to open a small dialog and paste a skin someone shared with you.
+**From the panel:** click the palette icon in the Composer toolbar to open the Skin Studio panel. The background card lets you pick an image, toggle Fill/Tile, and adjust brightness. Above the skin gallery, a small Auto/Light/Dark control switches back to Finch's own built-in theme, followed by two round buttons: the paintbrush drops a design request into the Composer for you to top up and send, and the clipboard next to it opens a dialog where you can paste a skin someone shared with you. The gallery itself shows built-in presets plus anything you've saved; click a card to apply it, hover a custom card to copy or delete it, or click "Save current skin" to name and keep whatever's currently applied.
 
 **Picking a background image:** click "Choose image" to open your operating system's own native file dialog — no more browsing through a Finch-themed file tree. You can also just **drag an image file and drop it onto the preview box**; that works for any image on disk regardless of where it lives. Dropped/picked images are copied into this mini tool's private storage (max 15MB), and the previous copy is cleaned up automatically once you set a new one.
 
@@ -40,6 +41,7 @@ Design and manage how Finch looks — Home background and color skins — from o
 - **提取当前皮肤** — 已经调出了满意的效果？把当前正在使用的配色保存为一个自定义皮肤，不用自己记颜色值。
 - **6 套内置预设** — 明亮 3 套（简白、薄荷晨光、蜜桃奶油）、深色 3 套（石墨深邃、深夜莓果、深海青碧），开箱即用。
 - **随时切回 Finch 自带主题** — 不只是自定义皮肤：一个分段控件可以随时切回 Finch 内置的跟随系统/浅色/深色主题。
+- **让 AI 帮你设计** — 分段控件右侧有一个小按钮，点一下就会把一句现成的"帮我设计皮肤"需求插进输入框，你只要补上想要的氛围或颜色再发送即可。
 - **复制与粘贴皮肤** — 把任意自定义皮肤复制为一小段 JSON 文本用于备份或分享，也可以把别人发来的皮肤数据粘贴进来添加到自己的皮肤库。
 - **卡片画廊面板** — 点击 Composer 工具栏的调色板图标（或右侧面板启动器）打开换肤工坊，用圆角缩略卡片浏览所有预设与自定义皮肤，一键切换，也能可视化管理背景图——全程无需经过 AI。
 
@@ -47,7 +49,7 @@ Design and manage how Finch looks — Home background and color skins — from o
 
 **在对话中：** 直接说出你想要的效果——"把首页背景换成这张图，铺满显示"、"应用深海青碧皮肤"、"把这个保存为『我的落日』"、"切回系统深色主题"，AI 会调用对应工具立即生效，效果等同于自己在外观设置里操作。
 
-**在面板中：** 点击 Composer 工具栏的调色板图标打开换肤工坊面板。背景卡片可以选图、切换铺满/平铺、调整明暗；皮肤画廊上方有一个跟随系统/浅色/深色的小控件，可以切回 Finch 自带主题。画廊本身展示内置预设和已保存的自定义皮肤，点击卡片即可应用，鼠标悬停自定义卡片可复制或删除它，点击"保存当前皮肤"即可为当前效果命名保存，点击"导入皮肤"会弹出一个小对话框，粘贴别人分享的皮肤数据即可。
+**在面板中：** 点击 Composer 工具栏的调色板图标打开换肤工坊面板。背景卡片可以选图、切换铺满/平铺、调整明暗；皮肤画廊上方有一个跟随系统/浅色/深色的小控件，可以切回 Finch 自带主题，右侧两个圆形按钮：画笔会把一句设计需求插进输入框，你补充一下再发送；旁边的剪贴板会弹出一个小对话框，粘贴别人分享的皮肤数据即可导入。画廊本身展示内置预设和已保存的自定义皮肤，点击卡片即可应用，鼠标悬停自定义卡片可复制或删除它，点击"保存当前皮肤"即可为当前效果命名保存。
 
 **选择背景图片：** 点击"选择图片"会直接打开操作系统自带的原生文件选择框，不再是 Finch 自己的文件树浏览器。你也可以直接**把一张图片拖拽到预览框里**，不管它存在磁盘上哪个位置都能用。拖放/选中的图片会被复制一份保存到本小程序的私有存储里（最大 15MB），换新图后旧的那份会自动清理掉。
 

package/dist/panel.html

@@ -71,6 +71,12 @@
   button.primary:hover { filter: brightness(1.05); }
   button.ghost { background: transparent; border-color: transparent; color: var(--ss-text-secondary); }
   button:disabled { opacity: 0.5; cursor: default; }
+  /* Inline Lucide icons (see the <symbol> sprite at the top of <body>).
+     Presentation properties inherit into <use> shadow content, so size and
+     stroke are set here once instead of on every path. */
+  .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+  .ico-sm { width: 11px; height: 11px; }
+  .ico-lg { width: 20px; height: 20px; stroke-width: 1.75; }
 
   /* ── Background section ── */
   .bg-preview {
@@ -97,6 +103,37 @@
   .seg button + button { border-left: 1px solid var(--ss-border); }
   .seg button.active { background: var(--ss-accent-dim); color: var(--ss-accent); font-weight: 600; }
   .label { color: var(--ss-text-tertiary); font-size: 12px; margin-right: 2px; }
+  .row-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
+  .icon-btn {
+    position: relative;
+    width: 28px; height: 28px; padding: 0; border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: transparent; border-color: transparent; color: var(--ss-accent);
+  }
+  .icon-btn:hover { background: var(--ss-accent-dim); }
+  /* Custom tooltip. These buttons sit against the panel's right edge, so the
+     bubble is right-aligned and grows leftwards instead of overflowing. */
+  .icon-btn::after {
+    content: attr(data-tip);
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 8px);
+    padding: 5px 9px;
+    border-radius: var(--ss-radius-sm);
+    border: 1px solid var(--ss-border);
+    background: var(--ss-bg-elevated);
+    color: var(--ss-text-primary);
+    font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: normal;
+    white-space: nowrap;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
+    opacity: 0; pointer-events: none; visibility: hidden;
+    transform: translateY(2px);
+    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
+    z-index: 20;
+  }
+  .icon-btn:hover::after, .icon-btn:focus-visible::after {
+    opacity: 1; visibility: visible; transform: translateY(0);
+  }
 
   /* ── Skin grid ── */
   .grid { display: grid; gap: 12px; }
@@ -120,6 +157,9 @@
   .thumb .pill { width: 26px; height: 8px; border-radius: 4px; margin-top: 4px; }
   .skin-name {
     padding: 8px 10px;
+    /* Reserves room for the 20px hover-revealed action buttons so showing
+       them cannot grow the card, the row, or the page. */
+    min-height: 36px;
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -132,24 +172,26 @@
     width: 18px; height: 18px; border-radius: 50%;
     background: var(--ss-accent); color: #fff;
     display: flex; align-items: center; justify-content: center;
-    font-size: 11px; line-height: 1;
   }
+  .check-badge .ico { width: 12px; height: 12px; stroke-width: 3; }
   .del-btn {
     border: none; background: rgba(0,0,0,0.55); color: #fff;
     width: 20px; height: 20px; border-radius: 50%;
     display: none; align-items: center; justify-content: center;
-    font-size: 12px; padding: 0; flex: none;
+    padding: 0; flex: none;
   }
   .skin-card:hover .del-btn { display: flex; }
   .add-card {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 6px; min-height: 116px;
+    /* Matches a skin card exactly (2px border + 84px thumb + 36px name row)
+       so the dashed box is the same size even when it sits alone in a row. */
+    gap: 6px; min-height: 122px;
     color: var(--ss-text-tertiary);
     border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-lg);
     background: transparent; cursor: pointer; padding: 0;
   }
-  .add-card .add-icon { font-size: 20px; line-height: 1; }
   .add-card .add-label { font-size: 12px; text-align: center; }
+  #btn-pick, #btn-clear { display: inline-flex; align-items: center; gap: 6px; }
   .add-card:hover { color: var(--ss-accent); border-color: var(--ss-accent); background: var(--ss-bg-hover); }
   .skin-actions { display: flex; gap: 4px; flex: none; }
 
@@ -164,6 +206,53 @@
 </style>
 </head>
 <body>
+  <!-- Inline Lucide sprite (lucide-static v1.44.0, ISC). The panel is a
+       packaged offline page, so the paths are embedded rather than fetched
+       from a CDN. Sizing/stroke come from the .ico class. -->
+  <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+    <symbol id="i-copy" viewBox="0 0 24 24">
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </symbol>
+    <symbol id="i-trash" viewBox="0 0 24 24">
+      <path d="M10 11v6" />
+      <path d="M14 11v6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M3 6h18" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </symbol>
+    <symbol id="i-plus" viewBox="0 0 24 24">
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </symbol>
+    <symbol id="i-paste" viewBox="0 0 24 24">
+      <path d="M11 14h10" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v1.344" />
+      <path d="m17 18 4-4-4-4" />
+      <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" />
+      <rect x="8" y="2" width="8" height="4" rx="1" />
+    </symbol>
+    <symbol id="i-paintbrush" viewBox="0 0 24 24">
+      <path d="m14.622 17.897-10.68-2.913" />
+      <path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z" />
+      <path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15" />
+    </symbol>
+    <symbol id="i-check" viewBox="0 0 24 24">
+      <path d="M20 6 9 17l-5-5" />
+    </symbol>
+    <symbol id="i-x" viewBox="0 0 24 24">
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </symbol>
+    <symbol id="i-image-plus" viewBox="0 0 24 24">
+      <path d="M16 5h6" />
+      <path d="M19 2v6" />
+      <path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5" />
+      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+      <circle cx="9" cy="9" r="2" />
+    </symbol>
+  </svg>
+
   <h1 id="t-title">Skin Studio</h1>
 
   <section class="card" id="bg-card">
@@ -177,8 +266,14 @@
     </div>
     <input type="file" id="bg-file-input" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" style="display:none" />
     <div class="row">
-      <button class="primary" id="btn-pick" type="button">＋ <span id="t-choose">Choose image</span></button>
-      <button class="ghost" id="btn-clear" type="button" disabled><span id="t-clear">Clear</span></button>
+      <button class="primary" id="btn-pick" type="button">
+        <svg class="ico" aria-hidden="true"><use href="#i-image-plus"></use></svg>
+        <span id="t-choose">Choose image</span>
+      </button>
+      <button class="ghost" id="btn-clear" type="button" disabled>
+        <svg class="ico" aria-hidden="true"><use href="#i-x"></use></svg>
+        <span id="t-clear">Clear</span>
+      </button>
     </div>
     <div class="row">
       <span class="label" id="t-placement">Placement</span>
@@ -210,6 +305,16 @@
         <button data-value="light" id="t-sys-light">Light</button>
         <button data-value="dark" id="t-sys-dark">Dark</button>
       </div>
+      <div class="row-actions">
+        <button class="icon-btn" id="btn-ai-theme" type="button"
+                aria-label="Design a skin with AI" data-tip="Design a skin with AI">
+          <svg class="ico" aria-hidden="true"><use href="#i-paintbrush"></use></svg>
+        </button>
+        <button class="icon-btn" id="btn-import-skin" type="button"
+                aria-label="Import a shared skin" data-tip="Import a shared skin">
+          <svg class="ico" aria-hidden="true"><use href="#i-paste"></use></svg>
+        </button>
+      </div>
     </div>
     <div class="grid" id="skins-grid"></div>
   </section>

package/dist/panel.js

@@ -17,9 +17,15 @@
       dropInvalidType: 'Please choose a supported image file (PNG / JPEG / WebP / GIF / AVIF).',
       dropTooLarge: 'Image is too large (max 15MB).',
       systemTheme: 'System Appearance', sysAuto: 'Auto', sysLight: 'Light', sysDark: 'Dark',
-      exportSkin: 'Copy', importCard: 'Import skin',
+      exportSkin: 'Copy', importSkin: 'Import a shared skin',
       importInvalid: 'This file is not a valid skin export.',
       skinCopied: 'Skin copied to clipboard',
+      aiTheme: 'Design a skin with AI',
+      aiThemeChip: 'Design a new color skin for me',
+      aiThemePrompt:
+        'Help me design a new Finch color skin. Propose a palette that fits the mood I describe below, '
+        + 'then apply it with skin_studio_theme and save it to my custom skins. Mood / keywords: ',
+      aiThemeUnavailable: 'No chat input here — open a chat or a Space first.',
     },
     'zh-CN': {
       title: '换肤工坊', bgHeading: '首页背景', bgEmpty: '尚未设置背景图',
@@ -34,9 +40,15 @@
       dropInvalidType: '请选择支持的图片格式（PNG / JPEG / WebP / GIF / AVIF）。',
       dropTooLarge: '图片过大（最多 15MB）。',
       systemTheme: '系统外观', sysAuto: '跟随系统', sysLight: '浅色', sysDark: '深色',
-      exportSkin: '复制', importCard: '导入皮肤',
+      exportSkin: '复制', importSkin: '导入别人分享的皮肤',
       importInvalid: '这不是有效的皮肤导出文件。',
       skinCopied: '皮肤已复制到剪贴板',
+      aiTheme: '让 AI 设计皮肤',
+      aiThemeChip: '帮我设计一套新的配色皮肤',
+      aiThemePrompt:
+        '帮我设计一套新的 Finch 配色皮肤。先根据我下面描述的氛围给出配色方案，'
+        + '再用 skin_studio_theme 应用并保存到我的自定义皮肤库。风格关键词：',
+      aiThemeUnavailable: '当前场景没有可用的输入框，请先打开一个对话或空间。',
     },
   };
   DICT['zh-HK'] = DICT['zh-CN'];
@@ -60,6 +72,15 @@
     document.getElementById('t-sys-auto').textContent = t('sysAuto');
     document.getElementById('t-sys-light').textContent = t('sysLight');
     document.getElementById('t-sys-dark').textContent = t('sysDark');
+    // The row's icon buttons carry no visible text. The label feeds both the
+    // accessible name and the CSS tooltip (data-tip -> .icon-btn::after);
+    // no native `title`, so the two never show at once.
+    [['btn-ai-theme', 'aiTheme'], ['btn-import-skin', 'importSkin']].forEach(function (pair) {
+      var el = document.getElementById(pair[0]);
+      var label = t(pair[1]);
+      el.setAttribute('aria-label', label);
+      el.setAttribute('data-tip', label);
+    });
   }
 
   // ── Color helpers ─────────────────────────────────────────────────────
@@ -101,6 +122,26 @@
     return thumb;
   }
 
+  // ── Icons ─────────────────────────────────────────────────────────────
+  // References one of the inline Lucide <symbol>s in panel.html.
+  var SVG_NS = 'http://www.w3.org/2000/svg';
+  function makeIcon(symbolId, extraClass) {
+    var svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'ico' + (extraClass ? ' ' + extraClass : ''));
+    svg.setAttribute('aria-hidden', 'true');
+    var use = document.createElementNS(SVG_NS, 'use');
+    use.setAttribute('href', '#' + symbolId);
+    svg.appendChild(use);
+    return svg;
+  }
+
+  function makeLabel(text) {
+    var span = document.createElement('span');
+    span.className = 'add-label';
+    span.textContent = text;
+    return span;
+  }
+
   // ── State ─────────────────────────────────────────────────────────────
   var state = {
     builtin: [], custom: [], background: { placement: 'fill', tone: 'balanced' },
@@ -181,7 +222,7 @@
       var exp = document.createElement('button');
       exp.className = 'del-btn';
       exp.type = 'button';
-      exp.textContent = '⧉';
+      exp.appendChild(makeIcon('i-copy', 'ico-sm'));
       exp.title = t('exportSkin');
       exp.addEventListener('click', function (ev) {
         ev.stopPropagation();
@@ -190,7 +231,7 @@
       var del = document.createElement('button');
       del.className = 'del-btn';
       del.type = 'button';
-      del.textContent = '✕';
+      del.appendChild(makeIcon('i-trash', 'ico-sm'));
       del.title = t('deleteConfirm');
       del.addEventListener('click', function (ev) {
         ev.stopPropagation();
@@ -204,7 +245,7 @@
     if (active) {
       var badge = document.createElement('div');
       badge.className = 'check-badge';
-      badge.textContent = '✓';
+      badge.appendChild(makeIcon('i-check'));
       card.appendChild(badge);
     }
     card.addEventListener('click', function () {
@@ -274,19 +315,12 @@
     var addCard = document.createElement('button');
     addCard.type = 'button';
     addCard.className = 'add-card';
-    addCard.innerHTML = '<span class="add-icon">＋</span><span class="add-label">' + t('addCard') + '</span>';
+    addCard.appendChild(makeIcon('i-plus', 'ico-lg'));
+    addCard.appendChild(makeLabel(t('addCard')));
     addCard.addEventListener('click', function () {
       api.postMessage({ type: 'requestSaveCurrent' });
     });
     grid.appendChild(addCard);
-    var importCard = document.createElement('button');
-    importCard.type = 'button';
-    importCard.className = 'add-card';
-    importCard.innerHTML = '<span class="add-icon">⇪</span><span class="add-label">' + t('importCard') + '</span>';
-    importCard.addEventListener('click', function () {
-      api.postMessage({ type: 'requestImportSkin' });
-    });
-    grid.appendChild(importCard);
     computeColumns();
   }
 
@@ -311,6 +345,9 @@
   document.getElementById('btn-clear').addEventListener('click', function () {
     api.postMessage({ type: 'clearBackground' });
   });
+  document.getElementById('btn-import-skin').addEventListener('click', function () {
+    api.postMessage({ type: 'requestImportSkin' });
+  });
   document.getElementById('seg-placement').addEventListener('click', function (ev) {
     var btn = ev.target.closest('button[data-value]');
     if (!btn) return;
@@ -327,6 +364,25 @@
     api.postMessage({ type: 'setSystemTheme', theme: btn.getAttribute('data-value') });
   });
 
+  // Drops a guiding prompt into the Composer draft as a removable annotation
+  // chip, so the user can add their own mood keywords and hit send. This is
+  // the only Composer-writing API a Panel page gets (`ctx.composerActions`'
+  // `composer.fill()` only exists inside a toolbar-button handler), it needs a
+  // real user gesture like this click, and it never sends the message itself.
+  document.getElementById('btn-ai-theme').addEventListener('click', function () {
+    var composer = api.composer;
+    if (!composer || typeof composer.addContexts !== 'function') {
+      showToast(t('aiThemeUnavailable'));
+      return;
+    }
+    composer
+      .addContexts([{ type: 'annotation', label: t('aiThemeChip'), promptText: t('aiThemePrompt') }])
+      .catch(function () {
+        // Rejects on container / no-draft scopes.
+        showToast(t('aiThemeUnavailable'));
+      });
+  });
+
   // ── Background image upload (native file dialog + drag & drop) ────────
   var MAX_DROPPED_IMAGE_BYTES = 15 * 1024 * 1024; // 15 MB, mirrors the backend limit
   var IMAGE_TYPE_RE = /^image\/(png|jpeg|jpg|webp|gif|avif)$/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "finch-skin-studio",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Design Finch skins and Home backgrounds: pick a background image and tiling, save AI-designed or current color schemes as custom skins, and switch between built-in and custom skins from a card gallery.",
   "author": {
     "name": "PuterJam",
@@ -35,6 +35,7 @@
   },
   "finch": {
     "manifestVersion": 1,
+    "minVersion": "1.6.3",
     "name": "Skin Studio",
     "description": "Set the Home background image and tiling, save AI-designed or current color schemes as custom skins, and switch skins from a card gallery.",
     "systemPrompt": "Skin Studio manages Finch's visual appearance.\nUse skin_studio_theme to design/apply/save/remove color skins:\n- action=list: list built-in presets and the user's saved custom skins.\n- action=apply: apply a skin. Pass id to apply a built-in preset or a saved custom skin. To design and apply a brand-new AI-generated skin in one step, omit id and pass name+base+colors instead (colors is a partial AppearanceCustomTheme color map: bgRoot,bgMain,bgSidebar,bgElevated,bgHover,bgActive,textPrimary,textSecondary,textTertiary,accent,accentDim,border); add save:true to also persist it into the user's custom skin library in the same call. To switch back to Finch's own built-in theme instead of a custom color skin, pass systemTheme ('system'|'light'|'dark') and omit id/name/colors.\n- action=save: persist a skin into the custom library. Pass name+base+colors to save a specific AI-designed palette, or omit colors to save the most recently applied skin (\"extract current skin\") under a new name.\n- action=remove: delete a custom skin by id (built-in presets cannot be removed).\nUse skin_studio_background to change the Home background:\n- action=set: requires an absolute local image path (imagePath), optional placement ('fill'|'tile', default 'fill') and tone ('brightest'|'bright'|'balanced'|'dark'|'darkest').\n- action=clear: remove the Home background and revert to the plain theme surface.\nBoth tools take effect immediately, exactly like the user editing Appearance Settings themselves. The user can also open the Skin Studio panel (palette icon in the Composer toolbar, or the right Panel launcher) to browse skins as cards, switch back to Finch's own system light/dark/auto theme, manage the background (including choosing a file via the OS's native picker or dragging one in), and copy/paste custom skins between libraries — all without going through the AI.",