AI द्वारा बनाए गए लैंडिंग पेज एक जैसे क्यों दिखते हैं और इसका समाधान
TuBrief 편집팀
2026년 8월 22일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
अकेले ही प्लानिंग से लेकर डिप्लॉयमेंट तक सब कुछ संभालने वाले सोलो डेवलपर्स के लिए Cursor या Claude Code किसी मसीहा जैसे लगते हैं। कुछ लाइनें प्रॉम्प्ट में डालो और 10 मिनट में एक बेहतरीन दिखने वाली वेब पेज तैयार हो जाती है।
समस्या इसके बाद आती है। डिप्लॉय बटन दबाने और स्क्रीन देखने पर एक अजीब सा अहसास होता है - बैंगनी ग्रेडिएंट बटन, Inter फ़ॉन्ट, बिल्कुल बीच में रखा हुआ 3-कॉलम कार्ड लेआउट। कहीं-न-कहीं देखे हुए टेम्पलेट की गंध साफ महसूस होती है। बाहर से सब कुछ साफ-सुथरा लगता है, लेकिन यह उपयोगकर्ताओं को भुगतान करने या साइन अप करने के लिए प्रेरित नहीं कर पाता। लोग कारखाने में बने उत्पादों की तरह दिखने वाले इस पेज को तुरंत भांप लेते हैं और टैब बंद कर देते हैं।
LLM सांख्यिकीय औसत (statistical averages) पर काम करते हैं। यदि कोई निर्देश न दिया जाए, तो यह वेब पर सबसे आम पाए जाने वाले Tailwind डिफ़ॉल्ट प्रीसेट और Shadcn UI डिफ़ॉल्ट मानों पर वापस लौट जाते हैं। "एक साफ़-सुथरा और आकर्षक लैंडिंग पेज बनाओ" जैसी प्रॉम्प्ट देते ही, AI w-[320px], top-[117px] जैसे अजीब से इनलाइन पिक्सेल मान उगलने लगता है और लेआउट को बिगाड़ देता है।
प्रॉम्प्ट में सुधार करके इस समस्या को हल करने की कोशिश करना थका देने वाला होता है। इसके बजाय, आपको एक ऐसा पाइपलाइन बनाना होगा जो कोड जनरेट करते समय ब्रांड नियमों को लागू करे और नियमों का उल्लंघन करने वाले कोड को कमिट चरण में ही शारीरिक रूप से रोक दे।
Cursor .cursor/rules/*.mdc, Claude Code CLAUDE.md, और ओपन-सोर्स टूल्स AGENTS.md को पढ़ते हैं। यदि इन फ़ाइलों में ब्रांड डिज़ाइन टोकन परिभाषित किए जाएं, तो AI कोड जनरेशन के शुरुआती चरण से ही मनमाने स्टाइल का उपयोग नहीं कर पाएगा।
यदि नियम फ़ाइल 500 लाइनों से अधिक लंबी हो जाती है, तो प्रत्येक सत्र में पढ़ने के लिए कॉन्टेक्स्ट कॉस्ट बढ़ जाती है और मॉडल का निर्देशों का पालन करने का प्रतिशत (instruction-following rate) भी घट जाता है। इसे स्पष्ट रूप से 200 से 300 लाइनों के भीतर लिखा जाना चाहिए।
प्रोजेक्ट रूट में .cursor/rules/design-system.mdc बनाएं और उसमें निम्नलिखित सामग्री डालें:
bg-[#123456] or h-[117px].pnpm lint:style to verify token compliance before completing tasks.var(--color-bg-primary) (Tailwind: bg-brand-primary)var(--color-bg-secondary) (Tailwind: bg-brand-secondary)var(--color-text-main) (Tailwind: text-brand-main)var(--color-text-muted) (Tailwind: text-brand-muted)var(--color-accent-default) (Tailwind: bg-brand-accent)var(--space-1): 0.25rem (4px)var(--space-2): 0.5rem (8px)var(--space-4): 1.0rem (16px)var(--space-6): 1.5rem (24px)var(--space-8): 2.0rem (32px)text-brand-h1 -> Font: Inter, Weight: 700, Size: 2.5rem, Tracking: -0.02emtext-brand-body -> Font: Inter, Weight: 400, Size: 1.0rem, Leading: 1.5`
इस नियम को शामिल करने से AI द्वारा ब्रैकेट के मनमाने मानों या Hex कोड को सीधे इंजेक्ट करने की आवृत्ति काफी हद तक कम हो जाती है।
केवल प्रॉम्प्ट्स पर्याप्त नहीं हैं। AI अक्सर नियमों की अनदेखी करता है और चुपचाप इनलाइन पिक्सेल मानों को मिला देता है। Stylelint और Git Pre-commit हुक को आपस में जोड़कर, हम हार्डकोडेड स्टाइल को रिपॉजिटरी में प्रवेश करने के रास्ते को ब्लॉक कर देते हैं।
टूल्स इंस्टॉल करें और Husky को इनिशियलाइज करें।
`bash
pnpm add -D husky lint-staged stylelint stylelint-declaration-strict-value
npx husky init
`
प्रोजेक्ट रूट में stylelint.config.mjs बनाएं। यह वह कॉन्फ़िगरेशन है जो किसी भी मनमाने रंग कोड या पिक्सेल मान के आने पर बिल्ड एरर उत्पन्न करता है।
`javascript
import type { Config } from "stylelint";
export default {
plugins: ["stylelint-declaration-strict-value"],
rules: {
"scale-unlimited/declaration-strict-value": [
["/color/", "font-size", "/margin/", "/padding/"],
{
ignoreVariables: false,
ignoreFunctions: false,
ignoreKeywords: {
"": ["transparent", "inherit", "currentColor", "auto", "0"]
},
message: "Design System Violation: Hardcoded value for '{property}' is forbidden. Use CSS Design Tokens instead."
}
]
}
} satisfies Config;
`
package.json में lint-staged कॉन्फ़िगरेशन जोड़ें।
`json
{
"lint-staged": {
"*.{css,scss,tsx,jsx}": [
"stylelint --fix",
"eslint --max-warnings=0"
]
}
}
`
.husky/pre-commit फ़ाइल में नीचे दी गई एक लाइन दर्ज करें।
`bash
npx lint-staged
`
अब जब भी आप git commit चलाएंगे, यह स्टेज किए गए कोड का स्टैटिक एनालिसिस करेगा। यदि AI द्वारा मनमाने ढंग से जोड़ा गया कोई कोड जैसे margin: 17px मौजूद है, तो कमिट ही असफल हो जाएगा। आप स्टाइल सुधारने में खर्च होने वाले समय में से प्रति सप्ताह लगभग 5 घंटे बचा सकते हैं।
स्टैटिक एनालिसिस केवल टेक्स्ट नियमों की जांच करता है। तत्वों के ओवरलैप होने या मोबाइल स्क्रीन पर मेनू टूटने जैसी समस्याओं को देखने के लिए ब्राउज़र को सीधे लॉन्च करके देखना पड़ता है। चूंकि आप हर बार मैन्युअली व्यूपोर्ट को छोटा-बड़ा नहीं कर सकते, इसलिए Playwright के साथ स्नैपशॉट तुलना को स्वचालित किया जाता है।
playwright.config.ts फ़ाइल बनाएं।
`typescript
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests/visual',
snapshotPixelRatioTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0.01,
threshold: 0.2,
animations: 'disabled',
},
},
webServer: {
command: 'pnpm dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
timeout: 120 * 1000,
},
projects: [
{ name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'] } },
{ name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
],
});
`
5 मुख्य UI स्थानों को सत्यापित करने के लिए टेस्ट स्क्रिप्ट (tests/visual/landing-page.spec.ts) लिखें।
`typescript
import { test, expect } from '@playwright/test';
test.describe('Visual Regression Guardrails', () => {
test.beforeEach(async ({ page }) => {
await page.goto('http://localhost:3000');
await page.evaluate(() => document.fonts.ready);
});
test('TC1: डेस्कटॉप हीरो सेक्शन रेंडरिंग', async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
const heroSection = page.locator('section#hero');
await expect(heroSection).toBeVisible();
await expect(heroSection).toHaveScreenshot('hero-desktop.png', { maxDiffPixelRatio: 0.01 });
});
test('TC2: मोबाइल नेविगेशन मेनू व्यूपोर्ट रेंडरिंग', async ({ page }) => {
await page.setViewportSize({ width: 375, height: 812 });
const navBar = page.locator('header#main-nav');
await expect(navBar).toHaveScreenshot('nav-mobile.png');
});
test('TC3: प्राइसिंग प्लान कार्ड ग्रिड एलाइनमेंट', async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 800 });
const pricingGrid = page.locator('div#pricing-cards');
await expect(pricingGrid).toHaveScreenshot('pricing-grid.png', {
mask: [page.locator('.dynamic-price-timestamp')]
});
});
test('TC4: मुख्य CTA बटन होवर स्टेट', async ({ page }) => {
const ctaButton = page.locator('button#primary-cta');
await ctaButton.hover();
await expect(ctaButton).toHaveScreenshot('cta-button-hover.png');
});
test('TC5: लॉगिन मोडल लेआउट', async ({ page }) => {
await page.click('button#open-login-modal');
const modalDialog = page.locator('div[role="dialog"]');
await expect(modalDialog).toBeVisible();
await expect(modalDialog).toHaveScreenshot('login-modal.png');
});
});
`
package.json में कमांड रजिस्टर करें।
`json
{
"scripts": {
"test:visual": "playwright test",
"test:visual:update": "playwright test --update-snapshots"
}
}
`
टर्मिनल में केवल एक लाइन pnpm test:visual टाइप करने से डेस्कटॉप और मोबाइल व्यूपोर्ट में टूटे हुए लेआउट 1 मिनट के भीतर पकड़ में आ जाते हैं। आप स्क्रीन के आकार को मैन्युअली एडजस्ट करके आँखें फाड़कर जांच करने के झंझट से छुटकारा पा सकते हैं।
नियम फ़ाइलों के माध्यम से AI के इनपुट को नियंत्रित करने, Git हुक के साथ गलत स्टाइल के प्रवेश को रोकने, और Playwright के साथ टूटी हुई स्क्रीन की जांच करने का ढांचा तैयार करके, आप सोलो डेवलपमेंट प्रोजेक्ट्स में भी डिज़ाइन कंसिस्टेंसी (एकरूपता) बनाए रख सकते हैं।