Engineering
Prompt Engineering
AI Design Prompt Gist
Index

AI 디자인 프롬프트 Gist

이 페이지는 AI 디자인 작업을 위한 다양한 프롬프트와 가이드라인을 모아놓은 Gist 문서들을 한국어로 번역하고 정리한 것입니다. Figma, Apple HIG, Shadcn, Aceternity UI 등 다양한 디자인 시스템과 관련된 구체적인 지침과 모범 사례를 다룹니다. 이 문서는 AI 기반 디자인 워크플로우를 구축하고, 디자인 작업의 효율성과 일관성을 높이는 것을 목표로 합니다.

문서 요약

AI 및 MCP 관련 프롬프트

AI 에이전트, 특히 MCP(Model Context Protocol)를 통해 Figma와 상호작용하는 방법에 대한 프롬프트와 가이드라인입니다.

Figma 모범 사례

Figma 사용 시 생산성과 일관성을 높일 수 있는 모범 사례와 가이드라인입니다.

Apple Human Interface Guidelines (HIG)

Apple의 HIG를 Figma 디자인에 적용하는 방법에 대한 상세 가이드입니다.

Shadcn UI

현대적이고 미니멀한 디자인으로 유명한 Shadcn UI에 대한 디자인 원칙과 Figma 가이드라인입니다.

Aceternity UI

유동적이고 역동적인 레이아웃이 특징인 Aceternity UI에 대한 디자인 원칙과 가이드라인입니다.

기타

디자인 및 역할에 대한 일반적인 가이드라인입니다.

유용한 프롬프트 목록

다음은 Figma 디자인 작업을 자동화하고 개선하는 데 사용할 수 있는 유용한 프롬프트 예시입니다.

오토레이아웃 적용

1. mcp 채널 `6dkiglef`를 통해 Figma의 현재 디자인을 분석합니다.
2. 분석을 기반으로 Figma 오토레이아웃을 적용합니다. 관련 원칙은 다음 링크에서 다운로드할 수 있습니다:
    - [`figma autolayout overview.md`](/engineering/prompt/ai-design-prompt-gist/figma-autolayout-overview)
    - [`Best Practices for Using Auto Layout in Figma.md`](/engineering/prompt/ai-design-prompt-gist/comprehensive-guide-to-figma-auto-layout)
3. 레이어 및 컴포넌트 이름 지정도 함께 수행합니다: [`figma-project-structure-best-practices.md`](/engineering/prompt/ai-design-prompt-gist/figma-project-structure-best-practices)

디바이스 프레임 추가

- iPhone 16 Pro Max 세로 모드용 디바이스 프레임을 추가하는 계획을 세웁니다.
- 화면 크기, 안전 영역, 디바이스 베젤을 정확하게 설정해야 합니다.
- Figma 모범 사례 가이드라인에 따라 프레임을 적절하게 구성합니다: [`figma-project-structure-best-practices.md`](/engineering/prompt/ai-design-prompt-gist/figma-project-structure-best-practices)
- 디바이스 메트릭 지침: [`apple-devices-figma-frames.md`](/engineering/prompt/ai-design-prompt-gist/instructions-for-figma-frames-for-common-apple-devices)

Apple HIG 준수 디자인

Apple의 인간 인터페이스 가이드라인(HIG)을 준수하여 디자인합니다.
- 레이아웃/간격: [`Apple-HIG-Layout-Spacing-in-Figma.md`](/engineering/prompt/ai-design-prompt-gist/apple-hig-implementing-layout-spacing-figma)
- 타이포그래피: [`Apple-Human-Interface-Typography-Guide-Figma-Centric Edition.md`](/engineering/prompt/ai-design-prompt-gist/apple-human-interface-typography-guide-figma-focused-perspective)
- 색상: [`overview-of-apples-HIG-visual-design-for-color-for-figma-design.md`](/engineering/prompt/ai-design-prompt-gist/apple-hig-color-figma-design)

디자인 리팩토링

Figma mcp를 사용하여 현재 디자인을 분석하고, 마스터 참조 이미지와 비교하여 간격, 크기, 레이아웃, 색상, 요소 등 누락된 부분을 파악하고 수정 계획을 세웁니다.

폰트 교체

- 모든 폰트를 "SF Pro Text"로 교체하고 적절한 두께를 적용합니다.
- "SF Pro Text"의 네이밍 규칙에 대한 자세한 내용은 다음을 참조하십시오: [`SF_Pro_Text_in_Figma.md`](/engineering/prompt/ai-design-prompt-gist/sf-pro-text-in-figma)
Design ImplementMCP와 Figma를 이용한 디자인 리팩토링