redesign-existing-projects
프리미엄 디자인 표준으로 기존 프로젝트 업그레이드
AI로 생성된 웹사이트는 동일한 일반적인 패턴을 공유하는 경우가 많아 구별이 어렵습니다. 이 스킬은 기존 프로젝트를 감사하고 대상 디자인 업그레이드를 적용하여 코드베이스를 다시 작성하지 않고도 세련되고 프리미엄한 모습을 만들어줍니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"redesign-existing-projects" 사용 중입니다. Tailwind CSS로 구축된 마케팅 사이트에서 디자인 감사 실행
예상 결과:
- 타이포그래피: 모든 텍스트에 Inter 사용, 헤드라인 무게 변동 부족, 단락이 뷰포트 전체 너비로 확장
- 색상: 검은 배경에 선명한 파란색 악센트, 따뜻한 회색과 차가운 회색 불일치하게 혼합
- 레이아웃: 피처용 3개 동등 카드 열, 모든 것이 대칭 중앙 정렬, 최대 너비 제한 없음
- 상태: 버튼에 호버 효과 없음, 연락처 양식에 로딩 또는 빈 상태 없음
- 콘텐츠: 일반적인 회사명, 블로그 섹션의 Lorem Ipsum, 모든 성공 메시지의 느낌표
"redesign-existing-projects" 사용 중입니다. Next.js 대시보드의 타이포그래피 업그레이드
예상 결과:
- 본문 텍스트에 Inter를 Geist로 교체하고 헤드라인에 Cabinet Grotesk 적용
- 가독성을 위해 단락 최대 너비를 65ch로 설정하고 줄 높이를 증가
- 내비게이션 레이블에 Medium (500) 중량을, 카드 제목에 SemiBold (600) 적용
- 모든 데이터 테이블 열에 font-variant-numeric: tabular-nums 적용
- 모든 단락 요소에 text-wrap: pretty를 적용하여 고아 단어 문제 해결
보안 감사
안전All 77 static analysis findings are false positives. The scanner treated Markdown documentation as executable code. The 49 external_commands detections are Markdown backtick syntax for inline code references (CSS properties, font names like Geist, Outfit). The 27 blocker detections for weak cryptographic algorithms and system reconnaissance have no basis in the file content, which contains only design guidelines and audit checklists. The single network detection is a documentation reference to picsum.photos, a placeholder image service. No executable code, scripts, or network calls exist in this skill. It is a pure Markdown document providing design improvement guidance.
품질 점수
만들 수 있는 것
포트폴리오 또는 마케팅 사이트 폴리싱
기능적이지만 범용한 웹사이트를 가져와서 템플릿 디자인과 구별되는 프리미엄 타이포그래피, 커스텀 색상 팔레트, 정교한 레이아웃 패턴으로 업그레이드합니다.
AI 생성 애플리케이션 업그레이드
플레이스홀더 콘텐츠, 범용 카드 레이아웃, 관습적인 컴포넌트 패턴 등 AI 생성 인터페이스의 흔적을 식별하고 정제된 대안으로 교체합니다.
레거시 프로젝트의 디자인 부채 감사 및 수정
기존 프로젝트에서 접근성 격차, 누락된 인터랙션 상태, 일관성 없는 스타일링, 콘텐츠 문제를 체계적으로 검토한 후 우선순위에 따라 수정 사항을 적용합니다.
이 프롬프트를 사용해 보세요
Apply this skill to my project. Read through the codebase and give me a list of all the generic design patterns you find, organized by category. Do not make any changes yet, just show me the audit results.
Apply this skill to my project. Fix all typography issues and color problems you find. Replace generic fonts with better alternatives, fix heading hierarchy, adjust paragraph widths, and clean up the color palette. Work within the existing CSS setup.
Apply this skill to my project. Go through the full audit, then fix issues in priority order: fonts, colors, hover states, layout and spacing, generic components, loading and error states, and typography polish. Keep changes focused and reviewable.
Apply this skill to my project. Focus specifically on replacing the most common AI-generated design patterns: the purple-blue gradient, three equal card columns, pill badges, accordion FAQs, carousel testimonials, and generic copy. Replace each with a more distinctive alternative.
모범 사례
- 변경 전 항상 기존 코드베이스를 감사하여 현재 기술 스택, 프레임워크 버전, 스타일링 접근 방식 이해
- 최소 위험으로 최대 시각적 임팩트를 위해 우선순위 순서로 수정 적용: 폰트 먼저, 그 다음 색상, 인터랙션 상태, 레이아웃 순
- 변경 사항을 작고 집중적으로 유지하여 끌어오기 요청 검토 및 롤백 용이성 확보
피하기
- 기존 코드를 점진적으로 개선하는 대신 처음부터 전체 프로젝트 다시 작성
- 현재 시스템이 잘 작동하는 경우 새 CSS 프레임워크나 스타일링 라이브러리로 마이그레이션
- 검토하거나 디버그할 수 없는 단일 커밋에서 대규모 광범위한 변경 적용