typeset
Transforme a Tipografia em Design Intencional
Fontes genéricas e dimensionamento inconsistente comprometem a credibilidade da sua interface. O Typeset aplica princípios de tipografia profissional para criar hierarquia clara, texto legível e visuais polidos que refletem a personalidade da sua marca.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“typeset”。 Revisar tipografia para um blog com texto de corpo 14px, tamanhos de título arbitrários e fontes do sistema
预期结果:
Problemas encontrados: (1) Texto de corpo abaixo do mínimo de 16px - aumentar para 1rem, (2) Sem escala consistente - títulos pulam de 18px para 32px sem passos intermediários, (3) Fontes do sistema não têm personalidade. Correção recomendada: Estabelecer escala de razão 1.25 começando com corpo de 16px, selecionar uma sans-serif humanista como Source Sans Pro combinada com uma serif legível como Source Serif Pro para títulos.
正在使用“typeset”。 Criar escala fluida de títulos para página de marketing
预期结果:
Escala baseada em clamp gerada: h1: clamp(2.5rem, 5vw, 4rem), h2: clamp(2rem, 4vw, 3rem), h3: clamp(1.5rem, 3vw, 2.25rem). Todos os títulos usam line-height 1.1 para aparência compacta e polida. Corpo permanece fixo em 1.125rem para conforto de leitura.
安全审计
安全All 26 static analysis findings are false positives. The scanner misinterpreted CSS code snippets (e.g., font-display, max-width, tabular-nums) as shell commands and typography analysis instructions as system reconnaissance. This is a design guideline document with no executable code, network access, filesystem operations, or cryptographic functions. Safe for publication.
质量评分
你能构建什么
Polimento de Landing Page de Startup
Transforme uma configuração genérica Inter/Roboto de um template em um sistema de tipos distintivo que reflete a personalidade da sua marca mantendo excelente legibilidade em todos os dispositivos.
Fundação de Tipografia em Design System
Estabeleça uma escala de tipos abrangente com funções definidas para cada tamanho e peso, criando tokens reutilizáveis para tipografia consistente em toda a sua aplicação.
Auditoria de Acessibilidade Tipográfica
Revise e corrija problemas de tipografia que impactam a legibilidade incluindo contraste insuficiente, texto de corpo pequeno, espaçamento de linha inadequado e dimensionamento não responsivo.
试试这些提示
Revise a tipografia nesta página e identifique os 3 principais problemas afetando legibilidade e hierarquia visual.
Preciso de recomendações de fontes para uma [tipo de marca: ex: startup fintech descontraída]. Minha configuração atual usa [fontes atuais]. Sugira 2-3 combinações de fontes com estratégias de carregamento.
Crie uma escala de tipos completa para minha [UI de app / site de marketing] com tamanhos para legenda, corpo, sub-título e título. Inclua recomendações de line-height, letter-spacing e weight.
Converta meus títulos fixos baseados em rem para tipografia fluida usando clamp(). Minha escala atual é [listar tamanhos]. Garanta escalonamento suave de mobile para desktop.
最佳实践
- Comece com uma razão fixa (1.25 ou 1.333) e aplique consistentemente em todos os tamanhos de texto
- Combine múltiplas dimensões para hierarquia: tamanho, peso, cor e espaçamento juntos
- Teste a tipografia em 100%, 150% e 200% de zoom para garantir conformidade com acessibilidade
避免
- Usar mais de 2-3 famílias de fontes cria caos visual e sobrecarga de performance
- Definir texto de corpo abaixo de 16px viola melhores práticas de acessibilidade
- Escolher tamanhos arbitrários sem uma escala resulta em aparência inconsistente e pouco profissional