Code Edit Format Benchmark

Patch, Replace, Hashline - accuracy across models

Delta vs Replace Delta vs Patch Hashline %
Model Hashline Delta Patch Delta Repl Tokens
Gemini 3 Flash
+5.0 +8.3 -21%
Claude Sonnet 4.5
+12.7 -1.6 -24%
Grok Code Fast 1
+61.6 -1.6 -49%

Кнопки разных типов

Форма с разными полями

Все виды checkbox и radio

Типографика

Heading H1

Heading H2

Heading H3

Heading H4

Базовый абзац текста для проверки набора, межстрочного интервала и контраста в тёмной теме.

Muted paragraph для вторичного контента и подсказок.

Тестовый текст для оценки читабельности

Почему хороший интерфейс начинается с текста

В интерфейсах часто много внимания уделяют кнопкам, цветам и состояниям элементов, но именно текст несёт основную нагрузку в ежедневной работе пользователя. Он читает заголовки, сканирует абзацы, сравнивает формулировки в таблицах, ищет знакомые опорные слова и принимает решения на основе коротких подсказок. Если типографика настроена плохо, даже красивый экран становится утомительным: взгляд постоянно «спотыкается», фокус теряется, а человек тратит больше времени не на задачу, а на попытку разобраться, где начинается главное и где заканчивается второстепенное.

Первая проблема обычно в ритме: строки получаются слишком длинными, отступы между блоками становятся случайными, а размеры текста не подчиняются одной логике и меняются от секции к секции. В результате пользователь не считывает структуру естественно, а вынужден «разбирать» страницу вручную, как документ без форматирования. Это особенно заметно в плотных интерфейсах с фильтрами, статусами, табличными данными и боковыми панелями: даже опытный человек начинает делать лишние движения, перескакивать между блоками и чаще ошибаться при вводе, потому что визуальная иерархия не поддерживает сценарий, а мешает ему.

Что проверять в первую очередь

  • Длину строки в плотных текстовых блоках.
  • Контраст основного и вторичного текста.
  • Отступы между заголовком, абзацем и списком.
  • Единообразие кегля и межстрочного интервала.
Типографика работает тогда, когда пользователь не замечает её отдельно от контента.

На практике это даёт прямой эффект: люди быстрее находят нужные элементы, реже ошибаются в формах, легче понимают статусные блоки и быстрее восстанавливают контекст после переключения между задачами. Поэтому текст в дизайн-системе нужно рассматривать как полноценный компонент, а не как временное наполнение до «настоящего контента». Когда у текста есть чёткие правила длины строки, интерлиньяжа, отступов, контраста и роли в иерархии, интерфейс начинает работать заметно спокойнее и предсказуемее: пользователь меньше думает о форме экрана и больше концентрируется на результате своей работы.

Сетка x12

1
1
1
1
1
1
1
1
1
1
1
1
span-4
span-8
span-3
span-3
span-3
span-3
span-6
span-6
span-12