AI 生成界面的字体排印：摆脱平庸感最快的办法AI 產生介面的字體排印：擺脫平庸感最快的辦法Typography for AI-generated UI: the fastest way to look less genericAI生成UIのタイポグラフィ：没個性から抜け出す最短路AI 생성 UI의 타이포그래피: 평범함을 벗는 가장 빠른 길Tipografi untuk UI jana AITypography cho UI do AI tạo: cách nhanh nhất để bớt tầm thườngLa typographie des UI générées par IATipografía para UI generada por IATypografie für KI-generierte UIs
生成器默认一种无衬线、三个字号。一套字号阶梯、第二种字体、大字号收紧字距和合理行长，能解决大部分问题。產生器預設一種無襯線、三個字級。一套字級階梯、第二種字體、大字收緊字距和合理行長，能解決大部分問題。Generators default to one sans at three sizes. A type scale, a second typeface, tighter tracking on display sizes and real line lengths fix most of it.生成器は1書体3サイズが既定。スケール、第2書体、見出しの字詰め、行長で大半が直る。생성기는 산세리프 하나에 크기 셋. 스케일, 두 번째 서체, 자간, 줄 길이로 대부분 해결.Skala jenis, muka taip kedua, jarak huruf dan panjang baris menyelesaikan kebanyakannya.Thang cỡ chữ, font thứ hai, giãn chữ và độ dài dòng giải quyết phần lớn.Une échelle, une seconde police, l'approche et la longueur de ligne règlent l'essentiel.Una escala, una segunda fuente, el tracking y la longitud de línea resuelven casi todo.Skala, zweite Schrift, Laufweite und Zeilenlänge lösen das meiste.
正文以簡體中文顯示。
本文は英語で表示しています。
본문은 영어로 표시됩니다.
Kandungan dipaparkan dalam bahasa Inggeris.
Nội dung hiển thị bằng tiếng Anh.
Le corps de l’article est en anglais.
El cuerpo del artículo está en inglés.
Der Beitragstext ist auf Englisch.
Ask any generator for a landing page and you will usually get one sans-serif at body, heading and caption sizes. Typography is the cheapest lever to move a page away from that default, and it is easy to specify precisely in a prompt.
Five rules to put in the brief
- Use a modular scale. Pick a ratio (1.2 for dense apps, 1.25–1.333 for marketing) and name the steps as tokens.
- Pair two typefaces with a job each. A display face for headlines (a serif such as Instrument Serif, or a tight grotesk) and a workhorse sans for UI.
- Tighten large text. Negative letter-spacing (around −0.02em) on display sizes; leave body text at default.
- Constrain line length. Roughly 45–75 characters for Latin body text; use
max-width: 65ch. - Fluid sizes.
clamp()for headlines so mobile does not inherit desktop sizes.
CJK needs its own settings
For Chinese and Japanese, use a slightly larger line-height (about 1.7), avoid negative tracking, and use word-break: keep-all or text-wrap: balance on headings so short phrases are not orphaned, the fix we applied to our own Japanese headings.
Our take
If you only change one thing in AI output, change the type scale and the display face. It is a two-line token edit with a visible payoff.
让任何生成器做一个落地页，你通常会得到一种无衬线字体，分成正文、标题和说明三个字号。字体排印是把页面拉离默认样式最便宜的杠杆，而且在提示里很容易说精确。
写进需求的五条规则
- 用模数字号阶梯。选一个比例（紧凑应用 1.2，营销页 1.25–1.333），每一级起个 Token 名。
- 两种字体，各司其职。标题用展示字体（Instrument Serif 这类衬线，或紧凑的怪诞体），界面用耐用的无衬线。
- 大字收紧字距。展示字号用负字距（约 −0.02em），正文保持默认。
- 限制行长。拉丁文正文大约每行 45–75 个字符，用
max-width: 65ch。 - 流式字号。标题用
clamp()，别让手机继承桌面字号。
中日韩文字要单独设置
中文和日文的行高要稍大（约 1.7），不要用负字距；标题用 word-break: keep-all 或 text-wrap: balance，避免短语被拆到下一行孤零零一个字。我们自己的日语标题就是这样修好的。
我们的看法
如果 AI 产出只改一处，就改字号阶梯和展示字体。两行 Token 的改动，效果立竿见影。
Ask any generator for a landing page and you will usually get one sans-serif at body, heading and caption sizes. Typography is the cheapest lever to move a page away from that default, and it is easy to specify precisely in a prompt.
Five rules to put in the brief
- Use a modular scale. Pick a ratio (1.2 for dense apps, 1.25–1.333 for marketing) and name the steps as tokens.
- Pair two typefaces with a job each. A display face for headlines (a serif such as Instrument Serif, or a tight grotesk) and a workhorse sans for UI.
- Tighten large text. Negative letter-spacing (around −0.02em) on display sizes; leave body text at default.
- Constrain line length. Roughly 45–75 characters for Latin body text; use
max-width: 65ch. - Fluid sizes.
clamp()for headlines so mobile does not inherit desktop sizes.
CJK needs its own settings
For Chinese and Japanese, use a slightly larger line-height (about 1.7), avoid negative tracking, and use word-break: keep-all or text-wrap: balance on headings so short phrases are not orphaned, the fix we applied to our own Japanese headings.
Our take
If you only change one thing in AI output, change the type scale and the display face. It is a two-line token edit with a visible payoff.
AI 提示词AI 提示詞AI promptAIプロンプトAI 프롬프트Prompt AIPrompt cho AIPrompt IAPrompt de IAKI-Prompt
复制给 Claude、Cursor、v0 等 AI 助手，让它按本文的方法处理你的项目。尖括号里的内容换成你自己的。複製給 Claude、Cursor、v0 等 AI 助手，讓它按本文的方法處理你的專案。尖括號裡的內容換成你自己的。Paste this into Claude, Cursor, v0 or another assistant to apply this post to your own project. Replace the parts in angle brackets.Claude・Cursor・v0 などのAIアシスタントに貼り付けると、この記事の方法をあなたのプロジェクトに適用できます。山括弧の部分は自分の内容に置き換えてください。Claude, Cursor, v0 같은 AI 도우미에 붙여 넣으면 이 글의 방법을 내 프로젝트에 적용할 수 있습니다. 꺾쇠괄호 안은 내 내용으로 바꾸세요.Tampal ke Claude, Cursor, v0 atau pembantu lain untuk menggunakan kaedah artikel ini pada projek anda. Gantikan bahagian dalam kurungan sudut.Dán vào Claude, Cursor, v0 hoặc trợ lý khác để áp dụng bài này cho dự án của bạn. Thay phần trong dấu ngoặc nhọn bằng nội dung của bạn.Collez-le dans Claude, Cursor, v0 ou un autre assistant pour appliquer cet article à votre projet. Remplacez les parties entre chevrons.Pégalo en Claude, Cursor, v0 u otro asistente para aplicar este artículo a tu proyecto. Sustituye lo que está entre corchetes angulares.In Claude, Cursor, v0 oder einen anderen Assistenten einfügen, um diesen Beitrag auf dein Projekt anzuwenden. Teile in spitzen Klammern ersetzen.
你是一名资深 UI 工程师。请把文章《AI 生成界面的字体排印：摆脱平庸感最快的办法》（https://ui.incidental.site/blog/typography-for-ai-generated-ui/）的方法用到我的项目上。
核心观点：生成器默认一种无衬线、三个字号。一套字号阶梯、第二种字体、大字号收紧字距和合理行长，能解决大部分问题。
步骤：
1. 读文章，把建议整理成一份具体、可检查的编号清单。
2. 用这份清单检查 <我的页面 / 组件 / 仓库>，每条标注通过或不通过，并写明文件和行号。
3. 用我现有的 token 和组件，小批量修复不通过的项。不要编造 API，以文章链接的官方文档为准。
4. 最后列出待确认的问题和你无法核实的内容。你是一名資深 UI 工程師。請把文章《AI 產生介面的字體排印：擺脫平庸感最快的辦法》（https://ui.incidental.site/blog/typography-for-ai-generated-ui/）的方法用到我的專案上。
核心觀點：產生器預設一種無襯線、三個字級。一套字級階梯、第二種字體、大字收緊字距和合理行長，能解決大部分問題。
步驟：
1. 讀文章，把建議整理成一份具體、可檢查的編號清單。
2. 用這份清單檢查 <我的頁面 / 元件 / 儲存庫>，每條標註通過或不通過，並寫明檔案和行號。
3. 用我現有的 token 和元件，小批量修復不通過的項目。不要編造 API，以文章連結的官方文件為準。
4. 最後列出待確認的問題和你無法核實的內容。You are a senior UI engineer. Apply the article “Typography for AI-generated UI: the fastest way to look less generic” (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) to my project.
Key idea: Generators default to one sans at three sizes. A type scale, a second typeface, tighter tracking on display sizes and real line lengths fix most of it.
Steps:
1. Read the article and turn its advice into a numbered checklist of concrete, checkable rules.
2. Audit <my page / component / repo> against that checklist; mark each rule PASS or FAIL with file and line.
3. Fix the FAIL items in small batches, using my existing tokens and components. Do not invent APIs; follow the official docs the article links to.
4. Finish with a short list of open questions and anything you could not verify.あなたはシニアUIエンジニアです。記事「AI生成UIのタイポグラフィ：没個性から抜け出す最短路」（https://ui.incidental.site/blog/typography-for-ai-generated-ui/）の方法を私のプロジェクトに適用してください。
要点：生成器は1書体3サイズが既定。スケール、第2書体、見出しの字詰め、行長で大半が直る。
手順：
1. 記事を読み、助言を具体的で確認可能な番号付きチェックリストにする。
2. そのチェックリストで <私のページ / コンポーネント / リポジトリ> を監査し、各項目を合格／不合格で示し、ファイルと行番号を書く。
3. 不合格の項目を、既存のトークンとコンポーネントを使って少しずつ修正する。APIを捏造せず、記事がリンクする公式ドキュメントに従う。
4. 最後に未解決の質問と検証できなかった点を挙げる。당신은 시니어 UI 엔지니어입니다. 글 “AI 생성 UI의 타이포그래피: 평범함을 벗는 가장 빠른 길”(https://ui.incidental.site/blog/typography-for-ai-generated-ui/)의 방법을 내 프로젝트에 적용해 주세요.
핵심: 생성기는 산세리프 하나에 크기 셋. 스케일, 두 번째 서체, 자간, 줄 길이로 대부분 해결.
단계:
1. 글을 읽고 조언을 구체적이고 확인 가능한 번호 목록으로 정리한다.
2. 그 목록으로 <내 페이지 / 컴포넌트 / 저장소>를 점검하고, 항목마다 통과/실패와 파일·줄 번호를 적는다.
3. 실패 항목을 기존 토큰과 컴포넌트로 조금씩 고친다. API를 지어내지 말고 글에 링크된 공식 문서를 따른다.
4. 마지막으로 남은 질문과 확인하지 못한 내용을 정리한다.Anda jurutera UI kanan. Gunakan kaedah artikel “Tipografi untuk UI jana AI” (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) pada projek saya.
Idea utama: Skala jenis, muka taip kedua, jarak huruf dan panjang baris menyelesaikan kebanyakannya.
Langkah:
1. Baca artikel dan jadikan nasihatnya senarai semak bernombor yang konkrit dan boleh disemak.
2. Audit <halaman / komponen / repo saya> dengan senarai itu; tandakan setiap peraturan LULUS atau GAGAL dengan fail dan baris.
3. Baiki item GAGAL sedikit demi sedikit menggunakan token dan komponen sedia ada. Jangan reka API; ikut dokumen rasmi yang dipautkan artikel.
4. Akhiri dengan soalan terbuka dan perkara yang tidak dapat disahkan.Bạn là kỹ sư UI cấp cao. Hãy áp dụng bài viết “Typography cho UI do AI tạo: cách nhanh nhất để bớt tầm thường” (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) cho dự án của tôi.
Ý chính: Thang cỡ chữ, font thứ hai, giãn chữ và độ dài dòng giải quyết phần lớn.
Các bước:
1. Đọc bài và biến lời khuyên thành danh sách kiểm tra đánh số, cụ thể, kiểm chứng được.
2. Rà soát <trang / component / repo của tôi> theo danh sách đó; ghi ĐẠT hoặc KHÔNG ĐẠT kèm tệp và dòng.
3. Sửa các mục KHÔNG ĐẠT theo từng đợt nhỏ, dùng token và component sẵn có. Không bịa API; làm theo tài liệu chính thức mà bài viết dẫn tới.
4. Kết thúc bằng các câu hỏi còn mở và những điểm chưa xác minh được.Tu es ingénieur UI senior. Applique l’article « La typographie des UI générées par IA » (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) à mon projet.
Idée clé : Une échelle, une seconde police, l'approche et la longueur de ligne règlent l'essentiel.
Étapes :
1. Lis l’article et transforme ses conseils en une liste numérotée de règles concrètes et vérifiables.
2. Audite <ma page / mon composant / mon dépôt> avec cette liste ; indique OK ou KO pour chaque règle, avec fichier et ligne.
3. Corrige les points KO par petits lots, avec mes tokens et composants existants. N’invente pas d’API ; suis la documentation officielle citée par l’article.
4. Termine par les questions ouvertes et ce que tu n’as pas pu vérifier.Eres un ingeniero de UI sénior. Aplica el artículo “Tipografía para UI generada por IA” (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) a mi proyecto.
Idea clave: Una escala, una segunda fuente, el tracking y la longitud de línea resuelven casi todo.
Pasos:
1. Lee el artículo y convierte sus consejos en una lista numerada de reglas concretas y comprobables.
2. Audita <mi página / componente / repositorio> con esa lista; marca cada regla como CUMPLE o NO CUMPLE con archivo y línea.
3. Corrige los puntos que no cumplen en lotes pequeños, usando mis tokens y componentes actuales. No inventes APIs; sigue la documentación oficial que enlaza el artículo.
4. Termina con las preguntas abiertas y lo que no pudiste verificar.Du bist Senior-UI-Engineer. Wende den Artikel „Typografie für KI-generierte UIs“ (https://ui.incidental.site/blog/typography-for-ai-generated-ui/) auf mein Projekt an.
Kernidee: Skala, zweite Schrift, Laufweite und Zeilenlänge lösen das meiste.
Schritte:
1. Lies den Artikel und mach aus den Empfehlungen eine nummerierte Liste konkreter, prüfbarer Regeln.
2. Prüfe <meine Seite / Komponente / mein Repo> anhand dieser Liste; markiere jede Regel mit OK oder FEHLT, mit Datei und Zeile.
3. Behebe die fehlenden Punkte in kleinen Schritten mit meinen vorhandenen Tokens und Komponenten. Erfinde keine APIs; folge der offiziellen Doku, die der Artikel verlinkt.
4. Schließe mit offenen Fragen und dem, was du nicht prüfen konntest.引用来源引用來源References参考文献참고 자료RujukanNguồn tham khảoRéférencesReferenciasQuellen
- Practical Typography: line length — Matthew Butterick
- text-wrap — MDN
- clamp() — MDN
- Utopia fluid type scale — Utopia
- Requirements for Chinese Text Layout — W3C
相关文章相關文章Related posts関連記事관련 글Artikel berkaitanBài liên quanArticles liésArtículos relacionadosÄhnliche Beiträge
把暗色模式做对：token、层级与对比度把暗色模式做對：token、層級與對比度Dark mode done right: tokens, elevation and contrast正しいダークモード：トークン・階層・コントラスト다크 모드 제대로: 토큰, 고도, 대비Mod gelap yang betul: token, ketinggian dan kontrasLàm dark mode đúng: token, độ nổi và độ tương phảnUn mode sombre réussi : tokens, élévation et contrasteModo oscuro bien hecho: tokens, elevación y contrasteDark Mode richtig: Tokens, Elevation und Kontrast
暗色模式是第二套配色，不是反色。用语义 token，用更亮的表面表达层级，强调色要降饱和。暗色模式是第二套配色，不是反色。用語義 token，用更亮的表面表達層級。Dark mode is a second palette, not an inverted one. Use semantic tokens, lighter surfaces for elevation, and desaturated accents.ダークモードは反転ではなく第二のパレット。意味トークン、明るい面で階層、彩度を下げたアクセント。다크 모드는 반전이 아니라 두 번째 팔레트. 시맨틱 토큰, 밝은 면으로 고도 표현.Mod gelap ialah palet kedua, bukan terbalik. Guna token semantik dan permukaan lebih cerah untuk ketinggian.Dark mode là bảng màu thứ hai, không phải đảo màu. Dùng token ngữ nghĩa, bề mặt sáng hơn để thể hiện độ nổi.Une seconde palette, pas une inversion. Tokens sémantiques, surfaces plus claires pour l'élévation.Una segunda paleta, no una inversión. Tokens semánticos y superficies más claras para la elevación.Eine zweite Palette, keine Invertierung. Semantische Tokens, hellere Flächen für Elevation.
让动效"对味"：目的、时长、缓动与克制讓動效「對味」：目的、時長、緩動與克制Motion that feels right: purpose, duration, easing, restraintしっくりくるモーション：目的・時間・イージング・抑制자연스러운 모션: 목적, 시간, 이징, 절제Gerakan yang terasa betul: tujuan, tempoh, easing, kawalanChuyển động đúng cảm giác: mục đích, thời lượng, easing, tiết chếUn mouvement juste : intention, durée, easing, retenueMovimiento que se siente bien: propósito, duración, easing, contenciónBewegung, die sich richtig anfühlt: Zweck, Dauer, Easing, Zurückhaltung
大多数界面动效应在 300ms 内、用 ease-out，高频操作干脆不做。炫技属于营销页，不属于工具。大多數介面動效應在 300ms 內、用 ease-out，高頻操作乾脆不做。Most UI motion should be under 300ms, ease-out, and skipped for frequent actions. Spectacle belongs on marketing pages, not in tools.UIモーションは300ms以内・ease-out、頻繁な操作には付けない。UI 모션은 300ms 이하, ease-out, 잦은 동작엔 생략.Kebanyakan gerakan UI di bawah 300ms, ease-out, dan dilangkau untuk tindakan kerap.Hầu hết chuyển động dưới 300ms, ease-out, bỏ qua với thao tác thường xuyên.Moins de 300 ms, ease-out, et rien pour les actions fréquentes.Menos de 300 ms, ease-out, y nada en acciones frecuentes.Unter 300 ms, ease-out, und keine Animation für häufige Aktionen.
AI 生成界面的无障碍：模型常漏的检查项AI 生成介面的無障礙：模型常漏的檢查項Accessibility in AI-generated UI: the checks models skipAI生成UIのアクセシビリティ：モデルが飛ばすチェックAI 생성 UI의 접근성: 모델이 빠뜨리는 점검Kebolehcapaian dalam UI jana AI: semakan yang dilangkau modelKhả năng tiếp cận trong UI do AI tạo: những kiểm tra mô hình bỏ quaAccessibilité de l'UI générée par IA : les vérifications oubliéesAccesibilidad en UI generada por IA: las comprobaciones que se saltanBarrierefreiheit in KI-generierter UI: die übersprungenen Checks
生成的界面看着没问题，键盘和读屏却用不了。先用无障碍底层组件，再按 WCAG 2.2 走查。生成的介面看著沒問題，鍵盤和讀屏卻用不了。先用無障礙底層元件，再按 WCAG 2.2 檢查。Generated UIs look fine and fail keyboards and screen readers. Start from accessible primitives, then audit against WCAG 2.2.見た目は良くてもキーボードやスクリーンリーダーで失敗。アクセシブルな基盤からWCAG 2.2で監査。보기엔 괜찮아도 키보드·스크린리더에서 실패. 접근성 기반에서 시작해 WCAG 2.2로 점검.Nampak baik tetapi gagal untuk papan kekunci dan pembaca skrin. Mula dengan primitif boleh capai, audit dengan WCAG 2.2.Trông ổn nhưng hỏng với bàn phím và trình đọc màn hình. Dùng primitive dễ tiếp cận, kiểm theo WCAG 2.2.Belles mais inutilisables au clavier. Partir de primitives accessibles, auditer selon WCAG 2.2.Se ven bien pero fallan con teclado y lector. Parte de primitivas accesibles y audita con WCAG 2.2.Sieht gut aus, scheitert an Tastatur und Screenreader. Mit barrierefreien Primitives starten, nach WCAG 2.2 prüfen.