responsively-app

6 Insane Trending GitHub AI Design Repos You Need to Use AI design tools for Claude Code: a 6-repo AI design tutorial. Thanks Cline for sponsoring this video! Try ClinePass to access open-weight coding models directly in Cline and get 80% off through this link: cline.gg Community with All Resources: ailabspro.io The Roundup: Our daily newsletter covering the AI stories. Join now: theroundup.so Got a software idea but don't have the team to build it? Autometa turns your ideas into production-ready software. Check out autometa.dev to see what we can build for you. Repos in this video - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag What we cover in this video - Why switching models alone still leaves sites looking AI-generated - Six GitHub repos that give AI agents more help with AI design, tested on a real landing page - Skip the AI design course: these repos cover references, layout checks, taste, style guides and launch visuals AI Web Design With Real References (Awwwards MCP) - Your agent searches Awwwards, the web design awards site, for real sites to study before the build - Gets screenshots, reads each site's design details, and records how pages move - For AI motion design, we borrowed animation ideas from butter.video, and the final page moved far better than the first version AI Website Design That Fits Every Screen (Responsively App) - A Mac app that shows your site at several screen sizes side by side - Its MCP server lets your agent screenshot each view, fix what doesn't fit, and check the fix - Keeps your website design AI-built for laptops from breaking on phones and tablets Design Taste and AI System Design (Genjutsu) - Three Claude skills: Cast changes one part of a page, Paint plans and builds a whole page - Bunshin is a full agent system in one skill: subagents build pages in parallel under a shared style while other agents check the results - AI system design in practice: it did really well with an illustrative style, less so with a minimal one An AI Design System Your Agent Follows (Dembrandt) - Extracts design details straight from a live site and saves them to design.md, a style guide your agent builds from - Compares scans before and after an edit to catch design changes made by mistake AI Graphic Design for App Stores (App Store Screenshots) - Turns real app screenshots into store images in an editor on your computer - Downloads them in the built-in store sizes as a zip, ready to upload - Graphic design you can edit again by asking your agent whenever your app changes Motion Design With AI for Launch Videos (Brag) - Reads your project and turns it into a launch video of about 20 seconds, with a cover image and a short post - Full mode uses HyperFrames; Slim mode was built for Opus 5.5 and gives the agent more room - Slim did far better in our testing, but only with larger models Which Agent and Model to Design With AI - We ran everything in Cline CLI, which runs in the terminal just like Claude Code - We didn't use Claude AI models here: ClinePass gave us open-weight models that have gotten really good at design - The repos work with any AI agent that supports their tools, whether that's Claude Code, Cline or Google Antigravity - Looking for the best AI for graphic design? Artificial intelligence does better with the right references, not just a newer model Chapters 00:00 Intro 00:44 Awwwards MCP 03:18 Responsively 04:22 Genjutsu 05:52 Dembrandt 07:12 App Store Screenshots 08:14 Brag #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [ar] 6 مستودعات GitHub خرافية ورائجة لتصميم الذكاء الاصطناعي يجب أن تستخدمها أدوات تصميم الذكاء الاصطناعي لـ Claude Code: دليل تصميم ذكاء اصطناعي لستة مستودعات. شكرًا لشركة Cline لرعايتها هذا الفيديو! جرّب ClinePass للوصول إلى نماذج البرمجة مفتوحة المصدر مباشرةً في Cline واحصل على خصم 80% عبر هذا الرابط: cline.gg مجتمع يضم جميع الموارد: ailabspro.io ملخص الأخبار: نشرتنا الإخبارية اليومية التي تغطي آخر أخبار الذكاء الاصطناعي. انضم الآن: theroundup.so هل لديك فكرة برمجية ولكنك تفتقر إلى الفريق اللازم لتطويرها؟ Autometa تحوّل أفكارك إلى برامج جاهزة للإنتاج. تفضل بزيارة autometa.dev للاطلاع على ما يمكننا تطويره لك. المستودعات المذكورة في هذا الفيديو - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - مهارات Dembrandt: dembrandt/dembrandt-skills - لقطات شاشة من متجر التطبيقات: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag مواضيع هذا الفيديو - لماذا لا يزال تغيير النماذج وحده يجعل المواقع تبدو وكأنها مُولّدة بواسطة الذكاء الاصطناعي - ستة مستودعات على GitHub تُقدّم لوكلاء الذكاء الاصطناعي مزيدًا من المساعدة في تصميم مواقعهم، تم اختبارها على صفحة هبوط حقيقية - تخطَّ دورة تصميم مواقع الذكاء الاصطناعي: هذه المستودعات تُغطيها المراجع، وفحص التخطيط، والذوق، وأدلة الأسلوب، والعروض المرئية للإطلاق تصميم مواقع الويب بالذكاء الاصطناعي مع مراجع حقيقية (Awwwards MCP) يبحث وكيلك في موقع Awwwards، موقع جوائز تصميم مواقع الويب، عن مواقع حقيقية لدراستها قبل البدء بالبناء. يلتقط لقطات شاشة، ويقرأ تفاصيل تصميم كل موقع، ويسجل كيفية تحرك الصفحات. في تصميم الحركة بالذكاء الاصطناعي، استعرنا أفكارًا للرسوم المتحركة من butter.video، وكانت حركة الصفحة النهائية أفضل بكثير من النسخة الأولى. تصميم مواقع الويب بالذكاء الاصطناعي الذي يناسب جميع الشاشات (Responsively App) تطبيق لنظام Mac يعرض موقعك على أحجام شاشات متعددة جنبًا إلى جنب. يتيح خادم MCP الخاص به لوكيلك التقاط لقطات شاشة لكل عرض، وتصحيح ما لا يتناسب، والتحقق من التصحيح. يضمن تصميم موقعك المصمم بالذكاء الاصطناعي لأجهزة الكمبيوتر المحمولة عدم تعطل عرضه على الهواتف والأجهزة اللوحية. ذوق التصميم وتصميم نظام الذكاء الاصطناعي (Genjutsu) ثلاث مهارات لكلود: Cast لتغيير جزء من الصفحة، Paint لتخطيط وبناء صفحة كاملة. Bunchin هو نظام وكيل متكامل في مهارة واحدة: يقوم وكلاء فرعيون ببناء الصفحات بالتوازي تحت إشراف نمط مشترك بينما يتحقق وكلاء آخرون من النتائج - تصميم نظام الذكاء الاصطناعي عمليًا: حقق أداءً ممتازًا مع الأسلوب التوضيحي، وأقل كفاءة مع الأسلوب البسيط نظام تصميم ذكاء اصطناعي يتبعه وكيلك (ديمبرانت) - يستخرج تفاصيل التصميم مباشرةً من موقع مباشر ويحفظها في ملف design.md، وهو دليل أسلوب يعتمد عليه وكيلك في البناء - يقارن عمليات المسح قبل وبعد التعديل لاكتشاف أي تغييرات تصميمية غير مقصودة تصميم رسومي بالذكاء الاصطناعي لمتاجر التطبيقات (لقطات شاشة متجر التطبيقات) - يحوّل لقطات شاشة التطبيق الحقيقية إلى صور للمتجر باستخدام محرر على جهاز الكمبيوتر - يُنزّلها بأحجام المتجر المدمجة كملف مضغوط، جاهزة للتحميل - تصميم رسومي يمكنك تعديله مجددًا عن طريق سؤال وكيلك كلما طرأ تغيير على تطبيقك تصميم رسوم متحركة بالذكاء الاصطناعي لفيديوهات الإطلاق (براغ) - يقرأ مشروعك ويحوله إلى فيديو إطلاق مدته حوالي 20 ثانية، مع صورة غلاف وملخص قصير - يستخدم الوضع الكامل تقنية HyperFrames؛ تم تصميم الوضع المُصغّر لبرنامج Opus 5.5، وهو يمنح البرنامج مساحة أكبر. أظهر الوضع المُصغّر أداءً أفضل بكثير في اختباراتنا، ولكن فقط مع النماذج الأكبر حجمًا. أي برنامج ونموذج للتصميم باستخدام الذكاء الاصطناعي؟ أجرينا جميع العمليات باستخدام واجهة سطر الأوامر Cline CLI، والتي تعمل في سطر الأوامر تمامًا مثل Claude Code. لم نستخدم نماذج الذكاء الاصطناعي من Claude هنا: فقد وفر لنا ClinePass نماذج مفتوحة المصدر ذات أوزان مختلفة، والتي أصبحت ممتازة في التصميم. تعمل المستودعات مع أي برنامج ذكاء اصطناعي يدعم أدواتها، سواء كان Claude Code أو Cline أو Google Antigravity. هل تبحث عن أفضل برنامج ذكاء اصطناعي لتصميم الجرافيك؟ يتحسن أداء الذكاء الاصطناعي عند استخدام المراجع الصحيحة، وليس فقط عند استخدام نموذج أحدث. الفصول 00:00 مقدمة 00:44 جوائز MCP 03:18 استجابة سريعة 04:22 جينجوتسو 05:52 ديمبرانت 07:12 لقطات شاشة من متجر التطبيقات 08:14 تفاخر #كلود #كود_كلود #ذكاء_كلود_الاصطناعي #مهارات_كلود #الذكاء_الاصطناعي #التصميم_الجرافيكي #جوجل_مضاد_للجاذبية #تصميم_الذكاء_الاصطناعي [bn] ৬টি দুর্দান্ত ট্রেন্ডিং গিটহাব এআই ডিজাইন রেপো যা আপনার অবশ্যই ব্যবহার করা উচিত ক্লড কোডের জন্য এআই ডিজাইন টুলস: একটি ৬-রিপো এআই ডিজাইন টিউটোরিয়াল। এই ভিডিওটি স্পনসর করার জন্য ক্লাইনকে ধন্যবাদ! ক্লাইনে সরাসরি ওপেন-ওয়েট কোডিং মডেল অ্যাক্সেস করতে ক্লাইনপাস ব্যবহার করুন এবং এই লিঙ্কের মাধ্যমে ৮০% ছাড় পান: cline.gg সমস্ত রিসোর্স সহ কমিউনিটি: ailabspro.io দ্য রাউন্ডআপ: এআই সম্পর্কিত খবর নিয়ে আমাদের দৈনিক নিউজলেটার। এখনই যোগ দিন: theroundup.so আপনার কি কোনো সফটওয়্যারের আইডিয়া আছে কিন্তু তা তৈরি করার মতো টিম নেই? অটোমেটা আপনার আইডিয়াকে প্রোডাকশন-রেডি সফটওয়্যারে পরিণত করে। আমরা আপনার জন্য কী তৈরি করতে পারি তা দেখতে autometa.dev দেখুন। এই ভিডিওতে দেখানো রিপোগুলো - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag এই ভিডিওতে আমরা যা আলোচনা করব - কেন শুধু মডেল পরিবর্তন করলেও সাইটগুলোকে AI-জেনারেটেড মনে হয় - ছয়টি গিটহাব রিপো যা AI এজেন্টদের AI ডিজাইনে আরও সাহায্য করে, একটি আসল ল্যান্ডিং পেজে পরীক্ষিত - AI ডিজাইন কোর্স এড়িয়ে যান: এই রিপোগুলোতে রেফারেন্স, লেআউট চেক, রুচি, স্টাইল গাইড এবং লঞ্চ অন্তর্ভুক্ত রয়েছে ভিজ্যুয়ালস বাস্তব রেফারেন্স সহ এআই ওয়েব ডিজাইন (Awwwards MCP) - আপনার এজেন্ট ওয়েবসাইট তৈরির আগে অধ্যয়নের জন্য ওয়েব ডিজাইন অ্যাওয়ার্ড সাইট Awwwards-এ বাস্তব সাইটগুলো অনুসন্ধান করে - স্ক্রিনশট নেয়, প্রতিটি সাইটের ডিজাইনের বিবরণ পড়ে এবং পেজগুলো কীভাবে নড়াচড়া করে তা রেকর্ড করে - এআই মোশন ডিজাইনের জন্য, আমরা butter.video থেকে অ্যানিমেশনের ধারণা নিয়েছি, এবং চূড়ান্ত পেজটি প্রথম সংস্করণের চেয়ে অনেক ভালোভাবে নড়াচড়া করেছে এআই ওয়েবসাইট ডিজাইন যা প্রতিটি স্ক্রিনে ফিট করে (Responsively App) একটি ম্যাক অ্যাপ যা আপনার সাইটকে বিভিন্ন স্ক্রিন সাইজে পাশাপাশি দেখায় - এর MCP সার্ভার আপনার এজেন্টকে প্রতিটি ভিউয়ের স্ক্রিনশট নিতে, যা ফিট হচ্ছে না তা ঠিক করতে এবং সেই সমাধান পরীক্ষা করতে দেয় - ল্যাপটপের জন্য তৈরি আপনার এআই ওয়েবসাইট ডিজাইন যাতে ফোন এবং ট্যাবলেটে ভেঙে না যায়, তা নিশ্চিত করে ডিজাইন রুচি এবং এআই সিস্টেম ডিজাইন (Genjutsu) - ক্লডের তিনটি স্কিল: Cast একটি পেজের একটি অংশ পরিবর্তন করে, Paint একটি সম্পূর্ণ পেজের পরিকল্পনা করে এবং তা তৈরি করে - Bunshin হলো একটি স্কিলের মধ্যে একটি সম্পূর্ণ এজেন্ট সিস্টেম: সাব-এজেন্টরা একটি শেয়ার করা স্টাইলের অধীনে সমান্তরালভাবে পেজ তৈরি করে এবং অন্যান্য এজেন্টরা ফলাফল পরীক্ষা করে - এআই সিস্টেম ডিজাইন বাস্তবে: এটি অলঙ্করণমূলক শৈলীর সাথে বেশ ভালো কাজ করেছে, কিন্তু ন্যূনতম শৈলীর সাথে ততটা নয়। একটি এআই ডিজাইন সিস্টেম যা আপনার এজেন্ট অনুসরণ করে (ডেমব্র্যান্ড) - সরাসরি একটি লাইভ সাইট থেকে ডিজাইনের বিবরণ সংগ্রহ করে এবং সেগুলোকে design.md-তে সংরক্ষণ করে, যা একটি স্টাইল গাইড হিসেবে আপনার এজেন্ট ব্যবহার করে - ভুলবশত করা ডিজাইনের পরিবর্তন ধরার জন্য সম্পাদনার আগে ও পরের স্ক্যানগুলো তুলনা করে অ্যাপ স্টোরের জন্য এআই গ্রাফিক ডিজাইন (অ্যাপ স্টোর স্ক্রিনশট) - আপনার কম্পিউটারের একটি এডিটরে আসল অ্যাপের স্ক্রিনশটগুলোকে স্টোরের ছবিতে পরিণত করে - সেগুলোকে বিল্ট-ইন স্টোর সাইজে একটি জিপ ফাইল হিসেবে ডাউনলোড করে, যা আপলোড করার জন্য প্রস্তুত থাকে - যখনই আপনার অ্যাপে কোনো পরিবর্তন আসে, আপনি আপনার এজেন্টকে বলে গ্রাফিক ডিজাইনটি পুনরায় সম্পাদনা করতে পারেন লঞ্চ ভিডিওর জন্য এআই সহ মোশন ডিজাইন (ব্র্যাগ) - আপনার প্রজেক্ট পড়ে এবং সেটিকে একটি কভার ইমেজ ও একটি ছোট পোস্ট সহ প্রায় ২০ সেকেন্ডের একটি লঞ্চ ভিডিওতে পরিণত করে - ফুল মোড হাইপারফ্রেম ব্যবহার করে; স্লিম মোডটি ওপাস ৫.৫-এর জন্য তৈরি করা হয়েছিল এবং এটি এজেন্টকে আরও বেশি জায়গা দেয় - আমাদের পরীক্ষায় স্লিম অনেক ভালো পারফর্ম করেছে, তবে শুধুমাত্র বড় মডেলগুলোর ক্ষেত্রে এআই দিয়ে ডিজাইন করার জন্য কোন এজেন্ট এবং মডেল - আমরা সবকিছু ক্লাইন সিএলআই (Cline CLI)-তে চালিয়েছি, যা ক্লড কোড (Claude Code)-এর মতোই টার্মিনালে চলে - আমরা এখানে ক্লড এআই মডেল ব্যবহার করিনি: ক্লাইনপাস (ClinePass) আমাদের ওপেন-ওয়েট মডেল দিয়েছে যা ডিজাইনের ক্ষেত্রে সত্যিই খুব ভালো হয়ে উঠেছে - রিপোজিটরিগুলো যেকোনো এআই এজেন্টের সাথে কাজ করে যা তাদের টুলগুলোকে সাপোর্ট করে, সেটা ক্লড কোড, ক্লাইন বা গুগল অ্যান্টিগ্র্যাভিটি যাই হোক না কেন - গ্রাফিক ডিজাইনের জন্য সেরা এআই খুঁজছেন? কৃত্রিম বুদ্ধিমত্তা শুধু নতুন মডেল নয়, বরং সঠিক রেফারেন্সের সাহায্যে আরও ভালোভাবে কাজ করে। অধ্যায়সমূহ ০০:০০ ভূমিকা ০০:৪৪ অ্যাওয়ার্ডস এমসিপি ০৩:১৮ রেসপন্সিভলি ০৪:২২ গেঞ্জুৎসু ০৫:৫২ ডেমব্রান্ট ০৭:১২ অ্যাপ স্টোর স্ক্রিনশট ০৮:১৪ বড়াই #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [de-DE] 6 irreale, angesagte GitHub-KI-Design-Repos, die du nutzen musst KI-Design-Tools für Claude Code: Ein KI-Design-Tutorial mit 6 Repos. Vielen Dank an Cline für die Unterstützung dieses Videos! Testen Sie ClinePass, um direkt in Cline auf Open-Weight-Coding-Modelle zuzugreifen und über diesen Link 80 % Rabatt zu erhalten: cline.gg Community mit allen Ressourcen: ailabspro.io The Roundup: Unser täglicher Newsletter mit den neuesten KI-News. Jetzt abonnieren: theroundup.so Sie haben eine Software-Idee, aber kein Team für die Umsetzung? Autometa macht aus Ihren Ideen produktionsreife Software. Besuchen Sie autometa.dev und sehen Sie, was wir für Sie entwickeln können. Repos in diesem Video - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag Inhalt dieses Videos: - Warum der alleinige Wechsel von Modellen dazu führt, dass Websites KI-generiert aussehen - Sechs GitHub-Repos, die KI-Agenten bei der Gestaltung von KI-Seiten unterstützen (getestet auf einer echten Landingpage) Überspringen Sie den KI-Designkurs: Diese Repos bieten Referenzen, Layout-Checks, Geschmackstipps und Styleguides und visuelle Darstellung KI-Webdesign mit realen Referenzen (Awwwards MCP) - Ihr Agent durchsucht Awwwards, die Website für Webdesign-Awards, nach realen Websites, um diese vor der Erstellung zu analysieren. - Er erstellt Screenshots, liest die Designdetails jeder Website und zeichnet die Seitenbewegungen auf. - Für das KI-Motion-Design haben wir Animationsideen von butter.video übernommen, und die finale Seite bewegt sich deutlich flüssiger als die erste Version. KI-Website-Design für jedes Display (Responsive App) - Eine Mac-App, die Ihre Website in verschiedenen Bildschirmgrößen nebeneinander anzeigt. - Der MCP-Server ermöglicht es Ihrem Agenten, Screenshots von jeder Ansicht zu erstellen, nicht passende Elemente zu korrigieren und die Korrekturen zu überprüfen. - Verhindert, dass Ihr für Laptops optimiertes KI-Website-Design auf Smartphones und Tablets fehlerhaft dargestellt wird. Design-Geschmack und KI-Systemdesign (Genjutsu) - Drei Claude-Fähigkeiten: Cast ändert einen Teil einer Seite, Paint plant und erstellt eine ganze Seite. - Bunshin ist ein komplettes Agentensystem in einer einzigen Fähigkeit: Unteragenten erstellen Seiten parallel in einem gemeinsamen Stil, während andere Agenten die Ergebnisse überprüfen. - KI-Systemdesign In der Praxis: Es funktionierte sehr gut mit einem illustrativen Stil, weniger gut mit einem minimalistischen. Ein KI-Designsystem, dem Ihr Agent folgt (Dembrandt) - Extrahiert Designdetails direkt von einer Live-Website und speichert sie in der Datei design.md, einem Styleguide, den Ihr Agent erstellt. - Vergleicht Scans vor und nach einer Bearbeitung, um versehentliche Designänderungen zu erkennen. KI-Grafikdesign für App Stores (App-Store-Screenshots) - Wandelt echte App-Screenshots in Store-Bilder in einem Editor auf Ihrem Computer um. - Lädt sie in den integrierten Store-Größen als ZIP-Datei herunter, bereit zum Hochladen. - Grafikdesign, das Sie bei jeder App-Änderung durch Ihren Agenten erneut bearbeiten können. Motion Design mit KI für Launch-Videos (Brag) - Analysiert Ihr Projekt und erstellt daraus ein ca. 20-sekündiges Launch-Video mit Titelbild und kurzem Post. - Der Vollmodus verwendet HyperFrames. Der Slim-Modus wurde für Opus 5.5 entwickelt und bietet dem Agenten mehr Spielraum. – Der Slim-Modus schnitt in unseren Tests deutlich besser ab, allerdings nur bei größeren Modellen. Welcher Agent und welches Modell eignen sich für KI-gestütztes Design? – Wir haben alle Tests mit der Cline CLI durchgeführt, die wie Claude Code im Terminal läuft. – Wir haben hier keine Claude-KI-Modelle verwendet: ClinePass stellte uns Open-Weight-Modelle zur Verfügung, die sich im Designbereich als sehr leistungsfähig erwiesen haben. – Die Repositories funktionieren mit jedem KI-Agenten, der die zugehörigen Tools unterstützt, egal ob Claude Code, Cline oder Google Antigravity. Suchen Sie die beste KI für Grafikdesign? Künstliche Intelligenz erzielt bessere Ergebnisse mit den richtigen Referenzen, nicht nur mit einem neueren Modell. Kapitel 00:00 Einleitung 00:44 Awwwards MCP 03:18 Responsiv 04:22 Genjutsu 05:52 Dembrandt 07:12 App-Store-Screenshots 08:14 Angeberei #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #KünstlicheIntelligenz #Grafikdesign #GoogleAntigravity #KIDesign [es-US] 6 repositorios de diseño con IA en GitHub que son una locura y tienes que probar Herramientas de diseño de IA para Claude Code: un tutorial de diseño de IA con 6 repositorios. ¡Gracias a Cline por patrocinar este video! Prueba ClinePass para acceder a modelos de codificación de peso abierto directamente en Cline y obtén un 80 % de descuento a través de este enlace: cline.gg Comunidad con todos los recursos: ailabspro.io The Roundup: Nuestro boletín diario con las noticias sobre IA. Únete ahora: theroundup.so ¿Tienes una idea de software pero no tienes el equipo para desarrollarla? Autometa convierte tus ideas en software listo para producción. Visita autometa.dev para ver lo que podemos crear para ti. Repositorios en este video - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Habilidades de Dembrandt: dembrandt/dembrandt-skills - Capturas de pantalla de la App Store: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag Contenido de este video - Por qué cambiar solo los modelos hace que los sitios parezcan generados por IA - Seis repositorios de GitHub que ayudan a los agentes de IA con el diseño de IA, probados en una página de destino real - Olvídate del curso de diseño de IA: estos repositorios cubren referencias y diseño Revisiones, estilo, guías de diseño y material visual para el lanzamiento Diseño web con IA y referencias reales (Awwwards MCP) - Tu agente busca en Awwwards, el sitio web de premios de diseño web, sitios reales para estudiar antes de la creación. - Toma capturas de pantalla, lee los detalles de diseño de cada sitio y registra cómo se mueven las páginas. - Para el diseño de movimiento con IA, tomamos prestadas ideas de animación de butter.video, y la página final se movió mucho mejor que la primera versión. Diseño web con IA que se adapta a todas las pantallas (Aplicación Responsiva) - Una aplicación para Mac que muestra tu sitio en varios tamaños de pantalla simultáneamente. - Su servidor MCP permite a tu agente tomar capturas de pantalla de cada vista, corregir lo que no se ajusta y verificar la corrección. - Evita que el diseño de tu sitio web, creado con IA para portátiles, se vea afectado en teléfonos y tabletas. Estilo de diseño y diseño de sistemas de IA (Genjutsu) - Tres habilidades de Claude: Cast modifica una parte de una página, Paint planifica y construye una página completa. - Bunshin es un sistema de agentes completo en una sola habilidad: los subagentes construyen páginas en paralelo bajo un estilo compartido mientras otros... Los agentes revisan los resultados. - Diseño de sistemas de IA en la práctica: funcionó muy bien con un estilo ilustrativo, pero no tanto con uno minimalista. Sistema de diseño con IA que tu agente sigue (Dembrandt) - Extrae detalles de diseño directamente de un sitio web en vivo y los guarda en design.md, una guía de estilo que tu agente utiliza como base. - Compara escaneos antes y después de una edición para detectar cambios de diseño accidentales. Diseño gráfico con IA para tiendas de aplicaciones (Capturas de pantalla de la App Store) - Convierte capturas de pantalla reales de la aplicación en imágenes para la tienda en un editor en tu computadora. - Las descarga en los tamaños predefinidos para la tienda como un archivo ZIP, listas para subir. - Diseño gráfico que puedes editar nuevamente solicitando a tu agente cada vez que cambie tu aplicación. Diseño de movimiento con IA para videos de lanzamiento (Brag) - Analiza tu proyecto y lo convierte en un video de lanzamiento de aproximadamente 20 segundos, con una imagen de portada y una breve publicación. - El modo completo utiliza HyperFrames. El modo Slim se diseñó para Opus 5.5 y le da más margen al agente. - Slim tuvo un rendimiento mucho mejor en nuestras pruebas, pero solo con modelos más grandes. ¿Qué agente y modelo diseñar con IA? - Ejecutamos todo en Cline CLI, que se ejecuta en la terminal igual que Claude Code. - No usamos los modelos de IA de Claude: ClinePass nos proporcionó modelos de peso abierto que han mejorado mucho en diseño. - Los repositorios funcionan con cualquier agente de IA que sea compatible con sus herramientas, ya sea Claude Code, Cline o Google Antigravity. - ¿Buscas la mejor IA para diseño gráfico? La inteligencia artificial funciona mejor con las referencias adecuadas, no solo con un modelo más reciente. Capítulos 00:00 Introducción 00:44 Awwwards MCP 03:18 Responsively 04:22 Genjutsu 05:52 Dembrandt 07:12 Capturas de pantalla de la App Store 08:14 Presumir #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #inteligenciaartificial #diseñográfico #GoogleAntigravity #diseñoconIA [fr-FR] 6 dépôts GitHub incroyables sur le design par IA que vous devez utiliser Outils de conception d'IA pour Claude Code : un tutoriel de conception d'IA en 6 dépôts. Merci à Cline de sponsoriser cette vidéo ! Essayez ClinePass pour accéder directement aux modèles de codage open-weight dans Cline et bénéficiez de 80 % de réduction via ce lien : cline.gg Communauté et ressources complètes : ailabspro.io The Roundup : notre newsletter quotidienne sur l'actualité de l'IA. Inscrivez-vous : theroundup.so Vous avez une idée de logiciel, mais pas l'équipe pour la développer ? Autometa transforme vos idées en logiciels prêts pour la production. Découvrez autometa.dev pour voir ce que nous pouvons créer pour vous. Dépôts mentionnés dans cette vidéo : - Awwwards MCP : INSANE0777/Awwwards-mcp - Application Responsively : responsively-org/responsively-app - Genjutsu : AThevon/genjutsu - Dembrandt : dembrandt/dembrandt - Compétences Dembrandt : dembrandt/dembrandt-skills - Captures d'écran de l'App Store : ParthJadhav/app-store-screenshots - Brag : latent-spaces/brag Contenu de cette vidéo : - Pourquoi le simple fait de changer de modèle ne suffit pas toujours à donner aux sites un aspect généré par IA - Six dépôts GitHub qui facilitent la conception pour les agents IA, testés sur une page d'accueil réelle - Oubliez les cours de conception IA : ces dépôts couvrent les références, la vérification de la mise en page, les critères esthétiques et les guides de style et visuels de lancement Conception Web IA avec Références Réelles (Awwwards MCP) - Votre agent recherche sur Awwwards, le site de récompenses de design web, des sites réels à étudier avant la création. - Il capture des captures d'écran, analyse les détails de conception de chaque site et enregistre le comportement des pages. - Pour la conception d'animations par IA, nous nous sommes inspirés de butter.video. La page finale est bien plus fluide que la première version. Conception de Site Web IA Adaptable à Tous les Écrans (Application Responsively) - Une application Mac qui affiche votre site côte à côte sur plusieurs tailles d'écran. - Son serveur MCP permet à votre agent de capturer des captures d'écran de chaque vue, de corriger les problèmes d'affichage et de vérifier les corrections. - Votre site web, conçu par IA pour les ordinateurs portables, s'affiche correctement sur les téléphones et les tablettes. Goût du Design et Conception de Systèmes IA (Genjutsu) - Trois compétences Claude : Cast modifie une partie d'une page, Paint planifie et crée une page entière. - Bunshin est un système d'agents complet en une seule compétence : des sous-agents créent des pages en parallèle avec un style partagé, tandis que d'autres agents vérifient les résultats. - Conception de systèmes IA Test : le système a très bien fonctionné avec un style illustratif, moins bien avec un style minimaliste. Un système de conception IA que votre agent suit (Dembrandt) - Extrait les détails de conception directement depuis un site web et les enregistre dans design.md, un guide de style à partir duquel votre agent crée des maquettes. - Compare les captures d'écran avant et après modification pour détecter les erreurs de conception. Conception graphique IA pour les App Stores (Captures d'écran App Store) - Transforme les captures d'écran de votre application en images pour les boutiques d'applications grâce à un éditeur sur votre ordinateur. - Les télécharge au format ZIP, prêt à être importé. - Vous pouvez modifier la conception graphique en interrogeant votre agent à chaque modification de votre application. Conception d'animations avec IA pour les vidéos de lancement (Brag) - Analyse votre projet et le transforme en une vidéo de lancement d'environ 20 secondes, avec une image de couverture et une courte description. - Le mode complet utilise HyperFrames. Le mode Slim a été conçu pour Opus 5.5 et offre plus d'espace à l'agent. - Le mode Slim a obtenu de bien meilleurs résultats lors de nos tests, mais uniquement avec des modèles plus volumineux. Quel agent et quel modèle utiliser pour la conception avec l'IA ? - Nous avons tout exécuté dans Cline CLI, qui fonctionne dans le terminal comme Claude Code. - Nous n'avons pas utilisé les modèles d'IA de Claude : ClinePass nous a fourni des modèles à pondération ouverte qui sont devenus très performants en conception. - Les dépôts fonctionnent avec tout agent d'IA compatible avec leurs outils, qu'il s'agisse de Claude Code, Cline ou Google Antigravity. - Vous recherchez la meilleure IA pour la conception graphique ? L'intelligence artificielle est plus performante avec des références pertinentes, et pas seulement avec un modèle plus récent. Chapitres 00:00 Introduction 00:44 Awwwards MCP 03:18 Responsively 04:22 Genjutsu 05:52 Dembrandt 07:12 Captures d'écran de l'App Store 08... [hi] 6 जबरदस्त और ट्रेंडिंग GitHub AI डिज़ाइन रिपोज़िटरीज़ जो आपको ज़रूर इस्तेमाल करनी चाहिए क्लाउड कोड के लिए AI डिज़ाइन टूल: 6-रिपॉजिटरी वाला AI डिज़ाइन ट्यूटोरियल। इस वीडियो को स्पॉन्सर करने के लिए क्लाइन का धन्यवाद! क्लाइनपास का उपयोग करके सीधे क्लाइन में ओपन-वेट कोडिंग मॉडल एक्सेस करें और इस लिंक के माध्यम से 80% की छूट प्राप्त करें: cline.gg सभी संसाधनों के साथ समुदाय: ailabspro.io द राउंडअप: AI से जुड़ी खबरों को कवर करने वाला हमारा दैनिक न्यूज़लेटर। अभी जुड़ें: theroundup.so क्या आपके पास कोई सॉफ़्टवेयर आइडिया है लेकिन उसे बनाने के लिए टीम नहीं है? ऑटोमेटा आपके आइडिया को प्रोडक्शन-रेडी सॉफ़्टवेयर में बदल देता है। हम आपके लिए क्या बना सकते हैं, यह देखने के लिए autometa.dev पर जाएं। इस वीडियो में शामिल रिपॉज़िटरी - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag इस वीडियो में हम क्या कवर करते हैं - केवल मॉडल बदलने से भी साइटें AI-जनरेटेड क्यों दिखती हैं - छह GitHub रिपॉज़िटरी जो AI एजेंटों को AI डिज़ाइन में अधिक सहायता प्रदान करती हैं, एक वास्तविक लैंडिंग पेज पर परीक्षण किया गया - AI डिज़ाइन कोर्स छोड़ें: ये रिपॉज़िटरी संदर्भ और लेआउट को कवर करती हैं जाँच, डिज़ाइन का स्वाद, स्टाइल गाइड और लॉन्च विज़ुअल वास्तविक संदर्भों के साथ AI वेब डिज़ाइन (Awwwards MCP) - आपका एजेंट वेब डिज़ाइन पुरस्कार साइट Awwwards पर वास्तविक साइटों की खोज करता है ताकि निर्माण से पहले उनका अध्ययन किया जा सके। - स्क्रीनशॉट लेता है, प्रत्येक साइट के डिज़ाइन विवरण पढ़ता है और पृष्ठों के मूवमेंट को रिकॉर्ड करता है। - AI मोशन डिज़ाइन के लिए, हमने butter.video से एनिमेशन के विचार लिए और अंतिम पृष्ठ पहले संस्करण की तुलना में कहीं बेहतर तरीके से मूवमेंट करता है। हर स्क्रीन पर फिट होने वाला AI वेबसाइट डिज़ाइन (Responsively App) - एक Mac ऐप जो आपकी साइट को कई स्क्रीन साइज़ पर साथ-साथ दिखाता है। - इसका MCP सर्वर आपके एजेंट को प्रत्येक दृश्य का स्क्रीनशॉट लेने, जो फिट नहीं होता उसे ठीक करने और सुधार की जाँच करने की सुविधा देता है। - लैपटॉप के लिए AI द्वारा निर्मित आपकी वेबसाइट डिज़ाइन को फ़ोन और टैबलेट पर खराब होने से बचाता है। डिज़ाइन का स्वाद और AI सिस्टम डिज़ाइन (Genjutsu) - क्लाउड के तीन कौशल: Cast पृष्ठ के एक भाग को बदलता है, Paint पूरे पृष्ठ की योजना बनाता है और उसे बनाता है। - Bunshin एक ही कौशल में एक पूर्ण एजेंट सिस्टम है: उप-एजेंट एक साझा शैली के तहत समानांतर रूप से पृष्ठ बनाते हैं जबकि अन्य एजेंट परिणामों की जाँच करते हैं - व्यवहार में AI सिस्टम डिज़ाइन: इसने चित्रात्मक शैली में बहुत अच्छा प्रदर्शन किया, न्यूनतम शैली में उतना अच्छा नहीं। एक AI डिज़ाइन सिस्टम जिसका आपका एजेंट अनुसरण करता है (डेम्ब्रांट) - लाइव साइट से सीधे डिज़ाइन विवरण निकालता है और उन्हें design.md में सहेजता है, जो एक स्टाइल गाइड है जिसका उपयोग आपका एजेंट डिज़ाइन बनाने के लिए करता है। - संपादन से पहले और बाद के स्कैन की तुलना करके गलती से किए गए डिज़ाइन परिवर्तनों को पकड़ता है। ऐप स्टोर के लिए AI ग्राफ़िक डिज़ाइन (ऐप स्टोर स्क्रीनशॉट) - आपके कंप्यूटर पर एक संपादक में वास्तविक ऐप स्क्रीनशॉट को स्टोर छवियों में बदलता है। - उन्हें अंतर्निहित स्टोर आकार में ज़िप फ़ाइल के रूप में डाउनलोड करता है, अपलोड करने के लिए तैयार। - जब भी आपके ऐप में कोई बदलाव होता है, तो आप अपने एजेंट से अनुरोध करके ग्राफ़िक डिज़ाइन को फिर से संपादित कर सकते हैं। लॉन्च वीडियो के लिए AI के साथ मोशन डिज़ाइन (ब्रैग) - आपके प्रोजेक्ट को पढ़ता है और इसे लगभग 20 सेकंड के लॉन्च वीडियो में बदलता है, जिसमें एक कवर छवि और एक छोटा पोस्ट होता है। - पूर्ण मोड हाइपरफ्रेम का उपयोग करता है; ओपस 5.5 के लिए स्लिम मोड बनाया गया था और यह एजेंट को अधिक जगह देता है। - हमारे परीक्षण में स्लिम ने कहीं बेहतर प्रदर्शन किया, लेकिन केवल बड़े मॉडलों के साथ। एआई के साथ डिजाइन करने के लिए कौन सा एजेंट और मॉडल चुनें? - हमने सब कुछ क्लाइन सीएलआई में चलाया, जो क्लाउड कोड की तरह ही टर्मिनल में चलता है। - हमने यहां क्लाउड एआई मॉडल का उपयोग नहीं किया: क्लाइनपास ने हमें ओपन-वेट मॉडल दिए जो डिजाइन में काफी अच्छे हो गए हैं। - रिपॉजिटरी किसी भी एआई एजेंट के साथ काम करती हैं जो उनके टूल का समर्थन करता है, चाहे वह क्लाउड कोड हो, क्लाइन हो या गूगल एंटीग्रेविटी। - ग्राफिक डिजाइन के लिए सर्वश्रेष्ठ एआई की तलाश है? कृत्रिम बुद्धिमत्ता सही संदर्भों के साथ बेहतर प्रदर्शन करती है, न कि केवल एक नए मॉडल से। अध्याय 00:00 परिचय 00:44 एमसीपी को शुभकामनाएं 03:18 प्रतिक्रियाशीलता 04:22 जेनजुत्सु 05:52 डेमब्रैंड्ट 07:12 ऐप स्टोर स्क्रीनशॉट 08:14 शेखी बघारना #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [id] 6 Repo GitHub Desain AI Trending Gila yang Harus Anda Coba Alat desain AI untuk Claude Code: tutorial desain AI 6 repositori. Terima kasih Cline atas sponsor video ini! Coba ClinePass untuk mengakses model pengkodean open-weight langsung di Cline dan dapatkan diskon 80% melalui tautan ini: cline.gg Komunitas dengan Semua Sumber Daya: ailabspro.io The Roundup: Buletin harian kami yang membahas berita-berita AI. Bergabung sekarang: theroundup.so Punya ide perangkat lunak tetapi tidak memiliki tim untuk membangunnya? Autometa mengubah ide Anda menjadi perangkat lunak siap produksi. Kunjungi autometa.dev untuk melihat apa yang dapat kami bangun untuk Anda. Repositori dalam video ini - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Keterampilan Dembrandt: dembrandt/dembrandt-skills - Tangkapan Layar App Store: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag Apa yang kami bahas dalam video ini - Mengapa hanya dengan mengganti model saja situs web masih terlihat seperti hasil buatan AI - Enam repositori GitHub yang memberikan lebih banyak bantuan kepada agen AI dalam desain AI, diuji pada halaman arahan nyata - Lewati kursus desain AI: repositori ini mencakup referensi, pemeriksaan tata letak, selera, panduan gaya, dan visual peluncuran Desain Web AI Dengan Referensi Nyata (Awwwards MCP) - Agen Anda mencari situs nyata di Awwwards, situs penghargaan desain web, untuk dipelajari sebelum pembuatan situs - Mendapatkan tangkapan layar, membaca detail desain setiap situs, dan merekam bagaimana halaman bergerak - Untuk desain gerak AI, kami meminjam ide animasi dari butter.video, dan halaman akhir bergerak jauh lebih baik daripada versi pertama Desain Situs Web AI yang Sesuai untuk Setiap Layar (Aplikasi Responsif) - Aplikasi Mac yang menampilkan situs Anda pada beberapa ukuran layar secara berdampingan - Server MCP-nya memungkinkan agen Anda mengambil tangkapan layar setiap tampilan, memperbaiki apa yang tidak sesuai, dan memeriksa perbaikannya - Menjaga desain situs web Anda yang dibuat AI untuk laptop agar tidak rusak di ponsel dan tablet Selera Desain dan Desain Sistem AI (Genjutsu) - Tiga keterampilan Claude: Cast mengubah satu bagian halaman, Paint merencanakan dan membangun seluruh halaman - Bunshin adalah sistem agen lengkap dalam satu keterampilan: subagen membangun halaman secara paralel di bawah gaya bersama sementara agen lain memeriksa hasilnya - Desain sistem AI dalam praktik: ia bekerja sangat baik dengan ilustrasi gaya, kurang begitu dengan gaya minimalis Sistem Desain AI yang Diikuti Agen Anda (Dembrandt) - Mengekstrak detail desain langsung dari situs web aktif dan menyimpannya ke design.md, panduan gaya yang digunakan agen Anda - Membandingkan hasil pemindaian sebelum dan sesudah pengeditan untuk mendeteksi perubahan desain yang dilakukan secara tidak sengaja Desain Grafis AI untuk App Store (Tangkapan Layar App Store) - Mengubah tangkapan layar aplikasi asli menjadi gambar toko di editor di komputer Anda - Mengunduhnya dalam ukuran toko bawaan sebagai file zip, siap untuk diunggah - Desain grafis yang dapat Anda edit lagi dengan meminta agen Anda setiap kali aplikasi Anda berubah Desain Gerak dengan AI untuk Video Peluncuran (Brag) - Membaca proyek Anda dan mengubahnya menjadi video peluncuran sekitar 20 detik, dengan gambar sampul dan postingan singkat - Mode penuh menggunakan HyperFrames; Mode ramping (Slim mode) dibuat untuk Opus 5.5 dan memberi agen lebih banyak ruang - Slim berkinerja jauh lebih baik dalam pengujian kami, tetapi hanya dengan model yang lebih besar Agen dan Model Mana yang Digunakan untuk Mendesain dengan AI - Kami menjalankan semuanya di Cline CLI, yang berjalan di terminal seperti Claude Code - Kami tidak menggunakan model AI Claude di sini: ClinePass memberi kami model open-weight yang telah menjadi sangat baik dalam desain - Repositori ini berfungsi dengan agen AI apa pun yang mendukung alat mereka, baik itu Claude Code, Cline, atau Google Antigravity - Mencari AI terbaik untuk desain grafis? Kecerdasan buatan bekerja lebih baik dengan referensi yang tepat, bukan hanya model yang lebih baru Bab 00:00 Pendahuluan 00:44 Awwwards MCP 03:18 Responsif 04:22 Genjutsu 05:52 Dembrandt 07:12 Tangkapan Layar App Store 08:14 Pamer #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #kecerdasanbuatan #desaingrafis #GoogleAntigravitasi #desainai [it] 6 pazzeschi repository GitHub di design IA in tendenza che devi assolutamente provare Strumenti di progettazione AI per Claude Code: un tutorial di progettazione AI con 6 repository. Grazie a Cline per aver sponsorizzato questo video! Prova ClinePass per accedere direttamente ai modelli di codifica open-weight in Cline e ottieni l'80% di sconto tramite questo link: cline.gg Community con tutte le risorse: ailabspro.io The Roundup: la nostra newsletter quotidiana con le ultime notizie sull'IA. Iscriviti ora: theroundup.so Hai un'idea per un software ma non hai il team per realizzarla? Autometa trasforma le tue idee in software pronto per la produzione. Visita autometa.dev per scoprire cosa possiamo creare per te. Repository in questo video - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Skill di Dembrandt: dembrandt/dembrandt-skills - Screenshot dell'App Store: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag Cosa trattiamo in questo video - Perché cambiare solo i modelli lascia comunque i siti con un aspetto generato dall'IA - Sei repository GitHub che offrono agli agenti IA un supporto maggiore per la progettazione IA, testati su una landing page reale - Evita il corso di progettazione IA: questi I repository includono riferimenti, controlli di layout, gusto, guide di stile e visual di lancio. Web design con IA e riferimenti reali (Awwwards MCP) - Il tuo agente cerca su Awwwards, il sito dei premi per il web design, siti reali da studiare prima della realizzazione. - Acquisisce screenshot, legge i dettagli di design di ogni sito e registra il movimento delle pagine. - Per il motion design con IA, abbiamo preso spunto da butter.video e la pagina finale ha un movimento decisamente migliore rispetto alla prima versione. Web design con IA che si adatta a ogni schermo (App Responsively) - Un'app per Mac che mostra il tuo sito affiancato su diverse dimensioni dello schermo. - Il suo server MCP consente al tuo agente di acquisire screenshot di ogni visualizzazione, correggere ciò che non si adatta e verificare la correzione. - Impedisce che il design del tuo sito web, creato con IA per laptop, si rompa su telefoni e tablet. Gusto del design e progettazione di sistemi con IA (Genjutsu) - Tre abilità di Claude: Cast modifica una parte di una pagina, Paint pianifica e costruisce un'intera pagina. - Bunshin è un sistema completo di agenti in un'unica abilità: i sub-agenti costruiscono pagine in parallelo sotto un controllo condiviso. Stile mentre altri agenti controllano i risultati - Progettazione di sistemi AI in pratica: ha funzionato molto bene con uno stile illustrativo, meno bene con uno minimalista Un sistema di design AI che il tuo agente segue (Dembrandt) - Estrae i dettagli di design direttamente da un sito live e li salva in design.md, una guida di stile che il tuo agente utilizza come base - Confronta le scansioni prima e dopo una modifica per individuare modifiche di design apportate per errore Design grafico AI per App Store (Screenshot per App Store) - Trasforma screenshot reali di app in immagini per lo store in un editor sul tuo computer - Le scarica nelle dimensioni predefinite dello store come file zip, pronte per il caricamento - Design grafico che puoi modificare nuovamente chiedendo al tuo agente ogni volta che la tua app cambia Motion Design con AI per video di lancio (Brag) - Legge il tuo progetto e lo trasforma in un video di lancio di circa 20 secondi, con un'immagine di copertina e un breve post - La modalità completa utilizza HyperFrame; La modalità Slim è stata creata per Opus 5.5 e offre all'agente più spazio. - Nei nostri test, Slim ha ottenuto risultati di gran lunga migliori, ma solo con modelli più grandi. Quale agente e modello utilizzare per la progettazione con l'IA? - Abbiamo eseguito tutto in Cline CLI, che funziona nel terminale proprio come Claude Code. - Non abbiamo utilizzato i modelli Claude AI: ClinePass ci ha fornito modelli open-weight che sono diventati davvero efficaci nella progettazione. - I repository funzionano con qualsiasi agente IA che supporti i loro strumenti, che si tratti di Claude Code, Cline o Google Antigravity. - Cerchi la migliore IA per la progettazione grafica? L'intelligenza artificiale funziona meglio con i giusti riferimenti, non solo con un modello più recente. Capitoli 00:00 Introduzione 00:44 Awwwards MCP 03:18 Responsively 04:22 Genjutsu 05:52 Dembrandt 07:12 Screenshot dell'App Store 08:14 Brag #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [iw] 6 מאגרי GitHub מטורפים לעיצוב בעזרת AI שאתם חייבים להכיר כלי עיצוב בינה מלאכותית עבור Claude Code: מדריך עיצוב בינה מלאכותית בן 6 מאגרים. תודה לקליין על החסות לסרטון הזה! נסו את ClinePass כדי לגשת למודלים של קידוד במשקל פתוח ישירות בקליין וקבלו 80% הנחה דרך הקישור הזה: cline.gg קהילה עם כל המשאבים: ailabspro.io The Roundup: הניוזלטר היומי שלנו המכסה את סיפורי הבינה המלאכותית. הצטרפו עכשיו: theroundup.so יש לכם רעיון לתוכנה אבל אין לכם את הצוות לבנות אותו? Autometa הופכת את הרעיונות שלכם לתוכנה מוכנה לייצור. בקרו באתר autometa.dev כדי לראות מה אנחנו יכולים לבנות עבורכם. מאגרים בסרטון הזה - Awwwards MCP: INSANE0777/Awwwards-mcp - אפליקציה רספונסיבית: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - צילומי מסך מחנות האפליקציות: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag מה אנחנו מכסים בסרטון הזה - מדוע החלפת מודלים לבדה עדיין משאירה אתרים נראים כאילו נוצרו על ידי בינה מלאכותית - שישה מאגרים של GitHub שנותנים לסוכני בינה מלאכותית עזרה נוספת בעיצוב בינה מלאכותית, שנבדקו בדף נחיתה אמיתי - דלגו על קורס עיצוב בינה מלאכותית: מאגרים אלה מכסים הפניות, בדיקות פריסה, טעם, מדריכי סגנון והשקה ויזואליה עיצוב אתרים מבוסס בינה מלאכותית עם הפניות אמיתיות (Awwwards MCP) - הסוכן שלך מחפש ב-Awwwards, אתר פרסי עיצוב אתרים, אתרים אמיתיים ללימוד לפני הבנייה - מקבל צילומי מסך, קורא את פרטי העיצוב של כל אתר ומתעד כיצד דפים נעים - עבור עיצוב תנועה מבוסס בינה מלאכותית, שאלנו רעיונות לאנימציה מ-butter.video, והדף הסופי זז הרבה יותר טוב מהגרסה הראשונה עיצוב אתרים מבוסס בינה מלאכותית שמתאים לכל מסך (אפליקציה רספונסיבית) - אפליקציית מק המציגה את האתר שלך במספר גדלי מסך זה לצד זה - שרת ה-MCP שלה מאפשר לסוכן שלך לצלם מסך של כל תצוגה, לתקן את מה שלא מתאים ולבדוק את התיקון - מונע מעיצוב האתר שלך, שנבנה מבוסס בינה מלאכותית למחשבים ניידים, להיכשל בטלפונים וטאבלטים טעם עיצוב ועיצוב מערכת בינה מלאכותית (Genjutsu) - שלוש מיומנויות של קלוד: שינויים של חלק אחד של דף, תכנון ובניית דף שלם של צייר - Bunshin היא מערכת סוכנים מלאה במיומנות אחת: סוכני משנה בונים דפים במקביל תחת סגנון משותף בעוד שסוכנים אחרים בודקים את התוצאות - עיצוב מערכת בינה מלאכותית בפועל: זה הצליח ממש טוב עם סגנון אילוסטרי, פחות עם סגנון מינימליסטי מערכת עיצוב בינה מלאכותית שהסוכן שלך עוקב אחריה (Dembrandt) - מחלצת פרטי עיצוב ישירות מאתר חי ושומרת אותם ב-design.md, מדריך סגנון שממנו הסוכן שלך בונה - משווה סריקות לפני ואחרי עריכה כדי לזהות שינויי עיצוב שבוצעו בטעות עיצוב גרפי בינה מלאכותית לחנויות אפליקציות (צילומי מסך מחנות האפליקציות) - הופך צילומי מסך אמיתיים של אפליקציות לתמונות חנות בעורך במחשב שלך - מוריד אותם בגדלי החנות המובנים כקובץ zip, מוכן להעלאה - עיצוב גרפי שתוכל לערוך שוב על ידי בקשת הסוכן שלך בכל פעם שהאפליקציה שלך משתנה עיצוב תנועה עם בינה מלאכותית לסרטוני השקה (Brag) - קורא את הפרויקט שלך והופך אותו לסרטון השקה של כ-20 שניות, עם תמונת כריכה ופוסט קצר - מצב מלא משתמש ב-HyperFrames; מצב Slim נבנה עבור Opus 5.5 ומעניק לסוכן יותר מקום - Slim הצליח הרבה יותר בבדיקות שלנו, אבל רק עם דגמים גדולים יותר איזה סוכן ומודל לעצב עם בינה מלאכותית - הרצנו הכל ב-Cline CLI, שפועל בטרמינל בדיוק כמו Claude Code - לא השתמשנו כאן במודלים של Claude AI: ClinePass נתן לנו מודלים פתוחים שהפכו ממש טובים בעיצוב - המאגרים עובדים עם כל סוכן בינה מלאכותית שתומך בכלים שלו, בין אם זה Claude Code, Cline או Google Antigravity - מחפש את הבינה המלאכותית הטובה ביותר לעיצוב גרפי? בינה מלאכותית מצליחה יותר עם ההתייחסויות הנכונות, לא רק עם מודל חדש יותר פרקים 00:00 מבוא 00:44 Awwwards MCP 03:18 רספונסיבי 04:22 גנג'וטסו 05:52 דמברנדט 07:12 צילומי מסך מחנות האפליקציות 08:14 התרברבות #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [ja] 必見！デザインを劇的に変えるGitHubのAI関連リポジトリ6選 Claude Code向けAI設計ツール：6つのリポジトリを使ったAI設計チュートリアル。 この動画はClineの提供でお送りします！ClinePassをお試しください。Cline内でオープンウェイトのコーディングモデルに直接アクセスでき、こちらのリンクから80%オフでご利用いただけます：cline.gg すべてのリソースが揃ったコミュニティ：ailabspro.io The Roundup：AI関連の最新ニュースをお届けする日刊ニュースレター。 今すぐご登録ください：theroundup.so ソフトウェアのアイデアはあるけれど、開発チームがないとお困りですか？Autometaは、あなたのアイデアを実用レベルのソフトウェアへと変換します。Autometaがどのような開発サービスを提供できるか、autometa.dev をご覧ください。 この動画で紹介するリポジトリ - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag この動画の内容 - モデルを切り替えるだけでは、サイトがAI生成のように見えてしまう理由 - AIエージェントがAIデザインをより効果的に行えるようにする6つのGitHubリポジトリ（実際のランディングページでテスト済み） - AIデザイン講座は不要：これらのリポジトリは、参考資料、レイアウトチェック、デザインセンス、スタイルガイドを網羅していますそしてビジュアルを公開 実例に基づいたAIウェブデザイン（Awwwards MCP） - エージェントは、ウェブデザイン賞サイトAwwwardsで、構築前に参考にする実例サイトを検索します。 - スクリーンショットを取得し、各サイトのデザイン詳細を読み取り、ページの動きを記録します。 - AIモーションデザインでは、butter.videoのアニメーションアイデアを参考にしました。最終版のページは、最初のバージョンよりもはるかにスムーズに動きます。 あらゆる画面サイズに対応するAIウェブサイトデザイン（Responsively App） - 複数の画面サイズでサイトを並べて表示するMacアプリです。 - MCPサーバーにより、エージェントは各ビューのスクリーンショットを撮り、サイズが合わない部分を修正し、修正内容を確認できます。 - ノートパソコン向けにAIで構築されたウェブサイトデザインが、スマートフォンやタブレットで正しく表示されないことを防ぎます。 デザインセンスとAIシステム設計（Genjutsu） - 3つのClaudeスキル：Castはページの一部を変更し、Paintはページ全体を計画・構築します。 - Bunshinは、1つのスキルで完全なエージェントシステムを実現します。サブエージェントは共有スタイルに基づいてページを並行して構築し、他のエージェントは結果を確認します。 - AIシステム設計の実践例：イラスト風のスタイルでは非常に優れた結果を示しましたが、ミニマルなスタイルではそれほどではありませんでした。 エージェントが従うAIデザインシステム（Dembrandt） - ライブサイトからデザインの詳細を直接抽出し、デザインガイド（design.md）に保存します。これはエージェントが作成するスタイルガイドです。 - 編集前後のスキャンを比較し、誤って行われたデザイン変更を検出します。 アプリストア向けAIグラフィックデザイン（App Store Screenshots） - 実際のアプリのスクリーンショットを、コンピューター上のエディターでストア画像に変換します。 - ストアの標準サイズでZIPファイルとしてダウンロードし、アップロード準備完了です。 - アプリに変更があった場合は、エージェントに依頼することでグラフィックデザインを再度編集できます。 ローンチビデオ向けAIモーションデザイン（Brag） - プロジェクトを読み込み、カバー画像と短い投稿を含む約20秒のローンチビデオを作成します。 - フルモードではHyperFramesを使用します。 SlimモードはOpus 5.5向けに開発され、エージェントにより多くの処理能力を提供します。 - Slimモードはテストで優れた結果を示しましたが、これは大規模なモデルの場合に限られます。 AIでデザインするのに最適なエージェントとモデルは？ - すべての処理はCline CLIで実行しました。Cline CLIはClaude Codeと同様にターミナル上で動作します。 - ここではClaude AIモデルは使用していません。ClinePassが提供する、デザイン能力が非常に高いオープンウェイトモデルを使用しました。 - このリポジトリは、Claude Code、Cline、Google Antigravityなど、ツールをサポートするあらゆるAIエージェントで動作します。 - グラフィックデザインに最適なAIをお探しですか？人工知能は、単に新しいモデルを使うだけでなく、適切な参照データがあればより優れた性能を発揮します。 チャプター 00:00 はじめに 00:44 Awwwards MCP 03:18 Responsively 04:22 Genjutsu 05:52 Dembrandt 07:12 App Storeのスクリーンショット 08:14 自慢 #Claude #ClaudeCode #ClaudeAI #ClaudeSkills #artificialIntelligence #graphicDesign #GoogleAntigravity #aiDesign [ko] 당장 써봐야 할 엄청난 GitHub AI 디자인 저장소 6곳 Claude Code를 위한 AI 디자인 도구: 6개의 저장소를 활용한 AI 디자인 튜토리얼. 이 영상 제작을 후원해 주신 Cline에 감사드립니다! ClinePass를 이용하면 Cline에서 바로 오픈 웨이트 코딩 모델에 접근할 수 있으며, 다음 링크를 통해 80% 할인 혜택을 받으실 수 있습니다: cline.gg 모든 리소스를 갖춘 커뮤니티: ailabspro.io The Roundup: AI 관련 소식을 매일 받아보는 뉴스레터입니다. 지금 가입하세요: theroundup.so 소프트웨어 아이디어는 있지만 개발팀이 부족하신가요? Autometa는 여러분의 아이디어를 상용 소프트웨어로 구현해 드립니다. autometa.dev 에서 Autometa가 여러분을 위해 무엇을 만들어 드릴 수 있는지 확인해 보세요. 이 영상에 소개된 저장소 - Awwwards MCP: INSANE0777/Awwwards-mcp - Responsively App: responsively-org/responsively-app - Genjutsu: AThevon/genjutsu - Dembrandt: dembrandt/dembrandt - Dembrandt skills: dembrandt/dembrandt-skills - App Store Screenshots: ParthJadhav/app-store-screenshots - Brag: latent-spaces/brag 이 영상에서 다루는 내용 - 모델만 바꿔도 사이트가 여전히 AI가 생성한 것처럼 보이는 이유 - AI 에이전트에게 AI 디자인을 더 효과적으로 지원하는 6개의 GitHub 저장소 (실제 랜딩 페이지에서 테스트 완료) - AI 디자인 강좌를 건너뛰세요: 이 저장소들이 모든 것을 다룹니다 참고 자료, 레이아웃 검사, 디자인 감각, 스타일 가이드 및 론칭 비주얼 실제 참고 자료를 활용한 A