Shoma-DS/团队-信息

Tyoudoii 插画获取技能

目标

• 当因JS渲染导致网站本身难以抓取时，使用 tyoudoii-illust WordPress REST API。
• 将表情符号、文本图标或占位图替换为可下载的、符合页面设计的插画。
• 当周围布局或卡片UI也需要清理时，将此技能与 .agent/skills/web-design/frontend-design/SKILL.md 配合使用。

工作流程

第一阶段：梳理所需插画

1. 列出 HTML / JSX / 组件中的表情符号、文本图标和占位图片。
2. 为每个位置所需的插画主题提炼关键词。
3. 关键词先用含义通顺的短语表示。
4. 预先确定下载目录。

示例：

• worry_man
• robot
• handshake
• {project}/images/
• {project}/public/images/

第二阶段：通过 WordPress REST API 搜索

1. 首先使用 REST API 查找候选文章。
2. 端点：

https://tyoudoii-illust.com/wp-json/wp/v2/posts?search={keyword}&_embed=true&per_page=5

3. 从响应中的 _embedded["wp:featuredmedia"][0].source_url 获取缩略图 URL。
4. 如果无法获取缩略图 URL，则切换日语和英语关键词重新搜索。

缩略图 URL 示例：

https://tyoudoii-illust.com/wp-content/uploads/2024/01/example_サムネ.png

第三阶段：推导实际插画 URL

1. 将缩略图 URL 末尾的 _サムネ.png 替换为 _color.png 生成目标 URL。
2. 首先检查是否返回 HTTP 200。

curl -s -o /dev/null -w "%{http_code}" "{candidate_url}"

3. 如果 _color.png 返回 404，则依次尝试：

• _カラー.png
• _illust.png

4. 如果所有变体都未返回 200，则返回使用其他关键词进行 API 搜索。

第四阶段：下载

1. 为项目内的文件指定有语义的英文名称。
2. 示例：

• telework.png
• robot.png
• support.png

3. 下载示例：

curl -L "{url}" -o "{project}/images/{semantic_name}.png"

第五阶段：集成到 HTML 和 CSS

1. 将表情符号或文本图标替换为本地图片。

<div class="icon-container">
  <img src="images/{name}.png" alt="{描述}">
</div>

2. 在卡片或功能列表中，对所有图标使用相同的容器尺寸。
3. 图片本身的宽高比通过 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 的尺寸。

验证

1. 在新 Web 项目中调用此技能，从关键词开始 API 搜索。
2. 验证候选 URL 的 200 响应、PNG 下载以及 HTML 集成步骤是否全部完成。
3. 在浏览器中目视检查所有卡片图片是否以相同尺寸整齐显示。