AgentSkillsCN

anti-slop-design

打造独具特色、具备生产级水准的前端界面，避免千篇一律的AI审美风格。适用于构建Web组件、游戏UI、着陆页、仪表盘，或任何视觉化的Web界面。有效防止“紫色渐变+圆角+无衬线字体”的审美疲劳。

SKILL.md
--- frontmatter
name: anti-slop-design
description: Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, game UIs, landing pages, dashboards, or any visual web interface. Prevents purple-gradient-rounded-corner-Inter-font syndrome.
metadata:
  author: misskim
  version: "1.0"
  origin: Concept inspired by Anthropic frontend-design skill, rewritten for our environment

Anti-Slop Design

모든 프론트엔드 작업에서 "AI가 만든 것 같은" 뻔한 디자인을 절대 방지한다.

AI Slop의 징후 (절대 금지)

  • •Inter/Roboto/Arial/시스템 폰트 기본 사용
  • •보라색 그라디언트 on 흰 배경
  • •모든 요소에 균일한 rounded corners
  • •가운데 정렬만 하는 레이아웃
  • •뻔한 hero section + 3-column features
  • •모든 카드에 동일한 그림자
  • •감정 없는 일러스트레이션

디자인 프로세스

1. 맥락 파악

  • •목적: 이 인터페이스가 해결하는 문제는?
  • •사용자: 누가 쓰나? (게이머? 개발자? 일반인?)
  • •톤: 극단적으로 선택 — 아래 중 하나:
    • •브루탈리즘 / 미니멀 / 레트로퓨처리즘 / 유기적자연
    • •럭셔리 / 장난감같은 / 에디토리얼 / 아트데코
    • •인더스트리얼 / 소프트파스텔 / 80s네온 / 일본미니멀
  • •차별점: 사용자가 기억할 단 하나의 요소는?

2. 핵심 원칙

타이포그래피:

  • •독특하고 아름다운 폰트 선택 (Google Fonts에서 발굴)
  • •디스플레이 폰트 + 본문 폰트 페어링
  • •매번 다른 폰트 조합 (같은 폰트 반복 금지)

컬러:

  • •CSS 변수로 일관성 확보
  • •지배적 색상 + 강렬한 액센트 (고르게 분배하지 말 것)
  • •매번 다른 색상 팔레트

모션:

  • •CSS-only 우선 (HTML 단일 파일의 경우)
  • •페이지 로드 시 staggered reveal이 핵심 인상
  • •hover/scroll 기반 의외의 상호작용

공간 구성:

  • •비대칭 레이아웃, 겹침, 대각선 흐름
  • •그리드를 깨는 요소들
  • •넉넉한 여백 또는 의도적 밀도

배경/디테일:

  • •단색 배경 기본값 금지
  • •그라디언트 메쉬, 노이즈 텍스처, 기하학 패턴
  • •깊이감을 주는 레이어, 그림자, 투명도

3. 게임 UI 특화 원칙

게임 인터페이스 제작 시 추가 적용:

  • •몰입감 우선: UI가 게임 세계관의 일부여야 함
  • •에셋 활용: NAS 게임마당(161GB), Gemini AI 생성, 무료 에셋 사이트
  • •애니메이션: CSS transitions + requestAnimationFrame
  • •사운드 피드백: 클릭/호버 시 효과음 (가능한 경우)
  • •반응형: 텔레그램 Mini App 환경 고려 (WebView safe-area)

품질 체크리스트

  • • Inter/Roboto/Arial 사용하지 않았는가?
  • • 보라색 그라디언트 없는가?
  • • 모든 요소가 동일한 border-radius가 아닌가?
  • • 레이아웃에 비대칭 요소가 있는가?
  • • 이전에 만든 것과 다른 폰트/색상인가?
  • • "이게 AI가 만든 거야?"라는 말이 안 나올 정도인가?