Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
بالنسبة للمطور المستقل الذي يقوم بكل شيء بمفرده بدءاً من التخطيط وحتى النشر، تبدو أدوات مثل Cursor أو Claude Code وكأنها منقذة. فبعد كتابة بضع أسطر من الأوامر (Prompts)، تحصل على صفحة ويب مقنعة في غضون 10 دقائق فقط.
المشكلة تكمن فيما بعد ذلك. فعندما تنقر على زر النشر وتنظر إلى الشاشة، ينتابك شعور مألوف: أزرار ذات تدرجات لونية بنفسجية، خط Inter، وتخطيط بطاقات ثلاثي الأعمدة في المنتصف تماماً. تنبعث رائحة قالب مألوف من مكان ما. تبدو الصفحة مرتبة من الظاهر، لكنها لا تؤدي إلى عمليات دفع أو تسجيل من قبل المستخدمين. يمكن للناس اكتشاف الصفحات المصنوعة في المصنع بذكاء خارق ويغلقون النافذة فوراً.
تعمل نماذج اللغة الكبيرة (LLMs) بناءً على المتوسطات الإحصائية. فإذا لم تقم بتزويدها بقواعد محددة، فإنها تعود إلى الإعدادات الافتراضية الأكثر شيوعاً على الويب مثل إعدادات Tailwind الافتراضية وقيم Shadcn UI الافتراضية. اللحظة التي تعطي فيها أمراً مثل "أنشئ لي صفحة هبوط أنيقة وعصرية"، يبدأ الذكاء الاصطناعي في إخراج قيم بكسل مضمنة مجهولة المصدر مثل w-[320px] و top-[117px] مما يؤدي إلى تخريب التخطيط.
محاولة حل هذه المشكلة عن طريق تعديل الأوامر مراراً وتكراراً أمر مرهق. يجب عليك فرض قواعد العلامة التجارية في كل مرة يتم فيها إنشاء الكود، وبناء خط管道 يمنع ماديًا الأكواد المخالفة في مرحلة الالتزام (Commit).
يقرأ Cursor ملف .cursor/rules/*.mdc، ويقرأ Claude Code ملف CLAUDE.md، بينما تقرأ الأدوات مفتوحة المصدر ملف AGENTS.md. إذا قمت بتعريف رموز تصميم العلامة التجارية في هذا الملف، فلن يتمكن الذكاء الاصطناعي من استخدام أنماط عشوائية بدءاً من مرحلة إنشاء الكود.
إذا تجاوز ملف القواعد 500 سطر، ستزداد تكلفة السياق المطلوبة للقراءة في كل جلسة، كما ستنخفض نسبة التزام النموذج بالتعليمات. يجب كتابة الملف بوضوح في حدود 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`
إدخال هذه القواعد يقلل بشكل ملحوظ من تكرار إدخال الذكاء الاصطناعي للقيم العشوائية بين الأقواس المربعة أو أكواد الـ Hex بشكل مباشر.
الأوامر وحدها لا تكفي. غالباً ما يتجاهل الذكاء الاصطناعي القواعد ويقوم بتضمين قيم بكسل مضمنة سراً. من خلال ربط Stylelint وخطافات Git Pre-commit، يمكنك قطع الطريق أمام دخول الأنماط المكتوبة يدوياً إلى المستودع.
قم بتثبيت الأدوات وتهيئة Husky.
`bash
pnpm add -D husky lint-staged stylelint stylelint-declaration-strict-value
npx husky init
`
قم بإنشاء ملف stylelint.config.mjs في جذر المشروع. هذا هو إعداد يطلق خطأ بناء (Build Error) إذا تم إدخال أي أكواد ألوان أو قيم بكسل عشوائية.
`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;
`
أضف إعدادات lint-staged إلى ملف package.json.
`json
{
"lint-staged": {
"*.{css,scss,tsx,jsx}": [
"stylelint --fix",
"eslint --max-warnings=0"
]
}
}
`
سجل السطر التالي في ملف .husky/pre-commit.
`bash
npx lint-staged
`
الآن، في كل مرة تقوم فيها بـ git commit، يتم إجراء تحليل ساكن للكود المُجهز (Staged). إذا كان هناك كود مثل 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 مناطق واجهة مستخدم رئيسية (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 في الطرفية، يمكنك اكتشاف التخطيطات المحطمة في واجهات سطح المكتب والهواتف المحمولة في غضون دقيقة واحدة. يمكنك الاستغناء عن مهمة فحص الشاشات يدوياً وتعديل أحجامها وتعب العينين.
من خلال امتلاك بنية تتحكم في مدخلات الذكاء الاصطناعي باستخدام ملفات القواعد، وتمنع تدفق الأنماط الخاطئة باستخدام خطافات Git، وتتحقق من تحطم الشاشات باستخدام Playwright، يمكنك الحفاظ على اتساق التصميم حتى في مشاريع المطورين الأفراد.