Startseite / Video

Neuer Codex Design Workflow macht Codex besser als die meisten Designer

Lukas Margerie · Lukas Margerie · ·9:11 ·17.0K Aufrufe
Neuer Codex Design Workflow macht Codex besser als die meisten Designer

Der Codex Design Workflow für polierte SaaS Landing Pages — mit 4 Skills: MagicPath, Mobbin MCP, Make Interfaces Feel Better und skills.sh. Ohne Figma. Von einer grundlegenden AI-Default Landing Page zu einer polierten, mobil-responsiven Website mit

Vollständige Beschreibung

Der Codex Design Workflow für polierte SaaS Landing Pages — mit 4 Skills: MagicPath, Mobbin MCP, Make Interfaces Feel Better und skills.sh. Ohne Figma. Von einer grundlegenden AI-Default Landing Page zu einer polierten, mobil-responsiven Website mit benutzerdefinierten 3D-Illustrationen, mehreren Hero-Varianten und einem Live Vercel Deploy. Alles in Codex. Wenn du Designer oder Design Engineer bist und mit AI-Agenten arbeitest, ist das der Skill Stack zum Kopieren. Ich habe MagicPath AI, den Skill "Make Interfaces Feel Better" und das Mobbin MCP kombiniert, um eine komplette Landing Page für ein fiktives AI Sleep Apnea Startup zu designen. Das Ergebnis? Benutzerdefiniertes Logo, 3D-Illustrationen, mobil-responsives Layout, mehrere Hero-Bereich-Varianten und eine vollständig einsatzbereit Website — alles von einem AI-Agenten designt. 🎯 Was du lernen wirst ✅ MagicPath in Codex einrichten (Figma-ähnliche unendliche Canvas) ✅ Skills mit skills.sh finden und installieren ✅ Jakub Krehels "Make Interfaces Feel Better" für Perfektion anwenden ✅ Benutzerdefinierte 3D-Icons + Logos mit GPT Image in Codex generieren ✅ Mobbin MCP nutzen, um Hero Sections von echten SaaS-Sites zu remixen ✅ Das finale Design auf einen Live Vercel Preview Domain deployen 💬 Tritt meinen kostenlosen Communities bei (ich bin täglich live!) Tritt dem Creator Network Discord bei: https://discord.com/invite/vZxn6wZrDD Tritt dem nächsten Live Build bei: https://www.skool.com/builderzgym 🔗 Erwähnte Tools & Ressourcen: Codex: https://openai.com/codex/ Mobbin MCP → https://mobbin.com/?via=lukas MagicPath: https://magicpath.ai?utm_source=YouTube&utm_medium=YouTube&utm_campaign=YT-external-agent skills.sh: https://www.skills.sh/ "Make Interfaces Feel Better" : https://www.skills.sh/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better Mobbin MCP Video: https://youtu.be/cu-Qq-47Rk8 ⏱️ Zeitstempel: 0:00 – Intro & grundlegende AI Landing Page 1:10 – MagicPath: Codex' unendliche Canvas 2:38 – AI-generierte Illustrationen & Assets 3:37 – UI-Optimierung mit Design Skills 6:54 – Hero-Varianten mit Mobbin MCP 8:27 – Deploy auf eine Vercel Domain 💬 Schreib mir in den Kommentaren: Welcher nächste AI Design Workflow soll ich testen? 👍 Falls dir das geholfen hat, gib mir einen Like und abonniere für mehr AI Workflows, Skill Stacks und Codex Tutorials. 📺 Mehr davon Codex in eine unendliche Design Canvas verwandeln: https://youtu.be/EP6NPRV9rzM 📲 LASS UNS VERBUNDEN BLEIBEN X: https://x.com/lukas_margerie LinkedIn: https://www.linkedin.com/in/lukas-margerie-99196118a/ #Codex #MagicPath #MobbinMCP #AIDesign #AIWorkflow #LandingPage #VibeCoding #AItools #WebDesign #SkillsSH

Kapitel

  1. 0:00 Intro & basic AI landing page
  2. 1:10 MagicPath: Codex's infinite canvas
  3. 2:38 AI-generated illustrations & assets
  4. 3:37 UI polish with design skills
  5. 6:54 Hero variants with Mobbin MCP
  6. 8:27 Ship to a Vercel domain
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.