Claude Opus 4 уже привлекла немало внимания за короткое время, и в некотором смысле я чувствую, что я немного медленно на вечеринке. Я читал очень подробный разрыв, который Федерико Вишиччи сделал, используя Claude 4 в Интернете, чтобы разобраться в своих электронных письмах. Я знаю, что ему нравятся детали, но я немного обеспокоен тем, что он поддерживал 200-линии, который он поддерживал. (Позже я понял, что Клод пишет много заметок в своем собственном файле.)
Я хотел использовать Claude Opus 4 с Claude Code (который я попробовал в прошлом месяце) и имел конкретное представление о том, к чему я хотел применить свои агентские способности. Я работал с приложением Rails, которое в основном занималось управлением CRUD, но я хотел применить Bootstrap CSS для улучшения его стиля. Для меня это хороший пример подходящей работы для большой языковой модели (LLM) — если CSS «неправильно», не должно быть смертельных случаев.
Что мне понравилось в Claude Code, так это то, что он поддерживает поток, отдельный от вашего IDE, поэтому вы не рассматриваете файл кода по файлу. Поскольку стиль должен применяться к ряду файлов представления независимо от их функции, это имеет смысл.
Я надеялся дать минимальное руководство, которое я мог разумно (потому что я человек) и просто применить дополнительные детали для улучшения областей в зависимости от необходимости. Когда я использую инструменты LLM, я, конечно, не позволяю ему разбудить свой код, но чтобы показать агентские способности, мне придется «просто отпустить», то есть пусть он работает над проектом в целом.
Примечание. Поскольку Claude Code работает в вашем терминале, я использую Warp — мое терминальное приложение по выбору — для остальной части этой статьи.
Настройка проекта
Во -первых, я получу старую версию проекта Rails Crud и помесчу его в свежий каталог для Клода. Проект предназначен для предстоящей игры, которую я разрабатываю, и используется для организации разговоров, которые могут сделать различные персонажи.
Первоначально я был озадачен тем, как загрузить код на основе конкретного коммита в Bitbucket, но, к счастью, Stack Overflow показал простой шаблон отдыха, который сработал:
Затем я развел это в свой собственный каталог:
Запустив сервер Rails, я проверил состояние моего старого примера кода:
Так что мне нужна помощь в стиле.
Настройка кода Claude
Теперь давайте получим последний код Клода. Я уже установил его один раз, но я запустил это в командной строке, чтобы убедиться, что она актуальна:
> npm install -g @anpropic-AI/claude-code 1> npm install -g @anpropic-AI/claude-code
Важно до начала было убедиться, что она началась с обновленной модели Opus 4:
> Claude-модель Claude-Opus-4-20250514 1> Claude-Модель Claude-Opus-4-20250514
Как и прежде, он спрашивает, могу ли я доверять коду в папке, что, конечно, я делаю. Затем мы получаем важную ссылку:
Поэтому я знаю, что у нас есть правильная модель, и она смотрит на правильный проект.
Я также хочу, чтобы он создал быстрый файл (claude.md), чтобы я мог сделать очень важную и таинственную инженерию:
На самом деле, когда он выпускает эту команду, она занята анализом моего кода.
Он продолжал обновлять и вносить изменения в список «TODO» от своего посвящения, чтобы отслеживать то, что я просил, а также выполнять задачи для себя во время сканирования:
На самом деле, он просил довольно много раз, прежде чем просто написать файл. В отличие от большинства разработчиков, он определенно вытягивается в отношении разрешения — в отличие от прощения о прощении позже.
Поскольку Claude.md является файлом разметки, Warp позволил мне просмотреть его на другой вкладке (не работает Claude Code):
Он записывает много основных отношений и понимает настройку Rails. Идея состоит в том, что он может проверить их перед началом новых задач.
Оказывается, я могу использовать ключ #, чтобы дать Клоду инструкцию, которую он автоматически включит в файл приглашения. В первый раз, когда я сделал это (а затем впоследствии), он проверил, в каком контексте он должен проверить:
Это показывает, что Claude 4 отличается между местными настройками проекта и глобальными настройками.
Инструктирование Клода
Я начал добавлять инструкции с ключом #, но забыл, что это также немедленно будет действием. Поэтому, рассказав это, что я имел в виду под начальной загрузкой (с URL -адресом в начальную загрузку 5), я только дошел до добавления:
- Применить Bootstrap Color утилиты для улучшения визуальной иерархии
- Кнопки обновления с классами кнопок Bootstrap
… до того, как агентские способности потратили в полной мере. Я собирался начать с ограничения Клода редактированием только файлов в каталоге представлений, но он уже знал все это.
Он предложил кучу изменений в основной макет, что, как я признаю, я не совсем понял, а также написал какой -то код шаблона:
Когда я позволю ему внести изменения, боковая панель была стилизована гораздо более хорошим образом:
Итак, я думал, что позволю этому продолжить. Но для меня это было самое важное:
Он понял, что часть первой страницы имела две отдельные функциональные части. Это не просто предположило, что это была страница и относиться ко всему одинаково. Риск заключался в том, что он немного потерялся с кодом шаблона Ruby, но обычно это оставляло это в покое. На самом деле, это отличная работа, делая дисплей акцентией, но только путем расширения некоторых из моих собственных идей.
Между тем, он показал мне каждый файл, который он изменился, хотя я мог бы просто позволить ему продолжить себя.
Теперь он приближался к разделу кода, который я отобрал здесь, поэтому я могу показать вам, как он обновил ссылки на кнопки:
К счастью (для этого поста) он не превратил в кнопки «Создать ссылки», поэтому я получу возможность снова наказать его. Я позволил этому закончить подъем.
В конце он суммировал все изменения, которые он внесла для всех представлений в приложении, и заявил: «Приложение теперь имеет современный, последовательный дизайн Bootstrap 5.3 с улучшенной визуальной иерархией, лучшим интервалом и профессиональным стилем».
Однако, когда я попросил последнее изменение, я получил страшное сообщение:
Так что я взорвал свои 6 долларов. Я накормил свою зависимость, продолжая финансировать свою учетную запись, чтобы закончить работу. И после того, как он взял больше денег, это продолжалось. Посмотрите, как это приняло мое описание нового пути и правильно его кодифицировал:
Он отредактировал пять других файлов, в том числе тот, который мы смотрим:
Здесь мы видим, что это действительно правильно. Также обратите внимание на маленькие значки, которые он добавил к боковой панели:
Заключение
Это первый раз, когда я полностью недооценил возможности LLM, прежде чем использовать его. В этой задаче это действительно не поставило ногу, хотя я ошибся в том, чтобы не наложить на нее правильные ограничения. Клод полностью понял этот простой интерфейс CRUD от Rails, а также мои намерения.
Это правда сказать, что это был стиль «просто», но Клоду пришлось перемещать довольно много шаблонного кода в встроенных рубиновых (ERB) файлах. До сих пор это самый премиальный опыт, который у меня был с LLM — и по цене эспрессо в Лондоне. И с Клодом, выполняющим работу, возможно, мне даже не нужен этот кофе.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Дэвид был лондонским профессиональным разработчиком программного обеспечения в Oracle Corp. и British Telecom, а также консультантом, помогающим командам работать более гибким образом. Он написал книгу по дизайну пользовательского интерфейса и с тех пор пишет технические статьи …. Подробнее от Дэвида Истмана
