WEBBOOK CHAPTER

AI 웹 디자인 디렉팅: 20장 Figma·prompt-to-app·code agent의 역할을 분리한다

20장 Figma·prompt-to-app·code agent의 역할을 분리한다

2026년 8월 Figma 공식 도움말은 Figma agent, Figma Make, 개별 AI 도구를 구분한다. Make는 prompt나 기존 design에서 functional prototype을 만들고 code를 수정할 수 있다. Sites에는 code layer, text rewrite, content replacement, image 생성·편집이 있다. 기능 가용성은 plan과 시점에 따라 달라진다.

도구보다 작업을 선택한다.

작업 적합한 표면 사람의 책임
빠른 방향 발산 canvas/AI design tool reference·criteria·rights
task flow prototype prompt-to-app 실제 state·오류·content
token·component 정리 design system + code naming·governance
production 구현 code agent + repository security·performance·test
visual QA browser screenshot·diff 허용 차이와 severity

generated prototype이 외부 font·package·image를 가져올 수 있으므로 publish 전에 dependency와 권리를 확인한다. tool이 export한 code를 “공식 production code”라고 가정하지 않는다.

brief에서 evidence로 순환하는 AI 디자인 반복 루프
brief에서 evidence로 순환하는 AI 디자인 반복 루프

4부 화면을 실제 서비스로 만든다