字体搭配拆解 · Font Pairing Review

    1

    针对企业级生产环境的字体搭配规则化检查器,提供结构化的验证逻辑与补救措施。 A rule-based checker for enterprise font pairings, with structured validation logic and concrete remedies.

    $7

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    字体搭配拆解 · Font Pairing Review

    Example session with this skill installed

    帮我拆解一套用于企业SaaS后台的字体搭配,主字体为Inter,标题使用思源黑体。按规则化检查器输出。

    • Read your context and instructions
    • Compiled the font pairing review
    • Generated the UI component

    我已针对企业SaaS后台场景,为 Inter (Body) 与 思源黑体 (Heading) 的组合生成了生产级规则化检查清单。该配置重点考量了多语言兼容性与屏幕显示效果。

    字体搭配规则化检查清单

    检查项通过标准不通过时的处理
    视觉层级对比标题(思源黑体 Bold)与正文(Inter Regular)字重比例不低于 1.5:1调整思源黑体为更高字重,或缩小正文字号
    多语言回退 (Fallback)CSS stack 包含 system-ui, sans-serif 且声明顺序正确在代码中补全 Microsoft YaHei 或 PingFang SC 声明
    字符覆盖度Inter 覆盖所有拉丁字符,思源黑体支持常用简体中文 6763 字检查特定生僻字显示,若有缺失则更换为 Noto Sans SC
    渲染一致性在 Windows (PowerShell) 与 macOS 下无毛刺,Inter 开启 -webkit-font-smoothing调整 font-weight 的像素级渲染配置,强制开启抗锯齿
    合规与授权确认 Inter (OFL) 与 思源黑体 (Apache 2.0) 均为商用免费授权若涉及定制商业字体,需在审计日志中上传授权证书
    响应式适配小于 12px 时 Inter 仍具备高可读性设定最小字号限制,禁止在移动端使用过细字重

    技术实现参考 (Codex CLI)

    Bash:

    
    # 设置前端项目字体变量
    export FONT_HEADING="Source Han Sans SC"
    export FONT_BODY="Inter, system-ui, sans-serif"
    

    PowerShell:

    
    # 设置环境变量
    $env:FONT_HEADING = "Source Han Sans SC"
    $env:FONT_BODY = "Inter, system-ui, sans-serif"
    

    Next steps

    1. 验证思源黑体在 Windows 端的 ClearType 渲染表现。
    2. 确认是否需要加载 Inter 的变量字体 (Variable Font) 版本以优化性能。
    3. 在样式表中配置 text-rendering: optimizeLegibility;

    font-pairing-review.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    建立企业级 UI 字体检查规范自动化字体授权与兼容性审计校验多端渲染环境下的字体回退机制规范化设计稿交付的字体参数检查清单

    About this skill

    它解决什么问题

    设计师和开发人员经常依赖直觉来进行字体配对,从而导致品牌表现不一致以及企业环境中的可读性差。手动审查经常会忽略技术限制,例如许可、后备堆栈和可访问性合规性。

    这个技能做什么

    • 为字体组合生成基于规则的结构化检查列表。
    • 为每个配对选择定义具体的通过标准。
    • 提供针对失败检查的补救步骤,以确保生产准备就绪。
    • 确保跨 PowerShell 和 bash 环境的技术兼容性。
    • 执行企业标准,包括许可审核和后备堆栈。

    框架和工具

    Codex CLI、桌面 AI 代理、PowerShell 和 Bash。

    为什么比裸提示词强

    标准提示提供了关于“看起来不错”的主观意见。该技能充当基于逻辑的验证器,迫使代理在批准设计之前验证技术要求,例如字体粗细可用性、字符集支持和跨平台渲染。

    典型用例

    • 审核企业 UI 设计系统的字体配对。
    • 自动化营销材料排版的质量保证。
    • 标准化分布式工程团队的字体使用。
    • 检查排版是否符合要求和可访问性要求。

    局限

    需要针对目标受众和环境的具体输入以生成相关标准。不提供实际的字体文件。


    English · 英文介绍

    The problem

    Designers and developers often rely on gut feeling for font pairings, leading to inconsistent brand representation and poor readability in enterprise environments. Manual reviews frequently miss technical constraints like licensing, fallback stacks, and accessibility compliance.

    What it does

    • Generates a structured rule-based inspection list for font combinations.
    • Defines specific passing criteria for every pairing choice.
    • Provides remediation steps for failed checks to ensure production readiness.
    • Ensures technical compatibility across PowerShell and bash environments.
    • Enforces enterprise standards including licensing audits and fallback stacks.

    Frameworks & tools

    Codex CLI, Desktop AI Agents, PowerShell, and Bash.

    Why this beats prompting it yourself

    A standard prompt provides subjective opinions on what "looks good." This skill functions as a logic-based validator, forcing the agent to verify technical requirements like font weight availability, character set support, and cross-platform rendering before approving a design.

    Use cases

    • Auditing font pairings for enterprise UI design systems.
    • Automating quality assurance for typography in marketing collateral.
    • Standardizing font usage across distributed engineering teams.
    • Reviewing typography for compliance and accessibility requirements.

    Known limitations

    Requires specific input on target audience and environment to generate relevant criteria. Does not provide actual font files.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean today

    • Passed all security checks, Safe to install

    Listedtoday

    Frequently Asked Questions