Skip to main content
디자인 가이드라인을 사용하면 색상, 타이포그래피, 간격, 컴포넌트 규칙 등의 고정된 규칙을 설정할 수 있으며, Flowstep이 파일의 모든 AI 생성과 편집에 적용합니다. 매 프롬프트마다 “우리의 파란색 테마를 사용하세요”라고 반복하는 대신, 한 번 작성하면 그 이후로 AI가 이를 따릅니다.

디자인 가이드라인 편집하기

1

Design guidelines 모달 열기

채팅 패널 헤더에서 Edit design guidelines 버튼을 클릭합니다. Design guidelines 모달이 DESIGN.md 텍스트 편집기와 함께 열립니다.
2

가이드라인 작성 또는 가져오기

가이드라인을 직접 입력하거나 .md 파일을 편집기로 드래그 앤 드롭하여 가져옵니다. 형식은 Google의 오픈 design.md 표준을 따릅니다 — 선택적 YAML 머리말(인식되는 키: version, name, description, colors, typography, rounded, spacing, components) 다음에 Markdown 섹션이 옵니다.
3

저장하기

Save changes를 클릭합니다. 이제부터 이 파일의 모든 생성과 편집이 가이드라인을 필수 컨텍스트로 사용합니다.
가이드라인은 향후 출력에만 적용됩니다 — 기존 디자인은 그대로 유지됩니다. 현재 파일로 범위가 제한되며 다른 파일로 전달되지 않습니다.

알아두면 좋은 정보

  • 길이 제한 — 가이드라인은 최대 50,000자까지 가능합니다. 그 이상의 파일은 잘립니다.
  • 검증 — YAML 머리말이 닫혀 있지 않거나 ## 섹션 제목이 중복되는 등의 구조적 오류는 저장을 막습니다. 인식되지 않는 YAML 키나 유효하지 않은 16진 색상 코드 같은 더 완화된 문제는 경고를 표시하지만 여전히 저장됩니다.
  • 내보내기 — 모달의 Copy raw fileDownload 버튼을 사용하여 DESIGN.md를 복사하거나 다운로드합니다.
  • 가이드라인 제거 — 텍스트 필드를 비우고 저장하면 해당 파일의 가이드라인을 제거합니다.

Flowstep이 가이드라인을 자동으로 업데이트합니다

프롬프트에서 고정된 스타일 지침을 제공하면 — 예를 들어 “이제부터 파란색 테마를 사용하세요” — Flowstep이 이를 감지하고 디자인 가이드라인을 자동으로 업데이트하며, 채팅에서 “Updated your design guidelines to use [style] for future generations.”이라고 확인합니다. “파란색으로 만들어”와 같은 일회성 요청은 가이드라인을 변경하지 않으며 해당 생성에만 영향을 줍니다.

MCP를 통한 디자인 가이드라인

MCP 서버를 통해 작업하면 get-design-guidelines, update-design-guidelines, delete-design-guidelines 도구가 동일한 가이드라인을 읽고 쓰므로 IDE 워크플로우와 웹앱이 동기화됩니다. 도구 참고를 참조하세요.