주석 기반 UI: Figma에서 템플릿을 디자인하고 Claude가 좌표를 추출하도록 하는 방법

Zinecore를 개발하는 개발자는 90년대/y2k 미학(핫핑크, 굵은 윤곽선, 말풍선, riot grrrl 전단지, MySpace 스타일 페이지)을 가진 진 만들기 앱에서, 코드로 사진 슬롯을 프로그래밍 방식으로 정의하는 당연한 접근 방식이 모든 템플릿을 지루한 그리드로 제한한다는 것을 발견했습니다. 해결책: Figma에서 템플릿을 디자인하고(일부는 AI 생성 후 정리), 플랫 PNG로 내보낸 후, 별도 레이어에 색칠된 사각형을 그립니다. 빨간색은 사진 슬롯, 파란색은 텍스트입니다. 디자인과 주석 이미지 모두를 Claude에 제공합니다.

Claude는 좌표를 추출하고, 편집 가능한 영역 정의를 생성하며, 탭 대상을 연결합니다. 결과: 커스텀 레이아웃 엔진을 구축하는 데 몇 주가 걸릴 작업을 오후에 끝냈습니다. 이제 새 템플릿을 추가하려면 디자인하고 상자만 그리면 됩니다—코드 변경이 필요 없습니다. 전체 디자인 도구 시스템은 이 주석 파이프라인입니다.

더 넓은 패턴: 종이 우선 디자인

개발자는 작업 흐름의 변화를 강조합니다:

• Claude에 아무것도 보여주기 전에 모든 디자인 사고를 종이에 먼저 합니다.
• 화면을 손으로 스케치하고, 전체 색상 팔레트를 선택하며, 타이포그래피 계층을 결정합니다.
• 마음에 드는 앱을 스크린샷으로 찍고, 각각에서 가져오고 싶은 특정 요소에 주석을 답니다.
• Claude에 제약 조건을 주고 구현을 요청합니다.

반대 방향으로 가는 것("앱을 디자인해 줘, 90년대처럼 보이게")은 여전히 평범한 결과물에 도달하기까지 사흘을 보내게 만듭니다. Claude는 특정 비전을 충실히 구현하는 데 강하지만, 당신을 위한 비전을 갖는 데는 약합니다. 디자인을 당신의 작업으로, 구현을 Claude의 작업으로 취급하면 출력 품질이 급상승합니다.

화려하지 않은 세부 사항

• 시각적 문제를 "이상하다, 고쳐 줘" 대신 무게, 계층, 리듬으로 설명하세요.
• "따뜻한 핑크"라고 말하는 대신 실제 참조 사진에서 16진수 코드를 붙여 넣으세요.
• 어떤 앱의 간격을 흉내내려는지 구체적으로 말하세요—분위기만 언급하지 마세요.

앱(App Store의 Zinecore)은 구체적인 결과물이지만, 종이 우선 주석 방법이 전이 가능한 부분입니다.