teardown — скилл технических иллюстраций из набора jakubkrehel/skills

· 6 мин чтения
ai-agents skills design illustration svg
📂 Исходный код на GitHub

Набор из 14 агентских скиллов для интерфейсной работы: ревью экранов и веток, типографика, цвета, доступность, вёрстка, продуктовые тексты, разбор чужих сайтов и технические иллюстрации. Ставится через Skills CLI или как плагин Claude Code.

teardown — скилл технических иллюстраций из набора jakubkrehel/skills

Набор скиллов jakubkrehel/skills от Якуба Крехела, автора журнала о дизайн-инжиниринге Interfaces, собирает агентов-помощников для интерфейсной работы: ревью экранов, типографику, цвета, доступность, вёрстку, продуктовые тексты. Большинство скиллов в наборе про то, как сделать UI лучше. teardown стоит особняком: он учит агента строить технические иллюстрации — от устройства пикселя экрана до слоёв интерфейса, от кофеварки по фотографии до сборки по CAD-модели.

Что делает скилл

teardown строит техническую иллюстрацию из объекта, текстового описания, фотографии, CAD-модели или концепции. Агент сам конструирует геометрию, проверяет отрисовку и упаковывает результат в отдельную страницу просмотра: её можно открыть в браузере, раскрасить детали и скачать чертёж в SVG, PNG или PDF.

Границы обозначены сразу. Результат объясняет и показывает, но это не производственный чертёж: ни один размер не снабжён допуском, а выдуманные размеры так и остаются выдуманными. Если человеку нужен чертёж, по которому можно изготовить деталь, скилл говорит об этом прямо и отправляет в CAD-инструмент.

Шаг первый: разобрать, что рисуем

Работа начинается не с рисования, а с анализа. Агент сначала открывает приложенные изображения и отделяет предмет от стилевого референса: перекос, блики и пожелтевшая бумага на скане принадлежат фотографии, а не чертежу. Из референса извлекаются проекция, иерархия линий, плотность и стиль подписей.

Каждая группа признаков попадает в файл evidence.md рядом с исходником чертежа. Классификация — по одному из пяти типов улик:

Улика Как с ней работать
Заданная геометрия или размеры Сохранить и указать источник
Признаки, видимые на фотографии Восстановить пропорции и пометить их как оценочные
Скрытая или неуказанная конструкция Опустить, запросить недостающий референс или пометить как иллюстративную
Выдуманный объект по запросу пользователя Спроектировать целостную сборку и пометить лист как концепцию
Понятие без физической формы: пиксели, слои, память Дать каждой идее свою деталь из тонких пластин и пометить лист как концепцию

Правило выбора простое: брать путь с минимумом домыслов, который всё ещё отвечает на запрос. Уточняющие вопросы задаются только тогда, когда ответ меняет содержимое чертежа — например, какие внутренности важны.

Шаг второй: выбрать виды

Набор видов — минимальный из тех, что отвечают на запрос. Конвенции каждого вида описаны в views-and-annotations.md, а перед заданием вектора разнесения скилл требует прочитать exploded-views.md.

Что нужно объяснить С чего начать
Как детали собираются вместе Разнесённая аксонометрия; собранный вид — на расстоянии одного переключателя
Внешняя форма одного объекта Одна параллельная проекция с врезкой деталей, где нужно
Форма и заданные размеры Выровненные ортогональные виды
Внутренний канал или стык Разрез через эту зону
Как устроена слоистая концепция: субпиксели или слои интерфейса Разнесённый стек пластин, по детали на слой; цвет заливки различает их

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

Шаг третий: одна модель на все виды

Здесь скилл требует дисциплины, знакомой любому, кто работал с CAD: все виды выводятся из одной модели, включая список деталей. Ассеты скилла — папки assets/ и scripts/ — копируются в проект, модель описывается в drawing.json, а правила моделирования собраны в geometry.md.

По умолчанию геометрия собирается утилитами из geometry-library.md: они строят меши, убирают невидимые линии и отдают результат прямо во встроенный просмотрщик. Если модель уже существует или нужны булевы разрезы, которые утилиты не умеют, подключается проекция из CAD.

Порядок построения фиксированный:

  1. Внешний силуэт и крупные объёмы.
  2. Стыки, полости и крепёж там, где детали соединяются.
  3. Функциональные детали: рёбра, прорези, уплотнения, защита кабеля.
  4. Разрешение перекрытий и уборка служебных линий.

Каждая деталь должна описывать форму, производство или сборку. Число повторов известно — ставится фактическое. Деталь мельче размера печати — она опускается вместо произвольной текстуры. Как только основные объёмы существуют, геометрию сразу прогоняют через быструю проверку из verification.md: плавающие контакты, заблокированные отверстия и несовпадающие оси ловятся в модели, а не на готовом листе.

Шаги четыре–шесть: обводка, проверка, упаковка

Со встроенным просмотрщиком отрисовка линий по ролям происходит автоматически при размере бумаги, а панель цвета заполняет любую деталь оттенком её линии. Для листа с аннотациями или экспорта без просмотрщика есть отдельные правила из sheet-and-svg.md.

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

Финал — автономная страница просмотра из viewer-assets.md: она открывается без сборки и без сервера, а её скрипт проверяет и отрисовку, и байты каждого скачиваемого файла — геометрию, линии и цвета. Для встраивания в интерфейс проекта есть preview-page.md.

Типичные проблемы и их исправление

SKILL.md заканчивается таблицей самопроверки «заметили — исправьте». Несколько показательных строк:

Что заметили Как исправить
Рёбра просвечивают через каждую поверхность Сначала решить видимость, потом добавлять детали
Число рёбер или отверстий разное на разных видах Генерировать оба вида из одной модели и одной описи деталей
Разнесённые детали похожи на несвязанные плавающие объекты Пересмотреть исходные позиции и траектории разнесения
Токарная поверхность покрыта концентрическими полосами Задать lathe параметр creaseAngle или включить опцию lines у loft
Круг под крутым углом с «уголками» на концах эллипса Увеличить число сегментов: рендерер скругляет только вершины с поворотом меньше 35°
Титульный блок заявляет масштаб, которого вид не сохраняет Писать NTS или честно вычислить и проверить физический масштаб вывода

Установка и соседи по набору

Установка через Skills CLI:

npx skills add jakubkrehel/skills

Для Claude Code есть свой путь:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

teardown работает в связке с соседями: текст на листах ведёт better-typography, палитру — better-colors, доступное встраивание — better-accessibility, окружение страницы — better-layout. Всего в наборе 14 скиллов — от общего ревью интерфейса до стресс-тестов компонентов.

Кому полезно

  • Техническим писателям и авторам документации — иллюстрации «как это устроено» без CAD и векторных редакторов.
  • Дизайн-инженерам — разнесённые схемы, разрезы и врезки деталей по фото или модели.
  • Авторам обучающих материалов — наглядность для невидимых концепций: субпиксели, слои интерфейса, устройства памяти.
  • Всем, кто проектирует агентские скиллы — как образец дисциплины: отдельный этап улик, одна модель на все виды, проверка рендера вместо проверки кода.

Ссылки

Источник: https://github.com/jakubkrehel/skills/blob/main/skills/teardown/SKILL.md

Похожие материалы