बाहरी Claude डिज़ाइन स्किल को प्रोडक्शन कोड में अलग रखने वाली बिल्ड पाइपलाइन
TuBrief 편집팀
2026년 9월 11일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
बिना किसी डिज़ाइनर के अकेले फुल-स्टैक सर्विस बनाने वाले डेवलपर के लिए बाहरी डिज़ाइन स्किल दस्तावेज़ आकर्षक होते हैं। ट्विटर या गिटहब से उठाया गया 5,000 लाइनों का डिज़ाइन सिस्टम प्रॉम्प्ट कॉपी करके Claude के सिस्टम निर्देशों में डाल देने से स्क्रीन साफ-सुथरी लगने लगती है।
वास्तव में इसके ठीक विपरीत परिणाम मिलते हैं। पहला संदेश भेजते ही टोकन लिमिट की चेतावनी आ जाती है, और API रिस्पांस का इंतज़ार करने का समय लगातार बढ़ता जाता है। मॉडल द्वारा आउटपुट किया गया कोड कंपोनेंट्स में अज्ञात इनलाइन स्टाइल डाल देता है या ऐसे Framer Motion मॉड्यूल को कॉल करता है जो प्रोजेक्ट में कभी इंस्टॉल ही नहीं किए गए थे। अंत में, टूटे हुए UI को सुबह तक मैन्युअल रूप से ठीक करने के बाद, मौजूदा shadcn/ui डिफ़ॉल्ट टेम्पलेट पर वापस लौटना पड़ता है.
समस्या मॉडल की सौंदर्य संबंधी समझ की नहीं है। अनस्ट्रक्चर्ड प्लेन-टेक्स्ट मार्कडाउन को सीधे सिस्टम प्रॉम्प्ट में डम्प करने का तरीका ही इसका कारण है। प्राकृतिक भाषा में दिए गए स्टाइल विवरण को मशीन-पढ़ाने योग्य टोकन विनिर्देशों में बदलना होगा, और एक ऐसी पाइपलाइन बनानी होगी जो मॉडल द्वारा जनरेट किए गए कोड को प्रोडक्शन फाइलों तक पहुँचने से पहले आइसोलेशन टेस्ट से गुजार सके।
डिज़ाइन सिस्टम मार्कडाउन को प्रॉम्प्ट में पूरी तरह से पेस्ट करने से टोकन की भारी बर्बादी होती है। "उपयोगकर्ता को विश्वास दिलाने वाला गहरा नेवी" जैसे सौंदर्य संबंधी विशेषण लेआउट जनरेट करने में किसी काम के नहीं होते। इस तरह के वाक्य भाषा मॉडल के भीतर उन गणना संसाधनों को नष्ट करते हैं जिन्हें वास्तव में TypeScript इंटरफेस या वैलिडेशन लॉजिक के लिए इस्तेमाल किया जाना चाहिए था।
प्राकृतिक भाषा के विवरण को हटाकर सिस्टम प्रॉम्प्ट को W3C Design Tokens Community Group (DTCG) विनिर्देश के JSON ऑब्जेक्ट के साथ पुनर्गठित करें। केवल रंग, स्पेसिंग और बॉर्डर रेडियस को ही रखें।
`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 टोकन से घटकर 1,200 टोकन के स्तर पर आ जाता है। एंथ्रोपिक के दस्तावेजों के आधार पर, प्रॉम्प्ट कैश रीडिंग के लिए मूल इनपुट टोकन शुल्क का केवल 10% चार्ज किया जाता है, जिससे बार-बार कॉल करने पर API लागत में 70% से अधिक की कमी आती है।
बाहरी स्किल को इंजेक्ट करने पर, Claude अक्सर चुपके से style={{ marginTop: '13px' }} जैसे मनमाने मान जोड़ देता है। यह ब्रैकेट आर्बिट्रेरी क्लास (w-[342px]) को भी मनमाने ढंग से जेनरेट करता है। इस तरह का कोड ग्लोबल स्टाइल सिस्टम को धीरे-धीरे नष्ट कर देता है।
बिल्ड चरण के दौरान इन्हें फ़िल्टर करने के लिए eslint.config.mjs के फ्लैट कॉन्फ़िगरेशन में eslint-plugin-react और eslint-plugin-tailwindcss को लागू करें।
`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-."],
},
],
},
},
];
`
निकाले गए टोकन को tailwind.config.ts के theme.extend पर मैप करें। यदि आप डिफ़ॉल्ट पैलेट को ओवरराइट करते हैं, तो 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 माप के आधार पर, Gzip संपीड़न के बाद भी Framer Motion लगभग 60KB लेता है। कुछ बटन हिलाने के लिए 60KB जोड़ने से प्रारंभिक लोडिंग मीट्रिक, LCP, प्रभावित होता है।
सिस्टम प्रॉम्प्ट में थर्ड-पार्टी लाइब्रेरी इम्पोर्ट पर प्रतिबंध लगाएं और केवल ब्राउज़र कंपोजिट थ्रेड (Compositor Thread) के लिए विशिष्ट प्रॉपर्टीज़ का उपयोग करने पर जोर दें।
`typescript
// 메인 스레드에서 레이아웃 리플로우를 일으키는 비권장 형태
//
// GPU 합성기 스레드에서 처리하는 권장 형태
`
top, left, width, और height जैसी ज्यामितीय प्रॉपर्टीज़ हर फ्रेम में लेआउट ट्री की दोबारा गणना करती हैं। इसके विपरीत, transform-gpu यूटिलिटी और opacity मुख्य थ्रेड से गुजरे बिना GPU स्वतंत्र परत में संसाधित होती हैं, जिससे 60 FPS सुचारू रूप से बना रहता है।
स्क्रॉल क्षेत्र से बैकग्राउंड ब्लर प्रभाव (backdrop-filter: blur()) को भी हटा दिया जाता है। कम-विशिष्टता वाले मोबाइल ब्राउज़र में स्क्रॉल व्यूपोर्ट के भीतर ब्लर फ़िल्टर हर फ्रेम में टेक्सचर की फिर से गणना करता है, जिससे स्क्रीन रिफ्रेश दर 20 FPS से नीचे गिर जाती है। ब्लर के बजाय सॉलिड सेमी-ट्रांसपेरेंट अल्फा चैनल (bg-background/80 और 1px बॉर्डर) का उपयोग करने से वीडियो मेमोरी佔유 (ओक्यूपेंसी) की समस्या को रोका जा सकता है।
यदि Claude द्वारा जनरेट किए गए कोड को सीधे Next.js app/ निर्देशिका में धकेल दिया जाए, तो लेआउट टूट जाएगा और हाइड्रेशन त्रुटियां होंगी। पहले Storybook स्वतंत्र वातावरण में रेंडर करें और केवल उन कंपोनेंट्स को मर्ज करें जो परीक्षण पास कर चुके हैं।
WCAG 2.1 AA मानकों के आधार पर एक्सेसिबिलिटी की जांच करने के लिए .storybook/test-runner.js में axe-playwright जोड़ें।
`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 회귀 검사를 통과한 컴포넌트입니다."
`
जब भी स्क्रीन खराब हो, तो ब्राउज़र डेवलपर टूल चालू करके मार्जिन को कुछ पिक्सेल तक ट्विक करने की कोई आवश्यकता नहीं है। सत्यापन नियमों को टर्मिनल स्क्रिप्ट पर पास करके, आप अकेले भी सुरक्षित रूप से UI बना सकते हैं।