단체방 디자인 요청 - Stitch 요청 프롬프트

postgresql.co.kr 문의 단체방 기능이 있으면 좋을 것 같아서 Stitch에 디자인 요청 프롬프트를 초안 작성 후, AI에게 영어로 다시 프롬프트를 생성하도록 요청했습니다.

조만간 단체방 기능을 맞이하실 수 있을 것 같아요.

[초안]

text

다음 내용을 Google Stitch에 디자인 프롬프트로 디자인을 요청하려고 해. 추가 프롬프트가 있으면 추천해 줘.
Next.js 16, Mui v7 기반 단체 채팅방 인앱을 만들려고 해.

[목적]
개발자 커뮤니티에서 서로 질문 사항이나 문의가 있을 때 소통 창구로 단체 채팅방을 이용하려고 함.

[기능 - 요구사항]
1. 앱(모바일), 웹(데스크톱) 모두 지원
  - 기존 앱, 웹 안에서 인앱 기능으로 동작
2. 현재 접속 중인 사용자 정보 표시
3. 메시지 입력창은 첨부 파일, 주제(카테고리) 선택 가능해야 함
4. 메시지 출력 부분은 아바타, 시간, 메시지 등을 표시하고 송신자/수신자 구분이 명확해야 함
5. 디자인은 sleek & clear 하면서 모던 단체 채팅 앱 스타일로 구성
6. 디자인은 업계 표준 디자인 가이드를 준수
7. 기능은 단체 채팅방에 필요한 최소 기능 이상 디자인에 반영

[제약사항]
1. tailwind.css를 사용하지 말 것
2. MUI v7 이상 디자인을 적용

다시 AI에게 프롬프트 생성 요청

AI에게 요청: 위의 프롬프트에서 Google Stitch에 디자인적으로 보완할 부분이 있다면 추가하여 영어 프롬프트를 생성해 줘.

[결과]

text

Design a modern group chat in-app interface for a developer community using Next.js 16 and MUI v7.

Purpose:
This group chat is used as a communication channel inside an existing app and web service, allowing developers to ask questions and discuss topics in real time.

Platform:
- Responsive design for both mobile app and desktop web
- In-app embedded UI (not a standalone messenger)

Core UI Requirements:
- Display currently online users clearly (avatars + status indicator)
- Message input area must support:
  - File attachments
  - Topic / category selection before sending
- Message list should clearly distinguish sender and receiver:
  - Avatar
  - Timestamp
  - Message bubble alignment
- Clean separation between system messages and user messages

Design Style:
- Sleek, clear, and modern group chat UI
- Professional developer-tool aesthetic
- Minimal but information-rich layout
- High readability for long technical conversations

Design Constraints:
- Do NOT use Tailwind CSS
- Follow MUI v7 design patterns and Material Design 3 principles
- Use MUI components such as AppBar, Drawer, List, Avatar, Chip, Badge, TextField

Accessibility & Standards:
- Follow industry-standard UX patterns for chat applications
- Ensure accessibility (contrast, font size, touch targets)

Deliverables:
- Main chat screen
- User list / presence panel
- Message composer with attachment & category selector

[실제 stitch 결과물]

단체방 디자인 요청 - Stitch 요청 프롬프트

중년개발자

다시 AI에게 프롬프트 생성 요청

댓글 0