الواجهات والتصميم

مزامنة رموز التصميم

مزامنة رموز التصميم بين Figma والكود لضمان تطابق الألوان والخطوط والمسافات.

Claude Code Cursor Windsurf

نظرة عامة

مزامنة رموز التصميم (Design Tokens) تتيح لوكيل البرمجة استخراج ومزامنة الألوان والخطوط والمسافات والظلال وغيرها من Figma إلى الكود تلقائياً. هذا يضمن تطابق تام بين ما يراه المصمم وما يبنيه المطور.

يستطيع الوكيل قراءة ملفات tokens بصيغة JSON (من Tokens Studio أو Figma Variables)، تحويلها إلى CSS custom properties أو Tailwind theme أو أي صيغة مطلوبة باستخدام Style Dictionary. كما يمكنه اكتشاف التغييرات وتحديث الكود تلقائياً.

أساسية لفرق التصميم والتطوير التي تريد مصدر حقيقة واحد لنظام التصميم ومنع الانحراف بين التصميم والتنفيذ.

لمن هذه الأداة؟

فرق Design System التي تدير رموز تصميم مشتركة
مطوري Frontend الذين يحولون design tokens إلى كود
فرق تريد مصدر حقيقة واحد للألوان والخطوط
مصممين ومطورين يتعاونون على نظام تصميم موحد

التثبيت

إعداد Claude Code

npm install -D style-dictionary @tokens-studio/sd-transforms

الإعدادات

// style-dictionary.config.js
import { register } from "@tokens-studio/sd-transforms";
import StyleDictionary from "style-dictionary";
register(StyleDictionary);
export default {
  source: ["tokens/**/*.json"],
  platforms: {
    css: {
      transformGroup: "tokens-studio",
      buildPath: "src/styles/",
      files: [{ destination: "tokens.css", format: "css/variables" }],
    },
  },
};

زيارة المصدر (GitHub)

مهارات مشابهة

الواجهات والتصميم

Figma MCP

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

توثيق المكونات مع Storybook

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor