Claude Design(https://claude.ai/design)을 사용해 개인 영어 표현 학습 서비스 Memento의 디자인 개선을 시도해봤다.
데모 영상 몇 분 본 상태에서 일단 부딪혀 봤다.
로컬에 있는 소스코드 폴더를 입력으로 넣고 다짜고짜 디자인을 개선해 달라고 했다.
작업이 끝난 후 메인 패널에서 변경된 디자인을 사용해보면서, 특정 UI 컴포넌트를 지정한 상태에서 디자인을 세부 조정하거나 클로드에 요청사항을 전달할 수 있다.
개선된 디자인은 정말 마음에 들었다. 당장 서비스에 적용하는 단계로 넘어갔다.
Export 메뉴에서 Claude Code 적용을 위한 압축 파일을 다운로드 받을 수 있다.
memento
├── project
│ ├── handoff
│ │ ├── App.css
│ │ ├── index.css
│ │ ├── Login.css
│ │ ├── Login.jsx
│ │ └── README.md
│ ├── Memento Redesign (Standalone).html
│ └── Memento Redesign.html
└── README.mdPrompt를 사용해서 적용하는 것도 가능하다.
Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/hx0HKDRsN03rtc4utkcYgQ?open_file=Memento+Redesign.html
Implement: Memento Redesign.html그러나 아쉽게도 잘 되지 않았다. 부분적으로만 변경된 디자인이 반영되었다. 아직 Research Preview 상태여서 그럴까? handoff 폴더의 파일들은 완전하진 않은 듯 하다.
완성도는 빠르게 좋아질 것이다.
일단 시도하고 부딪혀보는 사람이 기회를 얻는 세상이 왔다.