AI SummaryA design system prompt for rebuilding the Safe Pet Food platform (a pet food analysis and community tool) with consistent styling, colors, typography, and component patterns across Next.js 14 projects. Useful for developers maintaining or extending this specific pet wellness application.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "safe-pet-food — System Prompt" prompt rules to my project. Repository: https://github.com/joyfuldoy1015/safe-pet-food Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Making the world a better place for the pets and pet-fams
🎯 프로젝트 개요
Safe Pet Food는 반려동물 사료 분석 및 커뮤니티 플랫폼입니다. Next.js 14, TypeScript, Tailwind CSS를 기반으로 구축되었으며, 모바일 최적화와 일관된 디자인 시스템을 갖추고 있습니다.
1. 컬러 팔레트
배경 그라데이션 • 메인 페이지: bg-gradient-to-br from-yellow-50 via-white to-orange-50 • 일반 페이지: bg-gradient-to-br from-blue-50 via-white to-cyan-50 • 커뮤니티 페이지: bg-gradient-to-br from-purple-50 via-white to-pink-50 주요 그라데이션 조합 • 사료/급여: from-orange-500 to-pink-500 • 건강/케어: from-green-500 to-teal-500 • 커뮤니티: from-purple-500 to-pink-500 또는 from-blue-500 to-purple-500 • 액션 버튼: from-purple-500 to-pink-500 (호버: from-purple-600 to-pink-600) • 위험/경고: from-red-500 to-orange-500 • 성공: from-green-500 to-emerald-500 메타데이터 태그 컬러 • 강조 정보 (나이, 급여일): bg-yellow-400 text-black • 통계 정보 (조회, 추천, 댓글): bg-gray-50 border border-gray-200 text-gray-700 • 헤더 배경: bg-yellow-400 또는 그라데이션
2. 타이포그래피
• 폰트: Inter (Google Fonts) • 기본 크기: • 제목: text-2xl sm:text-3xl font-bold • 부제목: text-xl sm:text-2xl font-bold • 본문: text-base sm:text-lg • 작은 텍스트: text-xs sm:text-sm • 가중치: font-bold, font-semibold, font-medium
3. 카드 디자인
기본 카드 스타일 ` bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8 hover:shadow-2xl transition-all duration-300 ` 카드 높이 • 고정 높이: min-h-[350px] • 반응형: h-full flex flex-col • 내부 콘텐츠: flex-1 (남은 공간 채우기) 카드 내부 요소 • 그라데이션 아이콘 컨테이너: w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-[color]-500 to-[color]-500 rounded-2xl flex items-center justify-center shadow-lg • 섹션 헤더: 그라데이션 아이콘 + 제목 텍스트 • 구분선: border-l-4 border-[color] (분석 기준별 고유 색상)
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts