Файл, а не промт
Ваші рішення про дизайн — записані й обовʼязкові.
Захопіть референс і власну сторінку. Оберіть, що позичити, що лишити своїм, а чого не можна торкатись. Агент отримує версійований контракт — а те, що він відрендерив, вимірюється проти нього.
Локально · Chrome · Codex · Claude Code · Cursor
Контракт змін — checkout
Заголовоккегль і насиченість, з референсаBorrow
Карткавнутрішні відступи, як у вашій базіKeep
Головна кнопкапозиція — регресія тут є помилкоюLock
Посилання в навігаціїколір, як у вашій базіKeep
Головна кнопкатло на hover, з референсаBorrow
Затверджено людиноюдвічі доповнено · жодного разу не переписано
Проблема
Агенту можна описати функцію. Дизайн — не можна.
Ви описуєте, що хочете; приходить щось; воно неправильне так, що ви це бачите й не можете назвати; і наступний промт стає гіршою версією першого.
Що ви надсилаєте зараз
«Зроби преміальніше. Чистіше. Ну, як у Stripe».
Тут немає чого перевірити. Агент вгадує, ви реагуєте на здогад, і ніхто з вас не може показати пальцем на те, про що домовились.
Що надсилає RefKit
Позич цей заголовок. Лиши цю картку. Ніколи не рухай цю кнопку.
Пʼять пунктів, кожен називає один елемент і одну вимірювану властивість. Той самий файл вирішує, чи результат пройшов.
Референс → ваша сторінка
Ви показуєте дві сторінки. Ви вирішуєте три речі.
Одне захоплення дизайну, який вам подобається, друге — сторінки, яку ви змінюєте. Кожне значення читається з того, що браузер справді відрендерив: включно з тим, який колір виконує роботу основного, і наскільки строго сторінка тримає власну сітку.
Пластина 1 — референс
Пластина 2 — ваша сторінка
13px · поза сіткою 8px
BorrowВзяти з референсапромах — це замовлена зміна, яка не сталася
KeepЛишити своє як євідхилення — це зауваження з оцінкою впевненості
LockЦього не чіпатирегресія тут — помилка
Не малюнок
Панель на справжній сторінці.
Усе інше на цій сторінці намальовано — пластини, пункти, прогін. Це — ні. Це панель захоплення поруч із тестовою сторінкою, яка лежить у репозиторії, і кожне значення в ній прочитане з тієї сторінки: палітра з хекс-кодами, скільки відступів лягло на сітку, знайдена шкала кеглів і те, які стани взаємодії оголошено в CSS.
Це кадр, а не запис. Цикл нижче тут описаний, а не знятий — коли зʼявиться прогін, вартий слова «доказ», він замінить це.
Передача
Він лягає у ваш репозиторій, а не в чат.
Контракт — це версійований файл у вашій гілці. Він переживає сесію, зʼявляється в диффі, як будь-яке інше рішення, і його можна доповнити, але не переписати: кожна версія називає ту, яку замінила, тож правка після затвердження стає видимою.
Агент читає його перед тим, як написати перший рядок інтерфейсу. Codex, Claude Code, Cursor, Gemini CLI і Windsurf реєструються однією командою, а ті, яких у вас немає, пропускаються.
npx -y refkit-mcp install
Потрібен Node 20.19 або новіший. Кожен конфіг перед записом зберігається копією, чіпається лише власний запис, а uninstall прибирає рівно те, що додав — додайте --dry-run, щоб спершу побачити план.
Перевірка
Перестаньте питати, чи агент зрозумів.
Захопіть сторінку ще раз. Кожен затверджений пункт вимірюється проти того, що справді відрендерилось. Порушення несуть числа, а не прикметники — а те, що виміряти не вдалося, каже про це, замість того щоб пройти.
Прогін перевірки · 5 пунктів · контракт v33 порушення
Головна кнопка вийшла за межі замкненої зони+62px
Насиченість заголовка не та, що позичено640 → 700
Відступи картки відійшли від бази24px → 20px
Колір посилання в навігації втримався#3157ff
Hover кнопки оголошено в CSS, але не відрендереноневідомо
після виправлення агентом і згоди людини4 / 5 перевірено · 1 невідоме
Останні два рядки варто прочитати двічі. Захоплення, яке не покрило елемент, повертає невідомо — ніколи не «пройдено», — а штамп вище відмовляється округлити чотири виміри до пʼяти. Інструмент, який мовчить про те, куди він не дивився, — це інструмент, чия зелена галочка нічого не варта.
Порівняно з тим, що ви робите зараз
Скриншот показує. Промт просить. Дифф повідомляє. Контракт вирішує.
| Скриншот | Промт | Візуальні регресії | RefKit | |
|---|---|---|---|---|
| Що він несе | Як воно виглядало | На що ви сподівались | Що зрушило | Що було вирішено |
| Коли написаний | Після зміни | До неї, словами | Після зміни | До неї, значеннями |
| Що він позначає | Нічого — ви звіряєте оком | Нічого | Кожен піксель, що зрушив | Лише пункти, які затвердила людина |
| Хто це тлумачить | Агент, вільно | Агент, вільно | Ви, дифф за диффом | Ніхто — значення названі |
| Де він живе | У теці | У чаті, поки той не скінчиться | У дашборді | У вашій гілці, в диффі |
Що він відмовляється робити
Ваші залогінені сторінки лишаються вашими.
Інструмент, який читає ваш екран, заслуговує довіру тим, чого він не робить. Це тримає маніфест розширення і тести, які падають у бік заборони.
Жодного фонового захопленняНемає content script і немає host permissions. Захоплення відбувається, бо ви натиснули, на тій вкладці, на яку дивились.
Ні кукі, ні історіїОбчислені стилі та обмежений набір фактів про розкладку. Сирий HTML сторінки не збирається ніколи.
За замовчуванням нічого не йде назовніУсе лишається на вашій машині. Опційний міст говорить лише з сервером, який ви самі запустили, за токеном, який ви видали.
Ваш репозиторій — вашRefKit готує пакет змін, який застосовує людина. Він не редагує ваш код і не відкриває pull request.
Ліцензія
Apache-2.0. Кожен проєкт. Весь цикл.
RefKit — вільне програмне забезпечення з відкритим кодом. Захоплення, контракт, перевірка, згода — на будь-якій кількості проєктів, без кабінету, без ключа і без оплати.
Apache License 2.0Безкоштовно · двигун, MCP і розширення
- Весь цикл на кожному проєкті
- Використання, зміна й поширення за Apache-2.0
- Усі агенти, що у вас встановлені
- Усе локально й лишається вашим
Назва й логотип лишаються зарезервованими. Код: github.com/squadic-ai/refkit. Розширення в Chrome Web Store як unlisted; версія 0.1.3 на ревʼю. Умови використання →
Усе одним рядком
Покажіть дизайн. Змусьте довести результат.
Написати в TelegramЦе робить одна людина. Ви говоритимете саме з нею.