디자인 시스템과 AI를 활용한 프론트엔드 마크업 자동화 실전 가이드

import { Button } from "@defign/ui";

/**
 * @figma-component-id 123:456
 */
export const ButtonPreview = () => (
  <Button 
    variant="primary" 
    size="medium" 
    label="확인" 
  />
);

# 마크업 작업 기본 원칙
1. @defign/ui, @defign/icon 패키지를 최우선으로 사용한다.
2. Code Connect 매핑 정보를 기반으로 코드를 생성한다.
3. 임의의 마진이나 패딩을 추측하지 말고 디자인 토큰을 활용한다.
4. 레이아웃은 FlexibleLayout 컴포넌트를 기준으로 구성한다.