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

Storybook Component Docs

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

Claude Code Copilot Cursor Windsurf

نظرة عامة

توثيق المكونات مع Storybook يمكّن وكيل البرمجة من إنشاء وصيانة stories تفاعلية لكل مكون في الواجهة. كل story تعرض المكون بحالاته المختلفة مع إمكانية التفاعل معه مباشرة.

يستطيع الوكيل كتابة stories جديدة لمكونات موجودة، إضافة توثيق MDX مع أمثلة تفاعلية، وتكوين args و argTypes لإنشاء واجهة تحكم بخصائص المكون. كما يمكنه دمج اختبارات بصرية وإمكانية وصول في نفس Story.

أساسية لمكتبات المكونات وأنظمة التصميم التي تحتاج توثيقاً تفاعلياً يسهل على المطورين والمصممين استخدامه.

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

فرق الواجهات التي تبني مكتبات مكونات
مطوري Design Systems الذين يوثقون المكونات
فرق التطوير التي تريد مراجعة بصرية للمكونات
مطورين يختبرون مكونات UI بمعزل عن التطبيق

التثبيت

إعداد Claude Code

npx storybook@latest init

الإعدادات

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
  framework: "@storybook/react-vite",
};
export default config;

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

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

Figma MCP Server

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

Claude Code Cursor Windsurf

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

Tailwind CSS IntelliSense

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

Claude Code Copilot Cursor

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

Accessibility Audit (axe-core)

فحص تلقائي لمشاكل إمكانية الوصول وتقديم اقتراحات لتحسين تجربة جميع المستخدمين.

Claude Code Copilot Cursor