/ 영상

새로운 Codex 디자인 워크플로우로 대부분의 디자이너보다 나은 Codex 만들기

Lukas Margerie · Lukas Margerie · ·9:11 ·17.0K 조회수
새로운 Codex 디자인 워크플로우로 대부분의 디자이너보다 나은 Codex 만들기

광택 있는 SaaS 랜딩 페이지를 위한 Codex 디자인 워크플로우 — 4가지 스킬 활용: MagicPath, Mobbin MCP, Make Interfaces Feel Better, skills.sh. Figma 불필요. 기본 AI 기본 랜딩 페이지에서 완성도 높은 모바일 반응형 사이트로

전체 설명

광택 있는 SaaS 랜딩 페이지를 위한 Codex 디자인 워크플로우 — 4가지 스킬 활용: MagicPath, Mobbin MCP, Make Interfaces Feel Better, skills.sh. Figma 불필요. 기본 AI 기본 랜딩 페이지에서 커스텀 3D 일러스트레이션, 여러 히어로 변형, 라이브 Vercel 배포를 갖춘 완성도 높은 모바일 반응형 사이트로. 모두 Codex 내에서 가능합니다. AI 에이전트로 작업하는 디자이너나 디자인 엔지니어라면, 이 스킬 스택을 복사해야 합니다. MagicPath AI, "Make Interfaces Feel Better" 스킬, Mobbin MCP를 결합하여 가상 AI 수면무호흡증 스타트업의 완전한 랜딩 페이지를 디자인했습니다. 결과는? 커스텀 로고, 3D 일러스트레이션, 모바일 반응형 레이아웃, 여러 히어로 섹션 변형, 완전히 배포 가능한 사이트 — 모두 AI 에이전트로 디자인했습니다. 🎯 배울 내용 ✅ Codex 내에서 MagicPath 설정 (Figma 스타일 무한 캔버스) ✅ skills.sh로 스킬 찾기 및 설치 ✅ Jakub Krehel의 "Make Interfaces Feel Better"로 광택 내기 ✅ Codex 내 GPT 이미지로 커스텀 3D 아이콘 및 로고 생성 ✅ Mobbin MCP로 실제 SaaS 사이트의 히어로 섹션 리믹스 ✅ 최종 디자인을 라이브 Vercel 미리보기 도메인으로 배포 💬 무료 커뮤니티 가입 (매일 라이브 방송!) Creator Network Discord 가입: https://discord.com/invite/vZxn6wZrDD 다음 라이브 빌드 참여: https://www.skool.com/builderzgym 🔗 언급된 도구 및 리소스: 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 영상: https://youtu.be/cu-Qq-47Rk8 ⏱️ 타임스탬프: 0:00 – 소개 및 기본 AI 랜딩 페이지 1:10 – MagicPath: Codex의 무한 캔버스 2:38 – AI 생성 일러스트레이션 및 자산 3:37 – 디자인 스킬로 UI 광택 내기 6:54 – Mobbin MCP로 히어로 변형 8:27 – Vercel 도메인으로 배포 💬 댓글에서 알려주세요: 다음으로 테스트하고 싶은 AI 디자인 워크플로우는 무엇인가요? 👍 도움이 되었다면 좋아요를 누르고 AI 워크플로우, 스킬 스택, Codex 튜토리얼을 더 보려면 구독하세요. 📺 비슷한 콘텐츠 Codex를 무한 디자인 캔버스로 변환: https://youtu.be/EP6NPRV9rzM 📲 연락처 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

챕터

  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
YouTube에서 보기 콘텐츠는 원본 게시자의 사이트에 있습니다.
OpenAI Codex로 디자인하기에 관한 designer 자료로서 Codex-Design 커뮤니티를 위해 엄선했습니다.