前言¶

在 Ardot 裏做界面設計時，標題、按鈕文案、多語言或運營改字都會讓文本長度變化。若約束和自動佈局沒跟上，常見結果是文字溢出容器、被截斷，或相鄰區塊擠壓塌陷。手工逐個調約束費時，也容易漏掉極端文案。

下面介紹社區 Skill layout-adaptation（座標 @user_5d52b855/layout-adaptation）。它面向「設計稿自動佈局 + 文本變化時佈局仍正確」這一類問題，由 SkillHub 上的 騰訊設計 Ardot作者（發佈者 ID：user_5d52b855）維護，當前版本 1.0.0，分類爲 design-media，來源爲 community。SkillHub 頁面標註 requires_api_key=false，安裝與使用不依賴額外 API Key。

這是什麼¶

layout-adaptation 的定位是：在 Ardot 上對設計稿做響應式佈局適配，使文本內容變化時佈局能正確響應，減少溢出、截斷、塌陷等問題。

它運行在支持 Agent Skills 的編碼助手側（如 Cursor、Claude Code 等），通過 Skill 中的指引讓 AI 按 Ardot 佈局與文本適配的慣例協助改稿，而不是替代 Ardot 本身的設計工具。

核心功能¶

依據 SkillHub 官方簡介，可覈實的能力包括：

1. 響應式佈局適配：針對 Ardot 設計稿調整佈局策略，使結構在內容變化時仍能自洽。
2. 文本變化聯動：文案變長、變短或換行時，約束與排版隨之調整，降低溢出與截斷風險。
3. 佈局穩定性：在文本驅動的高度、寬度變化下，儘量避免相鄰元素塌陷或錯位。

頁面未單獨列出子命令或配置文件名；具體步驟以安裝後 Skill 包內的 SKILL.md 爲準。

安裝與啓用¶

安裝流程遵循 SkillHub 安裝說明。先確認本機是否已有 skillhub CLI：

command -v skillhub && skillhub --version

若未安裝，可使用官方腳本（完整安裝含 CLI 與默認 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

僅安裝 CLI 時：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

安裝 layout-adaptation 時，必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認會裝到 ./skills/，Agent 可能無法加載。常用路徑如下（以你實際使用的客戶端爲準）：

安裝命令示例（將 <skills 目錄> 換成上表對應路徑）：

skillhub install @user_5d52b855/layout-adaptation --dir <skills 目錄>

SkillHub 技能頁也支持將下面提示交給 AI，由助手按安裝文檔完成安裝：

請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_5d52b855/layout-adaptation`。

安裝完成後，按所用客戶端要求重啓或重新加載 Agent，使新 Skill 生效。

典型用法¶

公開資料未提供逐步截圖或固定對話模板。可復現的入口是：

1. 按上一節將 @user_5d52b855/layout-adaptation 裝入當前 Agent 的 skills 目錄。
2. 在 Ardot 中打開需要適配的設計稿，在 Agent 對話中說明目標（例如：某模塊文案加長後避免溢出、多語言場景下保持對齊等）。
3. 讓 Agent 依據 Skill 指引給出約束調整、自動佈局或檢查建議，並在 Ardot 中落地修改。

描述問題時儘量寫清：哪一層/哪幾個文本節點、預期最大文案長度或語言、當前出現的溢出/截斷/塌陷現象，便於 Skill 約束下的回答更貼設計稿上下文。

適用場景與注意¶

適合誰

• 在 Ardot 上交付界面稿，且文案會頻繁變更或多語言的設計、前端協作同學。
• 希望用 Agent 統一檢查「文本變長後佈局是否仍成立」，減少手工試錯。

使用注意

• Skill 面向 Ardot 工作流；其他設計工具是否適用，官方未說明，不宜默認等同。
• 社區來源（community），版本 1.0.0；升級可用 skillhub 在對應 skills 目錄下管理，具體以 SkillHub 文檔爲準。
• SkillHub 統計（以技能頁爲準）：評分 100000，下載 2661 次；數據會隨時間更新，引用時以頁面實時顯示爲準。
• 複雜品牌規範或動效佈局，仍建議人工在 Ardot 中做最終驗收。

結尾¶

layout-adaptation 把「文本一變、佈局就歪」這類重複勞動收斂到 Skill 指引裏，適合在 Ardot 設計稿階段與 Agent 配合做響應式文本佈局適配。安裝與詳情見 SkillHub：

• 技能頁：https://www.skillhub.cn/skills/user_5d52b855/layout-adaptation
• API 座標頁：https://api.skillhub.cn/user_5d52b855/layout-adaptation