typography
設計專業排版佈局
通用字體會讓設計看起來業餘。此技能提供專業的排版指南,使用精選的字體推薦來創建視覺上引人注目且專業的文字佈局。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“typography”。 What fonts should I use for a technical documentation site?
预期结果:
- 對於技術文件,程式碼片段使用 IBM Plex Mono,內文使用 IBM Plex Sans
- IBM Plex 系列提供優秀的可讀性和技術美感
- 搭配 Space Grotesk 作為標題以增加視覺趣味
- 內文使用粗細 400,標題使用 600-700
- 在標題和內文之間維持 3:1 的大小比例
正在使用“typography”。 Help me choose fonts for my design portfolio
预期结果:
- 標題使用 Bricolage Grotesque 以展現獨特性格
- 搭配乾淨的襯線字體如 Crimson Pro 作為內文
- 這在展示型和閱讀型排版之間創造高對比度
- 從 Google Fonts 載入兩者以獲得可靠的網頁傳遞
安全审计
安全This is a pure documentation skill containing only markdown text with typography design guidelines. No executable code, network requests, file system access, or cryptographic operations exist. All 38 static findings are false positives triggered by JSON field names and benign text patterns. The scanner incorrectly interprets words like DES (within design), hash, source, and font names as security threats. The skill-report.json explicitly states No executable code, network requests, or file system access detected.
风险因素
🌐 网络访问 (1)
📁 文件系统访问 (1)
质量评分
你能构建什么
為網站選擇字體
為網頁專案選擇能提升使用者體驗和品牌形象的專業字體
創建排版層級
使用字體粗細、大小和配對為介面設計清晰的視覺層級
改善可讀性
為部落格、文件和數位內容選擇適當的字體以最大化可讀性
试试这些提示
I need typography recommendations for a modern tech blog. What fonts should I use for headings and body text?
I'm creating documentation for a programming library. What font combinations work well for code snippets and explanatory text?
I want to create an editorial-style web layout with high visual impact. What font pairings create strong contrast?
Design a complete typographic system for a design system with headings, body text, captions, and code. Include weight and size recommendations.
最佳实践
- 從 Google Fonts 載入字體以獲得可靠的網頁傳遞
- 使用極端的粗細對比(100/200 對比 800/900)以產生視覺衝擊
- 將設計限制在一個獨特的字體系列以維持一致性
- 在最終確定前測試不同螢幕尺寸下的字體組合
避免
- 避免使用過度使用的字體,如 Inter、Roboto、Open Sans 和 Lato
- 不要使用小幅度的粗細差異(400 對比 600)- 追求極端對比
- 絕不依賴系統預設字體來做專業設計