Конвейер сборки для изоляции внешних дизайн-навыков Claude в производственном коде
TuBrief 편집팀
2026년 9월 11일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
Для разработчика, создающего полнофункциональный сервис в одиночку без дизайнера, документация по внешним дизайн-навыкам выглядит привлекательно. Кажется, что если взять найденный в Твиттере или на Гитхабе промпт дизайн-системы на 5000 строк и вставить его в системные инструкции Claude, интерфейс станет аккуратным.
На практике получается ровно наоборот. Сразу после отправки первого сообщения появляется предупреждение о лимите токенов, а время ожидания ответа API бесконечно растет. Код, выданный моделью, содержит неопознанные инлайн-стили в компонентах или импортирует модуль Framer Motion, который никогда не устанавливался в проект. В итоге вы вручную исправляете сломанный интерфейс до рассвета, а затем откатываетесь к исходному базовому шаблону shadcn/ui.
Проблема не в эстетическом чувстве модели. Причиной является сам подход, при котором неструктурированный текст в маркдауне целиком сбрасывается в системный промпт. Необходимо преобразовать описание стилей на естественном языке в машиночитаемый спецификатор токенов и построить конвейер, который выполняет изоляционное тестирование сгенерированного моделью кода до того, как он попадет в производственные файлы.
Если скопировать маркдаун дизайн-системы целиком в промпт, это приведет к серьезной растрате токенов. Эстетические эпитеты вроде «глубокий военно-морской цвет, внушающий пользователю доверие», совершенно бесполезны для генерации макета. Подобные предложения внутри языковой модели расходуют вычислительные ресурсы, которые должны идти на поддержание интерфейсов TypeScript или логики валидации.
Следует отсечь описания на естественном языке и пересобрать системный промпт в виде объекта JSON в формате W3C Design Tokens Community Group (DTCG). Остаются только цвета, отступы и радиусы скругления.
`json
{
"color": {
"background": {
"surface": { "type": "color" },
"canvas": { "type": "color" }
},
"action": {
"primary": { "type": "color" },
"primary-hover": { "type": "color" }
}
},
"spacing": {
"compact": { "type": "dimension" },
"comfortable": { "type": "dimension" }
},
"radius": {
"md": { "type": "dimension" }
}
}
`
Формализованную спецификацию токенов объединяют с кэшированием промптов Anthropic (Prompt Caching). Базовые токены и роль системы фиксируются в виде блока с параметром cache_control: { type: "ephemeral" }.
`typescript
import Anthropic from "@anthropic-ai/sdk";
const anthropic = new Anthropic();
export async function requestComponentGeneration(componentBrief: string) {
return await anthropic.messages.create({
model: "claude-3-5-sonnet-20241022",
max_tokens: 4096,
system: [
{
type: "text",
text: Генератор компонентов Next.js и Tailwind CSS. Используйте только классы, определенные в спецификации токенов DTCG ниже, и не выводите инлайн-стили (атрибут style). [DTCG_TOKENS_JSON_DATA],
cache_control: { type: "ephemeral" },
},
],
messages: [
{
role: "user",
content: componentBrief,
},
],
});
}
`
Удаление текстовой документации сокращает размер промпта примерно с 10 000 токенов до уровня 1200 токенов. Согласно документации Anthropic, за чтение кэша промпта взимается всего 10% от базовой стоимости входных токенов, поэтому затраты на API при повторных вызовах снижаются более чем на 70%.
При внедрении внешних навыков Claude нередко скрытно добавляет произвольные значения вроде style={{ marginTop: '13px' }}. Также активно генерируются произвольные классы в квадратных скобках (w-[342px]). Такой код постепенно разрушает глобальную систему стилей.
Плагины eslint-plugin-react и eslint-plugin-tailwindcss подключаются к Flat Config в файле eslint.config.mjs для отсеивания на этапе сборки.
`javascript
import reactPlugin from "eslint-plugin-react";
import tailwindPlugin from "eslint-plugin-tailwindcss";
export default [
{
files: ["**/.{ts,tsx}"],
plugins: {
react: reactPlugin,
tailwindcss: tailwindPlugin,
},
settings: {
tailwindcss: {
callees: ["cn", "cva"],
config: "./tailwind.config.ts",
},
},
rules: {
"react/forbid-dom-props": [
"error",
{
forbid: [
{
propName: "style",
message: "Инлайн-стили не допускаются. Используйте указанные утилиты Tailwind.",
},
],
},
],
"tailwindcss/no-arbitrary-value": "error",
"tailwindcss/no-custom-classname": [
"error",
{
whitelist: ["animate-."],
},
],
},
},
];
`
Извлеченные токены маппятся в theme.extend внутри tailwind.config.ts. Перезапись базовой палитры нарушит цвета, на которые ссылаются внутренние примитивы shadcn/ui.
`typescript
import type { Config } from "tailwindcss";
import themeTokens from "./build/tailwind/theme.json";
const config: Config = {
content: ["./src/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
surface: themeTokens.color.background.surface,
canvas: themeTokens.color.background.canvas,
action: {
primary: themeTokens.color.action.primary,
"primary-hover": themeTokens.color.action["primary-hover"],
},
},
borderRadius: {
token: themeTokens.radius.md,
},
},
},
plugins: [require("tailwindcss-animate")],
};
export default config;
`
Интерактивные элементы изолируются через варианты Class Variance Authority (CVA). Прямое вмешательство в примитивы Radix UI удаляет атрибуты дерева доступности (ARIA).
`typescript
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-token text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-action-primary text-white hover:bg-action-hover active:scale-[0.98]",
secondary: "bg-surface text-foreground hover:bg-surface/80",
ghost: "hover:bg-surface text-foreground",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-8 px-3 text-xs",
lg: "h-12 px-8 text-base",
},
motion: {
subtle: "transition-all duration-150 ease-out",
expressive: "transition-all duration-300 cubic-bezier(0.16, 1, 0.3, 1)",
},
},
defaultVariants: {
variant: "default",
size: "default",
motion: "subtle",
},
}
);
export interface ActionButtonProps
extends React.ButtonHTMLAttributes,
VariantProps {
asChild?: boolean;
}
export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
({ className, variant, size, motion, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, motion, className }))}
ref={ref}
{...props}
/>
);
}
);
ActionButton.displayName = "ActionButton";
`
При запросе эффектной анимации Claude по привычке импортирует Framer Motion. Согласно данным Bundlephobia, Framer Motion занимает около 60 КБ даже после сжатия Gzip. Добавление 60 КБ ради движения пары кнопок негативно сказывается на показателе LCP, отражающем начальную загрузку.
В системный промпт закладывается запрет на импорт сторонних библиотек с требованием использовать исключительно свойства потока композитора браузера (Compositor Thread).
`typescript
// Не рекомендуется: вызывает повторный пересчет макета в главном потоке
//
// Рекомендуется: обрабатывается в потоке GPU-композитора
`
Геометрические свойства, такие как top, left, width и height, требуют пересчета дерева макета на каждом кадре. В то же время утилита transform-gpu и opacity обрабатываются на независимом слое GPU без прохождения через главный поток, что позволяет поддерживать плавные 60 FPS.
Эффект размытия фона (backdrop-filter: blur()) также исключается в областях прокрутки. На мобильных браузерах с низкой производительностью фильтр размытия в области видимости прокрутки пересчитывает текстуры на каждом кадре, опуская частоту обновления экрана ниже 20 FPS. Вместо размытия использование сплошного полупрозрачного альфа-канала (bg-background/80 с рамкой в 1 пиксель) позволяет предотвратить проблемы с занятостью видеопамяти.
Если напрямую отправлять сгенерированный Claude код в каталог app/ Next.js, разметка может сломаться, вызвав ошибки гидратации. Рендеринг сначала происходит в независимой среде Storybook, и только успешно прошедшие тесты компоненты объединяются с продакшеном.
Библиотека axe-playwright подключается к файлу .storybook/test-runner.js для проверки доступности на соответствие стандартам WCAG 2.1 AA.
`javascript
const { injectAxe, checkA11y } = require("axe-playwright");
module.exports = {
async preVisit(page) {
await injectAxe(page);
},
async postVisit(page) {
await page.waitForSelector("#storybook-root", { state: "attached" });
await checkA11y(page, "#storybook-root", {
detailedReport: true,
axeOptions: {
runOnly: {
type: "tag",
values: ["wcag2a", "wcag2aa"],
},
},
});
},
};
`
При сбое тестов логи ошибок отправляются обратно в Claude.
`text
[AI цикл обратной связи: промпт точной корректировки компонента]
Сгенерированный код не прошел тест доступности axe-core.
Проанализируйте логи и выведите код с исправленными дефектами при сохранении исходной структуры.
[Детали сбоя]
Нарушение: color-contrast
Сбойный узел:
Причина: Контрастность по яркости составляет 2.8:1, что ниже стандарта WCAG AA в 4.5:1.
Инструкция по устранению: Замените утилиту текста на text-foreground или text-action-primary-hover.
`
Настраивается скрипт оболочки, который создает снимки визуальной регрессии (Visual Regression) с помощью Playwright и создает ветку только после успешного прохождения всех проверок.
`typescript
import { test, expect } from "@playwright/test";
import storybookManifest from "../../storybook-static/index.json";
const stories = Object.values(storybookManifest.entries).filter(
(entry) => entry.type === "story"
);
for (const story of stories) {
test(Проверка снимка: ${story.title} - ${story.name}, async ({ page }) => {
await page.goto(/iframe.html?id=${story.id}&viewMode=story);
await page.waitForSelector("#storybook-root");
await page.waitForLoadState("networkidle");
await expect(page).toHaveScreenshot(`${story.id}.png`, {
animations: "disabled",
maxDiffPixelRatio: 0.01,
threshold: 0.2,
});
});
}
`
`bash
#!/usr/bin/env bash
set -e
COMPONENT_NAME=$1
if [ -z "$COMPONENT_NAME" ]; then
echo "Ошибка: введите имя проверяемого компонента."
exit 1
fi
echo "1. Проверка линтером"
pnpm eslint "src/components/ui/${COMPONENT_NAME}.tsx" --max-warnings=0
echo "2. Статическая сборка Storybook"
pnpm build-storybook --quiet
echo "3. Тестирование доступности Storybook CLI"
pnpm test-storybook
echo "4. Сравнение снимков визуальной регрессии Playwright"
pnpm playwright test tests/visual/component-regression.spec.ts
echo "5. Успешно: создание ветки и отправка PR"
git checkout -b "feature/ui-{COMPONENT_NAME}.tsx"
git commit -m "feat(ui): {COMPONENT_NAME}"
gh pr create --title "feat(ui): добавление ${COMPONENT_NAME}" --body "Компонент прошел проверки Storybook A11y и регрессии Playwright."
`
Вам больше не нужно открывать инструменты разработчика в браузере и подгонять отступы попиксельно при каждом нарушении интерфейса. Передача правил проверки терминальному скрипту позволяет безопасно создавать пользовательские интерфейсы в одиночку.