mcpField
G
google-fonts-skill

google-fonts-skill

github.com/podo设计与 UI29165 次安装1 天前更新
代码仓库

关于 google-fonts-skill

google-fonts-skill 面向设计人员提供 Google Fonts 选字与排版方案，涵盖 1,923 款字体的元数据、配对建议及可直接使用的代码片段。可作为 Claude 插件安装，也可搭配 google-fonts MCP 服务使用。

主要功能

  1. 01依据情绪元数据挑选字体
  2. 0273 组字体配对建议
  3. 03CSS 属性与 Tailwind 代码片段
  4. 048 种模块化字号比例
  5. 05100 组排版展示方案

适用场景

  1. 01为设计挑选字体
  2. 02寻找字体配对
  3. 03生成排版 CSS 或 Tailwind 配置
  4. 04探索字号比例与排版展示

MCP 相关

可搭配 google-fonts MCP 服务使用，通过 `claude mcp add google-fonts -- uvx google-fonts-mcp` 安装。该技能也提供 Claude 插件安装方式。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill google-fonts-skill

安装后在 Claude Code 中输入/google-fonts-skill确认已加载。

附带文件stub.yaml

详细介绍

google-fonts-skill

目录条目 — 完整平台技能：sliday/google-fonts-skill

决策树

  1. 该技能是否已启用？ 检查 google-fonts MCP 服务是否已连接，或插件是否已安装。

    • 是 → 直接继续
    • 否 → 转到第 2 步

  2. 哪种安装方式适合你的环境？

    • MCP 服务 → 使用 uvx 安装（见下文）
    • Claude 插件 → 使用 claude plugin install 安装（见下文）
    • 不确定 → 向用户展示两种选项

安装方式

选项 A — MCP 服务
claude mcp add google-fonts -- uvx google-fonts-mcp
选项 B — Claude 插件
claude plugin install google-fonts

注意：MCP 方式需要 Python/uvx。完整设置说明请参阅 GitHub README。

安装后调用

  • 技能名称：google-fonts-skill
  • MCP 服务名称：google-fonts
  • 触发词：“Google Fonts”“字体搭配”“模块化比例”“字体排版展示”

功能说明

提供智能的 Google Fonts 选择功能，涵盖 1,923 种字体，并附有风格和情绪元数据。可从 73 组经过实践验证的搭配组合中给出建议，生成可直接使用的 CSS 自定义属性、Tailwind 配置片段和 Google Fonts 嵌入链接。提供 8 种模块化字体比例和 100 套预先构建的字体排版展示，助你快速确定设计方向。

不适用场景

  • 非 Google 字体来源（自托管、Adobe Fonts 等）
  • 需要令牌架构的完整品牌字体系统 — 请搭配 design-tokens-skill
  • 在轴级别微调可变字体 — 请查阅特定字体的文档

评论

支持 Markdown