Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

최근 펜슬이란 툴을 알게되어 클로드코드와 연합해 기존작성된 투박했던 디자인을 리뉴얼(새로운페이지로 시작) 시도 해보았습니다.

  • 펜슬디자인 → 디자인 코드 생성 by Claude → 디자인된 코드내에 기능 구현 → 배포

사전준비

클로드 코드가 이미 터미널에 준비되어 있고, PencilXClaudeCode 를이용해

펜슬준비

  • https://www.pencil.dev/ 다운로드
  • 가입과정 거친후
  • claude 최초 연동  
    • 연동과정중 이미 설치되어 있으면 claude 만 입력하면 끝 , claude code 전역에 펜슬 mcp가 연동
Warning

이 과정은 펜슬이 최초 연동되고 확인 되는 과정이여서 이 공간에서는 작업안해도 됩니다. - 펜슬의 설치공간


펜슬사용 준비환경

  • 자신이 익숙한 work space에서 ide를 이용해 claude를 동일하게 사용하면 됩니다. 
  • 펜슬파일 확장자는 pen으로 .. 자신의 프로젝트 작업공간 하위에 배치시켜 형상관리를 함께하면 됩니다.
    • 펜슬에서 new 한후 저장하기


기존 디자인

  • 첫 메모리가 25.8월 


디자인 정의 펜슬파일 배치

...