Tyoudoii 插圖擷取技能
目標
- 當 tyoudoii-illust 網站因 JS 渲染而難以直接爬取時，使用其 WordPress REST API。
- 以可下載且符合頁面設計的插圖取代表情符號、文字圖示或佔位圖片。
- 若周圍佈局或卡片 UI 也需要調整，請搭配
.agent/skills/web-design/frontend-design/SKILL.md使用。
工作流程
階段 1：盤點所需的插圖
- 列出 HTML / JSX / component 內的表情符號、文字圖示、佔位圖片。
- 將每個位置所需的插圖主題轉換為關鍵字。
- 關鍵字先用語意通順的短語表示。
- 先決定下載目錄。
範例:
worry_manrobothandshake{project}/images/{project}/public/images/
階段 2：透過 WordPress REST API 搜尋
- 首先使用 REST API 尋找候選文章。
- 端點:
https://tyoudoii-illust.com/wp-json/wp/v2/posts?search={keyword}&_embed=true&per_page=5
- 從回應的
_embedded["wp:featuredmedia"][0].source_url取得縮圖 URL。 - 若無法取得縮圖 URL，則切換日文與英文關鍵字重新搜尋。
縮圖 URL 範例:
https://tyoudoii-illust.com/wp-content/uploads/2024/01/example_サムネ.png
階段 3：推導實際插圖 URL
- 將縮圖 URL 結尾的
_サムネ.png替換為_color.png以產生目標 URL。 - 首先確認是否回傳 HTTP 200。
curl -s -o /dev/null -w "%{http_code}" "{candidate_url}"
- 若
_color.png回傳 404，則依序嘗試:
_カラー.png_illust.png
- 若全部都不是 200，則回到 API 使用其他關鍵字搜尋。
階段 4：下載
- 在專案內使用語意明確的英文檔案名稱。
- 範例:
telework.pngrobot.pngsupport.png
- 下載範例:
curl -L "{url}" -o "{project}/images/{semantic_name}.png"
階段 5：嵌入 HTML 與 CSS
- 將表情符號或文字圖示替換為本機圖片。
<div class="icon-container">
<img src="images/{name}.png" alt="{描述}">
</div>
- 在卡片或特色列表中使用相同的容器尺寸。
- 圖片本身的長寬比透過
object-fit: contain處理。
.icon-container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-container img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
品質規則
- 不要執著於 WebFetch 或取得渲染後的 HTML，優先使用 REST API。
- 若無法取得縮圖 URL，請嘗試日文/英文的同義詞。
- 若
_color.png回傳 404，請同時檢查_カラー.png與_illust.png。 - 相同卡片群組中不要混用不同的圖示容器尺寸。
- 不可省略
alt屬性。 - 儲存檔案名稱需使用專案內語意明確的英文名稱。
- 商業使用時，務必確認 tyoudoii-illust.com 的最新使用條款。即使假設為免費且可商用，最終確認仍不可省略。
協調
- 若
themeisle-illustration-fetcher也是選項，請勿自動選擇，務必詢問使用者要使用哪一個。 - 若需要整體 UI 改版或區段設計，請先讀取
frontend-design，再由此技能處理圖示替換的步驟。 - 若已有現有設計，請根據其留白、卡片比例、圖片尺寸方針，僅調整
.icon-container的尺寸。
驗證
- 在新的網頁專案中呼叫此技能，從關鍵字開始進行 API 搜尋。
- 確認能夠完整執行：候選 URL 的 200 確認、PNG 下載、HTML 嵌入。
- 在瀏覽器中目視確認所有卡片圖片是否以相同尺寸整齊顯示。