프롬프트 템플릿 모음으로

프롬프트 템플릿 모음

이온디 24

템플릿 1: 기본 페이지 퍼블리싱

작업경로: layouts/lllayer_kda/assets/pages/_about_english.html
레이아웃에 SCSS 작성, HTML은 구조만
반응형: PC → Mobile 축소
푸터는 레이아웃 담당, 컨텐츠 영역만 작업

피씨 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=XXX

태블릿 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=YYY

모바일 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=ZZZ

[스크린샷 첨부]

템플릿 2: 모듈 스킨 퍼블리싱

작업경로: modules/member/skins/lllayer_kda_member
gnb, footer는 레이아웃 담당
SCSS는 layouts/lllayer_kda/assets/css/components/_member.scss
HTML은 위 모듈 경로에 작성
반응형: PC우선 → 축소

로그인 폼만 작업 (GNB/Footer 제외)

피씨 이 1개의 디자인을 Figma에서 구현하세요.
@https://www.figma.com/design/...?node-id=XXX

템플릿 3: 애니메이션 요청

이 1개의 디자인을 Figma에서 코멘트를 보고 애니메이션을 구현하세요.

layouts/lllayer_kda/assets/pages/_service.html 파일에 적용

@https://www.figma.com/design/...?node-id=XXX

애니메이션 요구사항:
- THE WORLD'S BEST: 페이드업 모션
- 이미지 영역: 마퀴 모션 (호버 시 스탑 없음)
- Vision Beyond: 페이드업 모션

템플릿 4: 다국어 번역

layouts/lllayer_kda/assets/pages/_about_korea.html

위 파일의 영문 버전을 아래 피그마를 보고
한글 버전으로 텍스트를 수정해주세요.

@https://www.figma.com/design/...?node-id=XXX

템플릿 5: 반응형 3단계 작업

작업경로: layouts/xxx/assets/pages/_page.html

이 페이지의 반응형을 구현해주세요.

## PC (1440px 이상)
@https://www.figma.com/design/...?node-id=PC_NODE

## Tablet (768px ~ 1439px)
@https://www.figma.com/design/...?node-id=TABLET_NODE

## Mobile (767px 이하)
@https://www.figma.com/design/...?node-id=MOBILE_NODE

스타일 분리:
- 공통 스타일: _page.scss
- 반응형: @media queries 사용

템플릿 6: 토큰 기반 정밀 퍼블리싱

작업경로: layouts/xxx/assets/pages/_page.html
SCSS경로: layouts/xxx/assets/css/components/_page.scss

## 디자인 토큰 (반드시 준수)

### Typography
| 요소 | font-size | line-height | font-weight |
|-----|-----------|-------------|-------------|
| H1 | 64px | 1.2 | 700 |
| H2 | 48px | 1.3 | 600 |
| H3 | 32px | 1.4 | 600 |
| Body | 18px | 1.6 | 400 |
| Caption | 14px | 1.5 | 400 |

### Spacing
| 용도 | 값 |
|-----|-----|
| Section gap | 80px |
| Inner gap | 48px |
| Container padding | 24px (mobile: 16px) |

### Breakpoints
| 디바이스 | 뷰포트 | Inner width |
|---------|--------|-------------|
| Wide | 3440px | 2590px |
| PC | 1920px | 1720px |
| Tablet | 768px | 688px |
| Mobile | 360px | 324px |

피씨 이 1개의 디자인을 Figma에서 구현하세요.
**위 토큰 값을 정확히 적용해주세요.**

@https://www.figma.com/design/...?node-id=XXX

[스크린샷 첨부]

사용 시점: Figma MCP가 수치를 정확히 가져오지 못해 글자 크기, 간격이 틀어지는 경우

핵심 포인트: - 프롬프트에 토큰 표를 명시하면 AI가 정확한 값을 적용 - SCSS 변수 시스템과 함께 사용하면 일관성 향상 - Figma Dev Mode에서 추출한 정확한 값 사용

프롬프트 작성 팁

✅ 좋은 프롬프트의 구성요소

  1. 작업 경로 명시

    • HTML 파일 경로
    • SCSS 파일 경로

  2. 역할 분리 명시

    • GNB/Footer는 누가 담당하는지
    • 레이아웃 vs 모듈 구분

  3. 반응형 전략

    • PC 우선 → 축소
    • 또는 모바일 퍼스트

  4. Figma URL 제공

    • 각 브레이크포인트별 node-id

  5. 스크린샷 첨부

    • URL만으로 부족할 때 필수

❌ 나쁜 프롬프트 vs ✅ 좋은 프롬프트

나쁜 예 좋은 예
"피그마 보고 코드 만들어줘" "Header 섹션(41-3)을 Tailwind로 구현해줘"
"전체 파일 분석해줘" "메인 페이지의 컴포넌트 구조를 파악해줘"
"디자인이랑 똑같이 만들어줘" "색상, 간격, 폰트를 디자인과 동일하게 맞춰줘"
"다 만들어줘" "버튼 → 카드 → 네비게이션 순으로 진행해줘"
목록으로