Дизайн-система Thumbtack Thumbprint.

Дизайн-система Thumbtack Thumbprint. Выберите поколение токенов

Не смешивайте v1 и v2

В Thumbprint доступны оба поколения токенов. Экспортируемые имена токенов v2 начинаются с tpV2 и включают новую шкалу серых оттенков, адаптивные размеры заголовков и промежуточные значения насыщенности шрифта. Наличие описания нативного компонента в разделе v1 не означает, что он использует значения v2. Перед заменой общих стилей зафиксируйте, какие пакет и поколение уже применяются в вашем продукте.

Используйте этот пример для изучения композиции

В этом примере публичные примитивы напрямую применяются к оригинальному HTML. Он не оборачивает ServiceCard и не заявляет о полном соответствии возможностям приложения Thumbtack. Нативную реализацию следует начинать с документированного пакета API и подставлять реальные данные об услугах только после определения контрактов загрузки, ошибок и прав доступа.

Дизайн-система Thumbtack Thumbprint. Роли цветов и выбор

Разделяйте действия, выбор и доступность

Blue700 используется для основного локального действия, Blue50 — для выбранных элементов управления, а Green700 на Green50 — для текста о доступности. Gray900 применяется для имени исполнителя, а Gray600 — для дополнительной информации. Это выбранные для приложения сопоставления на основе документированных примитивов, а не выдуманные названия семантических токенов.

Не обозначайте выбранного исполнителя только цветом

При выборе исполнителя меняются не только оттенок кнопки, но и её подпись, а также состояние aria-pressed. Доступность обозначается текстом с указанием времени. Фильтрация может скрыть выбранного исполнителя, не удаляя его из списка: сам список остаётся видимым, чтобы пользователь понимал разницу.

Дизайн-система Thumbtack Thumbprint. Типографика и контент

Учитывайте различия в типографике между версиями

В публичном руководстве по типографике указаны шрифт Rise с насыщенностью 400 и 700 и устаревшая адаптивная шкала размеров заголовков. На странице токенов v2 представлены другие размеры и дробные значения насыщенности. Не объединяйте их в одну несуществующую настройку по умолчанию. В этом предпросмотре используется системный резервный шрифт и явно заданы размеры по мотивам шкалы v2; шрифт Rise не распространяется.

Добавляйте детали, помогающие сравнивать

Для каждого исполнителя указаны категория услуги, краткое описание и понятная метка доступности. В каталоге намеренно отсутствуют вымышленные количества отзывов, рейтинги и цены. На реальном маркетплейсе для таких данных нужны надёжные источники и единицы измерения; декоративные звёзды лишь создают ложное ощущение достоверности, не добавляя полезной информации.

Дизайн-система Thumbtack Thumbprint. Карточки, интервалы и адаптивный макет

Размещайте детали для сравнения вместе

Для карточек исполнителей заданы внутренний отступ 24px, внутренний интервал 16px и скругление 12px. Инициалы декоративны; доступное имя задаёт расположенный рядом заголовок. Карточка целиком не превращается во вложенную ссылку. Кнопка выбора остаётся отдельной, поэтому будущая ссылка на профиль не перехватит поведение выбора.

На узких экранах расположите список столбцом

Thumbtack Thumbprint Состояния фильтрации и списка сохранённых вариантов в дизайн-системе

Не связывайте фильтры с состоянием сохранения

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

Покажите результат действия честно

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

Thumbtack Thumbprint Выбор с клавиатуры и доступность в дизайн-системе

Используйте для элементов управления семантическую разметку

Для выбора категории используется подписанный список, а для условия «да/нет» — подписанный флажок. У каждой кнопки сохранения есть уникальное доступное имя с указанием специалиста и атрибут aria-pressed. Количество результатов объявляется в области с ненавязчивым обновлением, а сообщение о проверке списка использует семантику статуса. Индикатор клавиатурного фокуса виден независимо от наведения курсора.

Используйте настоящие заголовки и гибкую высоту

Имена специалистов оформлены как элементы h2, а не как выделенные полужирным текстом фрагменты. Инициалы и исходный декоративный SVG исключены из дерева доступности. Длинные имена и описания должны переноситься, не уводя действие за пределы экрана; при увеличении текста нужны гибкие строки, а не обрезка.

Thumbtack Thumbprint Полная реализация дизайн-системы

Запустите и изучите пример целиком

Сохраните пример HTML как index.html и запустите сервер в содержащей его папке. В нём есть встроенные CSS и JavaScript, установка пакетов и подключение к сети не требуются. Три записи и Set для выбранных вариантов заданы явно, поэтому поведение можно адаптировать без анализа сгенерированного пакета.

1. Сохраните файл HTML целиком.
2. Запустите локальный сервер и откройте страницу в браузере.
3. Настройте фильтры так, чтобы результатов не было, затем сбросьте их.
4. Сохраните двух специалистов, проверьте список, затем удалите одного.

Переходите на нативные компоненты осознанно

При переходе на библиотеку React изучите актуальную документацию по ServiceCard, Button и типографике для используемой версии. Если модель состояния из этого примера подходит продукту, сохраните её, но замените исходную разметку проверенными API. Не переносите значения v2 в компоненты v1 без визуальной и клавиатурной регрессионной проверки.

Thumbtack Thumbprint Передача задачи AI-агенту и проверка дизайн-системы

Чётко ограничьте задачу для агента

Попросите создать экран сравнения услуг для дома на основе выбранной версии Thumbprint, указав точные URL источников и локальные вымышленные записи. Сохраните различие между фильтрацией и выбором. Предоставьте полный пример в качестве образца поведения и уточните, нужны ли нативные компоненты React или независимые HTML.

Проверьте сценарии с ошибками

• Сохранённое состояние не меняется при фильтрации.
• При изменении списка сохранённых вариантов старое подтверждение очищается.
• Рейтинги и результаты связи со специалистами не выдумываются.

Thumbtack Thumbprint Примеры компонентов дизайн-системы

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Home project shortlist</title><style>
:root{--ink:#2b2d2f;--muted:#595c61;--line:#dddee1;--soft:#f5f6f6;--action:#0175a3;--selected:#f0faff}*{box-sizing:border-box}body{margin:0;padding:32px;font:400 16px/1.4 system-ui,sans-serif;color:var(--ink);background:white}h1{font-size:36px;line-height:1.05;letter-spacing:-.02em;margin:12px 0}h2{font-size:22px;margin:0 0 8px}p{margin:8px 0 20px}.eyebrow,.meta{font-size:14px;color:var(--muted)}header{display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px}svg{width:180px;height:120px}.filters{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}select,button{font:inherit;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:10px 16px;background:white;color:var(--ink)}label{display:flex;align-items:center;gap:8px}input{accent-color:var(--action);width:18px;height:18px}main{display:grid;grid-template-columns:2fr 1fr;gap:24px}.cards{display:grid;gap:16px}.card{padding:24px;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start}.avatar{display:grid;place-items:center;border-radius:50%;height:48px;background:var(--selected);color:var(--action);font-weight:700}.card p{margin:4px 0 12px}.card button[aria-pressed=true]{background:var(--selected);border-color:var(--action);color:var(--action)}.badge{display:inline-block;background:#eefbf4;color:#126a4b;padding:4px 8px;border-radius:6px;font-size:14px}aside{align-self:start;border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--soft)}aside ul{padding-left:20px}aside li{margin:12px 0}.primary{background:var(--action);color:white;border-color:var(--action)}button{cursor:pointer}button:hover{border-color:var(--action)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #066286;outline-offset:3px}#notice{font-size:14px;color:#126a4b}footer{font-size:12px;color:var(--muted);margin-top:24px}#empty{padding:24px;border:1px dashed var(--line);border-radius:12px}[hidden]{display:none!important}@media(max-width:699px){body{padding:20px}header{grid-template-columns:1fr}header svg{display:none}h1{font-size:28px}main{grid-template-columns:1fr}.card{grid-template-columns:40px 1fr;padding:16px}.avatar{height:40px}.card button{grid-column:2;justify-self:start}}
</style><body><header><div><span class="eyebrow">HOME PROJECT / FICTIONAL DIRECTORY</span><h1>Find the right help for home</h1><p>Compare the details, then build a shortlist for a garden project.</p></div><svg viewBox="0 0 180 120" aria-hidden="true"><path d="M20 66 84 16l64 50v45H20z" fill="#e0f4fe"/><path d="m9 68 75-58 75 58" fill="none" stroke="#0175a3" stroke-width="5"/><path d="M65 110V70h38v40" fill="#fff" stroke="#066286" stroke-width="3"/><circle cx="146" cy="80" r="24" fill="#b0eacb"/><path d="M146 80v35" stroke="#126a4b" stroke-width="4"/></svg></header><div class="filters"><label>Project type <select id="category"><option value="all">All garden services</option><option value="design">Garden design</option><option value="care">Garden care</option></select></label><label><input id="available" type="checkbox">Available this week</label><span id="count" class="meta" aria-live="polite"></span></div><main><section aria-label="Service providers"><div id="cards" class="cards"></div><div id="empty" hidden><h2>No matching services</h2><p>Try a different project type or include later availability.</p><button id="reset">Reset filters</button></div></section><aside><h2>Project shortlist</h2><p class="meta">Saved only while this preview is open.</p><ul id="saved"></ul><p id="savedEmpty">Save a provider to compare your options.</p><button class="primary" id="review">Review shortlist</button><p id="notice" role="status"></p></aside></main><footer>Original HTML study using documented Thumbprint v2 primitives. System font fallback; no Thumbtack service, ratings or contact request.</footer><script>
const providers=[{id:'fern',name:'Fern & Field',type:'design',description:'Planting plans for small outdoor spaces.',timing:'This week',available:true,initials:'FF'},{id:'grove',name:'Grove Garden Care',type:'care',description:'Seasonal pruning, planting and routine care.',timing:'Next week',available:false,initials:'GG'},{id:'yard',name:'Yard Workshop',type:'design',description:'Practical layouts for shared courtyards.',timing:'This week',available:true,initials:'YW'}];const chosen=new Set();const $=id=>document.getElementById(id);
function render(){const shown=providers.filter(p=>($('category').value==='all'||p.type===$('category').value)&&(!$('available').checked||p.available));$('cards').replaceChildren(...shown.map(p=>{const card=document.createElement('article');card.className='card';card.innerHTML=`<span class="avatar" aria-hidden="true">${p.initials}</span><div><h2>${p.name}</h2><p>${p.description}</p><span class="badge">${p.timing}</span></div><button aria-pressed="${chosen.has(p.id)}" aria-label="${chosen.has(p.id)?'Remove':'Save'} ${p.name}">${chosen.has(p.id)?'Saved':'Save'}</button>`;card.querySelector('button').onclick=()=>{chosen.has(p.id)?chosen.delete(p.id):chosen.add(p.id);$('notice').textContent='';render()};return card}));$('count').textContent=`${shown.length} of ${providers.length} sample providers`;$('empty').hidden=shown.length>0;$('saved').replaceChildren(...providers.filter(p=>chosen.has(p.id)).map(p=>{const li=document.createElement('li');li.textContent=p.name;return li}));$('savedEmpty').hidden=chosen.size>0;}
$('category').onchange=render;$('available').onchange=render;$('reset').onclick=()=>{$('category').value='all';$('available').checked=false;render()};$('review').onclick=()=>{$('notice').textContent=chosen.size?`Shortlist ready: ${chosen.size} provider${chosen.size===1?'':'s'}. No contact request has been sent.`:'Save at least one provider first.'};render();
</script></body></html>