Agent Skills
› davepoon/buildwithclaude
› typography-selector
typography-selector
GitHub用于前端设计的项目字体选择工具。支持浏览Google Fonts趋势、搜索特定字体、生成导入代码及Tailwind配置，并提供基于审美的推荐配对方案，帮助用户快速确定合适的显示、正文和等宽字体组合。
Trigger Scenarios
需要为设计项目选择字体
寻找符合特定审美风格的字体搭配
生成Google Fonts导入链接或Tailwind配置
Install
npx skills add davepoon/buildwithclaude --skill typography-selector -g -y
SKILL.md
Frontmatter
{
"name": "typography-selector",
"description": "Browse and select fonts from Google Fonts or curated pairings. Use to find the perfect typography for a design project.",
"allowed-tools": [
"AskUserQuestion",
"mcp__claude-in-chrome__tabs_context_mcp",
"mcp__claude-in-chrome__tabs_create_mcp",
"mcp__claude-in-chrome__navigate",
"mcp__claude-in-chrome__computer",
"mcp__claude-in-chrome__read_page",
"mcp__claude-in-chrome__find"
]
}
Typography Selector
Browse, select, and apply typography for frontend designs.
Purpose
This skill helps select the perfect fonts by:
- Browsing trending fonts on Google Fonts
- Suggesting pairings based on aesthetic
- Generating Google Fonts imports
- Mapping to Tailwind config
- Providing curated fallbacks when browser unavailable
Browser Workflow
Step 1: Navigate to Google Fonts
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://fonts.google.com/?sort=trending", tabId: tabId })
Step 2: Browse Fonts
Take screenshots of trending fonts:
computer({ action: "screenshot", tabId: tabId })
Present to user: "Here are trending fonts. What style catches your eye?"
Step 3: Search Specific Fonts
If user has a preference:
navigate({ url: "https://fonts.google.com/?query=Outfit", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
Step 4: View Font Details
Click on a font to see all weights and styles:
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
Step 5: Select Fonts
Get user's choice for:
- Display/Heading font: For headlines, hero text
- Body font: For paragraphs, readable text
- Mono font (optional): For code, technical content
Step 6: Generate Import
Create Google Fonts import:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">
Step 7: Generate Config
Create Tailwind font config:
tailwind.config = {
theme: {
extend: {
fontFamily: {
display: ['Fraunces', 'serif'],
body: ['Outfit', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
}
}
}
Fallback Mode
When browser tools are unavailable, use curated pairings.
How to Use Fallbacks
- Ask user about desired aesthetic
- Present relevant pairings from
references/font-pairing.md - Let user choose or request adjustments
- Provide import code for selected fonts
Quick Aesthetic Match
| Aesthetic | Recommended Pairing |
|---|---|
| Dark & Premium | Fraunces + Outfit |
| Minimal | Satoshi + Satoshi |
| Neobrutalism | Space Grotesk + Space Mono |
| Editorial | Instrument Serif + Inter |
| Y2K/Cyber | Orbitron + JetBrains Mono |
| Scandinavian | Plus Jakarta Sans + Plus Jakarta Sans |
| Corporate | Work Sans + Inter |
Typography Best Practices
Font Pairing Rules
Contrast, not conflict:
- Pair serif with sans-serif
- Pair display with readable body
- Match x-height for harmony
- Limit to 2 fonts (3 max with mono)
Weight distribution:
- Headlines: Bold (600-900)
- Subheads: Medium (500-600)
- Body: Regular (400)
- Captions: Light to Regular (300-400)
Sizing Scale
Use a consistent type scale:
/* Minor Third (1.2) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
Line Height
| Content Type | Line Height | Tailwind Class |
|---|---|---|
| Headlines | 1.1 - 1.2 | leading-tight |
| Subheads | 1.25 - 1.35 | leading-snug |
| Body text | 1.5 - 1.75 | leading-relaxed |
| Small text | 1.4 - 1.5 | leading-normal |
Letter Spacing
| Usage | Tracking | Tailwind Class |
|---|---|---|
| All caps | Wide | tracking-widest |
| Headlines | Tight to normal | tracking-tight |
| Body | Normal | tracking-normal |
| Small caps | Wide | tracking-wide |
Fonts to Avoid
Overused (instant "template" feeling):
- Inter (the default AI font)
- Roboto (Android default)
- Open Sans (early 2010s web)
- Arial / Helvetica (unless intentional Swiss)
- Lato (overexposed)
- Poppins (overused in 2020s)
Why these feel generic:
- Used in every Figma template
- Default in many tools
- No distinctive character
- Signal "no design decision made"
Output Format
Provide selected typography in this format:
## Selected Typography
### Font Stack
| Role | Font | Weights | Fallback |
|------|------|---------|----------|
| Display | Fraunces | 400, 700 | serif |
| Body | Outfit | 400, 500, 600 | sans-serif |
| Mono | JetBrains Mono | 400 | monospace |
### Google Fonts Import
\`\`\`html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
\`\`\`
### Tailwind Config
\`\`\`javascript
fontFamily: {
display: ['Fraunces', 'serif'],
body: ['Outfit', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
\`\`\`
### Usage Examples
\`\`\`html
<h1 class="font-display text-6xl font-bold leading-tight">
Headline
</h1>
<p class="font-body text-lg leading-relaxed">
Body text goes here.
</p>
<code class="font-mono text-sm">
code example
</code>
\`\`\`
References
See references/font-pairing.md for:
- Curated font pairings by aesthetic
- Font classification guide
- Advanced pairing techniques
- Performance considerations
Version History
- 502fc01 Current 2026-07-05 15:11
