模版萃取师

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

接收用户收集的素材(PPT/图片/网页),解析提取配色/字体/字号/版式等风格维度,沉淀为带 frontmatter 的 Markdown 风格档案(JSON 兼容、纯文本可读),并在后续产出时自动套用指定或默认风格。支持多风格组合与相似度归类。无需 Obsidian 等任何第三方笔记软件即可使用。

一句话选型结论

按资料字段整理

模版萃取师是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_586d5737/style-extract
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_586d5737仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791625121
正文体量9.2 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
模版萃取师当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

9.2 KB
模型实际读到的说明书原文,来自技能仓库

模版萃取师 (style-extract)

一、何时使用本技能

触发场景(满足任一即激活):
1. 用户发送素材(PPT/PPTX/图片/网页 HTML 或 URL)并要求"解析风格""沉淀模版""收进我的风格库"。
2. 用户产出指令含"参考 xx 风格""按 xx 模版""用默认风格"。
3. 用户提到"模版萃取师""style-extract""风格档案""我的模版库"。

二、仓库位置(通用引擎,不绑定用户路径)

  • 技能本身不含用户实际风格档案,是通用引擎。
  • 运行期通过读取 INDEX.md 定位仓库根(INDEX 中标注 repo_root)。首次使用时若未配置,询问用户仓库路径(默认建议 style-extract/,可放任意工作区)。
  • 无需任何第三方笔记软件:风格档案是普通 Markdown 文件(带 YAML frontmatter),AI 用内置解析器读取,人用任意文本编辑器/VSCode/文件管理器查看即可。Obsidian 只是可选的增强查看器(见文末附注),不装也能完整使用本技能。
  • 目录结构(两层:格式→风格):
    <repo>/ INDEX.md # 总索引 + default 标记 + 风格清单 _template.md # 新建风格字段模板 00-源素材/PPT|图片|网页/ # 原始素材(带前缀命名) 01-PPT风格/<风格名>/<风格名>.md 02-图片风格/<风格名>/<风格名>.md 03-网页风格/<风格名>/<风格名>.md tools/ # parse_ppt.py / parse_web.py / extract_img.py / similarity.py

三、核心流程

A. 解析并沉淀新风格

  1. 接收素材:用户发来文件/URL → 复制到 00-源素材/<格式>/<建议名>-源.<ext>(批量时先全部复制)。
    - 内容去重:复制/下载前对文件做 MD5 比对,若目录内已存在内容完全相同的文件(同图被文章多处引用、或重跑抓取),只保留 1 份,不新增重复。tools/fetch_wechat_imgs.py 已内置此逻辑(_dup_path);手动复制也须先比对。

A0. 从链接/网页扒图(用户给的是文章 URL 而非图片文件时)

当用户发来网页链接/文章 URL(如微信公众号、知乎、博客)并要求解析其中图片风格时,先扒图再解析:
- 微信公众号文章(mp.weixin.qq.com):
- 用 tools/fetch_wechat_imgs.py <文章URL> [前缀] 抓取。原理:
1. urllib 模拟浏览器 UA + Referer 绕过基础反爬;
2. 关键:微信正文图不在 data-src/src 属性,而藏在 JS 数据的 cdn_url / ori_url 字段里,脚本专门解析这两个字段提取 mmbiz.qpic.cn 链接(这是微信的坑,直接抓 <img> 只能拿到头像);
3. 下载时按内容 MD5 去重(_dup_path),同图被多处引用只落 1 份;
4. 落盘到 00-源素材/图片/<前缀>-<月日>-NN-源.<ext>。
- 抓取后过滤噪声小图:边长 < 300px 的头像/图标/二维码直接排除,只留正文大图。
- 视觉去重提示:文章常拆成多张纵向长图切片,同文同模板导致版式雷同、但内容各不同——只删 MD5 完全相同者,版式雷同不删(避免丢信息)。在每个文章图组目录写 README.md 标注此规则。
- 普通网页/博客:用 tools/parse_web.py &lt;url&gt; 直接解析页面 CSS 提取配色/字体;若需扒页内图片,可用等同逻辑(requests/urllib 抓 HTML → 解析 &lt;img src&gt;/CSS 背景图 → 下载)。
- 扒图完成后,对每张正文图跑 extract_img.py 解析,再走 A 流程沉淀。

  1. 跑解析脚本(必须用真实代码,不靠猜):
    - PPT → python tools/parse_ppt.py &lt;file&gt;
    - 网页 → python tools/parse_web.py &lt;file|url&gt;
    - 图片 → python tools/extract_img.py &lt;file&gt;
    解析输出结构化 JSON(配色/字体/字号/版式/标签)。
  2. 建议命名:根据 type + 核心特征(主色/字体/标签)建议中文风格名,批量时一次性给出所有建议名+摘要。
  3. 询问确认(一次性,不逐个打扰):展示"建议名 + 提取摘要 + 源文件落位",请用户确认/修改名字。重名自动加 -2。
  4. 相似度比对:对新风格跑 tools/similarity.py,阈值 0.75:
    - ≥0.75 → 提示"是否归类到【xx】并加相似链接"(档案独立,不污染原风格)
    - <0.75 → 提示"是否新建独立风格"
    - 仅用户明确说"并入"才合并字段。
  5. 落盘:按 _template.md 写 0X-&lt;格式&gt;风格/&lt;风格名&gt;/&lt;风格名&gt;.md,frontmatter 填解析值;图片字体若 pending 且无同源 PPT 推断,填楷体默认(fonts.fallback: [&quot;楷体&quot;,&quot;KaiTi&quot;,&quot;serif&quot;],title/body 留空标 pending)。
  6. 更新 INDEX.md:在对应格式清单追加 - &lt;风格名&gt; · 标签 · default?(纯列表写法,任意编辑器可读);若是第一套且未指定 default,标记 default: true 并询问用户(选项含"调整路径"入口)。
  7. 回读校验:读取刚写的 md,确认 frontmatter 与解析一致。

B. 后续产出套用风格

  1. 加载:读 INDEX.md 获 default 与全部风格;用户指定"参考 xx"则加载 0X-*/&lt;xx&gt;/&lt;xx&gt;.md。
  2. 多风格组合:用户用 + 连接(如 科技蓝+极简页);优先级由用户指定(如"以科技蓝为主,加极简页元素");冲突字段按用户指定优先级裁决;首次组合询问是否存为永久组合风格(记 INDEX 组合区)。
  3. 未指定风格:加载 default 风格。
  4. 产出前自检清单(逐项对照 frontmatter,漏项即补):
    - [ ] 配色:primary/secondary/bg/text 是否取自档案
    - [ ] 字体:title/body 是否一致(pending 用楷体)
    - [ ] 字号层级:title/subtitle/body/caption/gap 是否匹配
    - [ ] 圆角/间距:radius/gap 是否达标
    - [ ] 版式:cover_style/content_grid/has_footer 是否遵循
  5. 交付:产出内容(PPT/网页/图片/文档),并说明"已套用【xx】风格,维度对照见上"。

四、冲突与边界

  • 绝不自动覆盖已有风格;归类/新建/并入/组合全部用户确认。
  • 图片字体无法提取 → pending + 默认楷体,用户可在任意编辑器打开 &lt;风格名&gt;.md 改 frontmatter 补全。
  • 解析值存真实提取结果,不臆造;拿不到的字段留空而非编造。
  • 用户资产留本地仓库;skill 通用,不指向特定用户路径。

五、工具依赖

  • Python 3 + Pillow(图片取色)。PPT/网页/相似度仅用标准库。
  • 解析脚本位于仓库 tools/,AI 调用前先确认 python 可用。

六、可选增强:Obsidian 用户额外能力(非必需)

本技能不依赖 Obsidian。若你恰好使用 Obsidian,把仓库作为库打开可额外获得:图谱视图(风格间"相似"关系以双链呈现)、Dataview 自动汇总、快捷跳转。实现:风格档案"关联"小节写 [[相似风格名]](非 Obsidian 用户看到的是普通中括号文本,功能不受影响)。未装 Obsidian 的用户忽略本节约即可,所有功能照常。

七、常见问题 FAQ

Q1 说"模版萃取师"/发素材后没反应?
技能未启用或未触发。先确认已安装启用;对话中直接说"解析这张图的风格"或"模版萃取师"即可激活。仍无效则检查触发词配置。

Q2 图片风格字体显示楷体?
图片文件不含字体元数据,无法提取字体名,按约定默认楷体(fonts.fallback)。要换实际字体:编辑 &lt;风格名&gt;.md 的 frontmatter,把 fonts.title/fonts.body 填上字体名(如 &quot;微软雅黑&quot;)即可。

Q3 相似度 0.75 怎么来的,能调吗?
经验阈值:调高更保守(多建独立风格、少归类),调低更聚合(易归类)。修改 tools/similarity.py 顶部 THRESHOLD 常量后重跑即可。

Q4 微信图只抓到头像/抓不到?
微信正文图不在 &lt;img src&gt;,藏在 JS 的 cdn_url/ori_url,脚本已专门解析。若仍抓不到,多为付费/强防盗链文章,改走普通网页用 parse_web.py 解析页面 CSS。

Q5 风格档案存哪,能换路径吗?
存于你首次指定的仓库根(INDEX.md 标注 repo_root)。换路径:改 INDEX 里 repo_root,或重新导入时指定新目录。

Q6 解析配色偏色/字体识别不准?
图片取色受背景与压缩影响;PPT 字体以 theme 为准、特殊字体需人工确认。均可直接在 frontmatter 手动修正 colors.primary/secondary、fonts.*,档案以你改的为准。

Q7 批量导入重名/重复图怎么处理?
重名自动加 -2;内容完全相同(MD5)只留 1 张;版式雷同不删(避免丢信息),仅标注来源。

Q8 不用 Obsidian 能完整用吗?
能。档案是普通 Markdown 文件,AI 用内置解析器读取,任意文本编辑器/文件管理器可看,不绑定任何笔记软件。

常见问题

5 问
答案由本站依据条目字段整理
模版萃取师怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_586d5737/style-extract。安装方式为未标注。装完刷新技能列表或重开客户端。

模版萃取师支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

模版萃取师权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

模版萃取师收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

模版萃取师用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。