كيفية استخدام تصميم أي موقع في Claude Code

يحوّل Stylepack أي موقع عام إلى حزمة تصميم: DESIGN.md وBEHAVIOR.md وdesign tokens وسمة Tailwind ولقطات شاشة. وإليك كيف تسلّم واحدة منها إلى Claude Code ليبني ما يبدو ويتصرف مثل الموقع الذي اخترته.

الخطوات

تستخدم المسارات أدناه example.com. في صفحة الحزمة تحمل اسم الموقع الذي اخترته.

الصق عنوان الموقع في Stylepack ونزّل حزمته. الحزم الموجودة في المعرض جاهزة الآن.
فك ضغط الحزمة داخل مشروعك بحيث يكون المجلد في design/example.com-design-pack/.
اختياري: انسخ المجلد أيضًا إلى .claude/skills/example-com-design/. يجعل SKILL.md الموجود بداخله Claude Code يحمّل الحزمة تلقائيًا كلما بنى واجهة.
الصق الـ prompt أدناه في Claude Code واكتب ما تريد بناءه.

الـ prompt

يبقى الـ prompt بالإنجليزية: فهو يسمّي ملفات الحزمة، ويقرؤه الذكاء الاصطناعي بأي لغة.

Use the design pack in `design/example.com-design-pack/` as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.

1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every image in `design/example.com-design-pack/screenshots/` and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with `design/example.com-design-pack/tokens.css` (or `tailwind.css` if this project uses Tailwind v4). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.

Now build: [describe the page or app you want]

When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.

استخراج تصميم

الخطوات

الـ prompt

أدلة لأدوات أخرى