typeset

概览

什么是 typeset？

typeset 是一款专注于数字产品排版优化的 UI 设计技能。它帮助你系统性地改善字体选择、建立清晰的层级结构、优化字体大小和粗细，并提升文本的可读性。目标是让文本呈现出有意图且精致的效果，避免使用通用或默认的字体样式。

谁适合使用 typeset？

设计师、开发者以及所有从事用户界面设计的人员，只要希望提升排版质量，都能从 typeset 中受益。特别是在用户反馈字体、可读性、文本层级存在问题，或排版显得不统一、不够精细时，typeset 是理想的选择。

typeset 解决的问题

• 通用或默认字体的使用
• 文本层级混乱，结构不清晰
• 字体大小和粗细不一致
• 可读性不足
• 字体选择缺乏品牌个性

使用方法

安装步骤

使用以下命令安装 typeset：

npx skills add https://github.com/pbakaus/impeccable --skill typeset

此命令会将该技能添加到你的代理或项目环境中。

快速开始

1. 首先查看 SKILL.md 文件，了解工作流程和需求。
2. 按照【必备准备】步骤，调用 /frontend-design 以收集设计背景和原则。如果没有相关背景，先运行 /teach-impeccable。
3. 使用提供的检查清单评估当前排版：
   • 检查字体选择是否符合品牌定位，避免使用无感知的默认字体。
   • 确认层级结构，确保标题、正文和注释在视觉上有明显区分。
   • 审核字体大小和比例，保证一致性和易读性。
   • 分析字体粗细对比和间距。
4. 根据评估结果制定改进计划，参考设计原则和反模式。
5. 按步骤系统地应用改动，并根据你的代码库和工具调整工作流程。

推荐预览文件

• SKILL.md：主要技能文档和工作流程说明

常见问题

typeset 适合所有 UI 项目吗？

typeset 适用于需要提升排版质量或感觉字体通用的项目。如果你的 UI 已经拥有精心设计的排版，则可能不需要此技能。

使用 typeset 前需要做哪些准备？

必须通过调用 /frontend-design 收集设计背景信息。如果没有相关背景，请先运行 /teach-impeccable，建立基础设计原则。

typeset 能帮助提升无障碍体验吗？

虽然 typeset 主要关注视觉层级和可读性，但这些改进通常也有助于无障碍，使文本更易于浏览和阅读。

哪里可以找到支持脚本和参考资料？

打开代码库的 Files 标签，浏览嵌套的参考资料、辅助脚本和其他资源。