Startseite / Video

Design mit AI: Claude, Codex, Figma | Vollständiger Leitfaden

UI Collective · UI Collective · ·87:43 ·61.9K Aufrufe
Design mit AI: Claude, Codex, Figma | Vollständiger Leitfaden

Lerne, mit AI zu designen: Claude von Anthropic, Codex von OpenAI, Google Stitch, Mobbin und Figma. Dieser umfassende Leitfaden zeigt, wie ich AI-Tools in echten Product-Design-Workflows nutze – von der frühen Ideenfindung und UX-Thinking bis zum Wireframing

Vollständige Beschreibung

Lerne, mit AI zu designen: Claude von Anthropic, Codex von OpenAI, Google Stitch, Mobbin und Figma. Dieser umfassende Leitfaden zeigt, wie ich AI-Tools in echten Product-Design-Workflows nutze – von der frühen Ideenfindung und UX-Thinking bis zum Wireframing, hochauflösendem Design, Design Systems, Prototyping und produktionsreifen UIs. Wir schauen uns an, wo Claude, Codex, Google Stitch, Mobbin und Figma in den Design-Prozess passen, wie man generische AI-Ergebnisse vermeidet, und wie Designer schneller arbeiten, bessere Entscheidungen treffen und weniger Tokens verbrauchen – ohne Geschmack, Struktur oder Kontrolle zu verlieren. 🔗 WICHTIGE LINKS 📣 COMMUNITY BEITRETEN: https://uicollective.co/ ❎ Folge mir auf X: https://x.com/KirkMDesign Warum der UI Collective Academy beitreten? Zugang zu Premium-Kursen, Premium-Downloads und vielem mehr (ich baue das weitgehend allein auf... um Design-Bildung für alle verfügbar zu machen, jede Unterstützung hilft!) ↪️ Brauchst du ein Design System? (auch in der Academy enthalten): https://collectivekit.co/ 🔗 WEITERE SYSTEM-VIDEOS Design System bauen: https://youtu.be/opTANvl9G1g Komplexes Design System & Figma Variable Setup: https://youtu.be/L-tpK7Eeuow Claude Design Video: https://youtu.be/eXlSgQmz02E 🔗 WEITERE LINKS Lass uns dein Design System bauen oder reparieren: https://designsystemlabs.co/ 📣 Spare 20% beim jährlichen Mobbin-Plan: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design [email protected] 0:00 Eine Einführung 0:52 AI ist kein Tool, AI ist ein Workflow 6:43 Der AI Design Stack 7:32 Claude vs Codex 9:16 AI Design Setup (Figma Skills & Figma MCP) 16:31 Google Stitch 21:27 Wo ich Stitch in meinem Workflow nutze 23:29 Claude Design 27:01 Claude Design Output 28:35 Wann man Google Stitch mit Claude Design nutzt 31:44 Claude Design Limitation 32:35 Claude und Codex Vergleichsexperiment 38:25 Beste Nutzung von AI Tokens 40:45 Design Systems und AI 42:04 Claude Design Design System Limitations 45:32 Design Tokens mit AI aufbauen 49:01 Figma Variables und AI 52:26 Design System Components und AI 58:32 AI auf unserem Design System trainieren 1:01:34 Design System Claude Skills 1:08:04 Components und Claude Skills 1:13:48 Claude Skills zu Codex hinzufügen 1:15:09 AI und Design Research mit Mobbin 1:17:24 Production UIs mit Claude Code bauen 1:22:43 UIs mit ChatGPT bauen 1:24:26 Unser AI Design verfeinern 1:25:13 In Figma pushen und finales Ergebnis 1:27:08 Outro

Kapitel

  1. 0:00 An Introduction
  2. 0:52 AI is Not a Tool, AI is a Workflow
  3. 6:43 The AI Design Stack
  4. 7:32 Claude vs Codex
  5. 9:16 AI Design Setup (Figma Skills & Figma MCP)
  6. 16:31 Google Stitch
  7. 21:27 Where I Use Stitch In My Workflow
  8. 23:29 Claude Design
  9. 27:01 Claude Design Output
  10. 28:35 When to Use Google Stitch With Claude Design
  11. 31:44 Claude Design Limitation
  12. 32:35 Claude and Codex Comparison Experiment
  13. 38:25 Best Use of AI Tokens
  14. 40:45 Design Systems and AI
  15. 42:04 Claude Design Design System Limitations
  16. 45:32 Building Design Tokens with AI
  17. 49:01 Figma Variables and AI
  18. 52:26 Design System Components and AI
  19. 58:32 Training AI On Our Design System
  20. 61:34 Design System Claude Skills
  21. 68:04 Components and Claude Skills
  22. 73:48 Adding Claude Skills to Codex
  23. 75:09 AI and Design Research with Mobbin
  24. 77:24 Building Production UI’s with Claude Code
  25. 82:43 Building UI’s with Chat GPT
  26. 84:26 Refining Our AI Design
  27. 85:13 Pushing to Figma and Final Result
  28. 87:08 Outro
Auf YouTube ansehen Der Inhalt befindet sich auf der Website des ursprünglichen Herausgebers.
Kuratiert für die Codex-Design-Community als designer-Ressource zum Designen mit OpenAI Codex.