tasteskill: 슬롭 방지 프론트엔드 스킬

랜딩 페이지, 포트폴리오, 리디자인. 대시보드, 데이터 테이블, 다단계 제품 UI는 제외.
아래 모든 규칙은 상황에 따라 적용됩니다. 자동으로 발동되지 않습니다. 먼저 브리프를 읽고, 적합한 규칙만 선택하세요.

0. 브리프 추론 (모든 것보다 먼저 상황을 읽으십시오)

코드를 작성하거나 설정을 변경하기 전에 사용자가 실제로 원하는 것이 무엇인지 추론하십시오. 대부분의 LLM 디자인 결과물이 나쁜 이유는 모델이 상황을 읽지 않고 기본 미학으로 도약하기 때문입니다.

0.A 먼저 다음 신호를 읽으십시오

페이지 종류 - 랜딩 (SaaS / 소비자 / 에이전시 / 이벤트), 포트폴리오 (개발자 / 디자이너 / 크리에이티브 스튜디오), 리디자인 (유지 vs. 전면 개편), 에디토리얼 / 블로그.
사용자가 사용한 분위기 단어 - "미니멀", "차분한", "Linear 스타일", "Awwwards", "브루탈리스트", "프리미엄 소비자", "Apple 스러운", "장난기 많은", "진지한 B2B", "에디토리얼", "에이전시 스러운", "글래스모피즘", "다크 테크".
참조 신호 - 사용자가 링크한 URL, 붙여넣은 스크린샷, 언급한 제품, 경쟁하는 브랜드.
대상 청중 - B2B 조달 패널 vs. 디자인 감각이 있는 소비자 vs. 포트폴리오를 스캔하는 채용 담당자. 청중이 미학을 결정하며, 당신의 취향이 아닙니다.
이미 존재하는 브랜드 자산 - 로고, 색상, 글꼴, 사진. 리디자인의 경우 이들은 선택적 입력이 아닌 시작 재료입니다 (섹션 11 참조).
조용한 제약 조건 - 접근성 우선 청중, 공공 부문, 규제 산업, 신뢰 우선 커머스, 아동 제품. 이러한 제약 조건은 미학적 선호도를 재정의합니다.

0.B 코드 생성을 시작하기 전에 한 줄짜리 "디자인 리드"를 출력하십시오

코드를 생성하기 전에 한 줄로 다음을 명시하십시오: "이것을 다음으로 읽음: <페이지 종류>, <대상 청중>용, <분위기> 언어, <디자인 시스템 또는 미학 계열> 방향."

예시:

"이것을 다음으로 읽음: 기술 구매자를 위한 B2B SaaS 랜딩, Linear 스타일 미니멀 언어, Tailwind 유틸리티 + Geist + 절제된 모션 방향."
"이것을 다음으로 읽음: 채용 담당자를 위한 개인 디자이너 포트폴리오, 에디토리얼 / 운동 타이포그래피 언어, 네이티브 CSS + 스크롤 기반 애니메이션 + 사용자 정의 타이포그래피 방향."
"이것을 다음으로 읽음: 공공 부문 서비스 사이트 리디자인, 신뢰 우선 언어, GOV.UK Frontend 또는 USWDS 방향."

0.C 브리프가 모호하면 질문 하나를 하십시오. 추측하지 마십시오

정확히 하나의 명확한 질문을 하십시오. 여러 질문을 한꺼번에 던지지 말고, 디자인 리드가 진정으로 갈릴 때만 하십시오. 예: "이것이 Linear-클린 느낌에 가까워야 할까요, 아니면 Awwwards-실험적 느낌에 가까워야 할까요?"

컨텍스트에서 자신 있게 추론할 수 있다면 질문하지 마십시오. 디자인 리드를 선언하고 진행하십시오.

0.D 기본값 방지 훈련

다음은 기본값으로 사용하지 마십시오: AI 보라색 그라데이션, 어두운 메쉬 위의 중앙 히어로, 동일한 세 개의 기능 카드, 모든 곳의 제네릭 글래스모피즘, 무한 루프 마이크로 애니메이션, Inter + slate-900. 이것들은 LLM의 기본값입니다. 디자인 리드를 기반으로 의도적으로 이를 넘어서십시오.

1. 세 가지 다이얼 (핵심 설정)

디자인 리드를 완료한 후 세 가지 다이얼을 설정하십시오. 아래의 모든 레이아웃, 모션, 밀도 결정은 이 다이얼에 따라 결정됩니다.

DESIGN_VARIANCE: 8 - 1 = 완벽한 대칭, 10 = 예술적인 혼란
MOTION_INTENSITY: 6 - 1 = 정적, 10 = 영화적 / 물리 기반
VISUAL_DENSITY: 4 - 1 = 아트 갤러리 / 여유로움, 10 = 조종석 / 빽빽한 데이터

기본값: 8 / 6 / 4. 디자인 리드가 이를 재정의하지 않는 한 사용하십시오. 사용자에게 이 파일을 편집하도록 요청하지 마십시오 - 재정의는 대화를 통해 이루어집니다.

1.A 다이얼 추론 (디자인 리드 → 다이얼 값)

신호	VARIANCE	MOTION	DENSITY
"미니멀 / 깔끔 / 차분 / 에디토리얼 / Linear 스타일"	5-6	3-4	2-3
"프리미엄 소비자 / Apple 스러운 / 럭셔리 / 브랜드"	7-8	5-7	3-4
"장난기 / 대담 / Dribbble / Awwwards / 실험적 / 에이전시"	9-10	8-10	3-4
"랜딩 페이지 / 포트폴리오 / 마케팅 사이트 (기본값)"	7-9	6-8	3-5
"신뢰 우선 / 공공 부문 / 규제 / 접근성 중요"	3-4	2-3	4-5
"리디자인 - 유지"	기존과 일치	+1	기존과 일치
"리디자인 - 전면 개편"	+2	+2	기존과 일치

1.B 사용 사례 프리셋

사용 사례	VARIANCE	MOTION	DENSITY
랜딩 (SaaS, 주류)	7	6	4
랜딩 (에이전시 / 크리에이티브)	9	8	3
랜딩 (프리미엄 소비자)	7	6	3
포트폴리오 (디자이너 / 스튜디오)	8	7	3
포트폴리오 (개발자)	6	5	4
에디토리얼 / 블로그	6	4	3
공공 부문 서비스	3	2	5
리디자인 - 유지	기존	기존+1	기존
리디자인 - 전면 개편	+2	+2	기존

1.C 다이얼이 출력을 조종하는 방법

이 값(또는 사용자 재정의 값)을 전역 변수로 사용하십시오. 이 문서 전체의 상호 참조는 이러한 정확한 변수 이름을 참조합니다. LAYOUT_VARIANCE 또는 ANIM_LEVEL과 같은 별칭을 절대 만들지 마십시오.

2. 브리프 → 디자인 시스템 매핑

디자인 리드(섹션 0)와 다이얼(섹션 1)을 결정한 후 올바른 기반을 선택하십시오. 공식 패키지가 있는 것에 대해 CSS를 발명하지 마십시오. 미학적 트렌드를 공식 시스템인 것처럼 속이지 마십시오.

2.A 실제 디자인 시스템을 사용해야 하는 경우 (공식 패키지 사용)

브리프가 다음으로 읽히면…	다음을 사용	이유
Microsoft / 엔터프라이즈 SaaS / 대시보드	`@fluentui/react-components` 또는 `@fluentui/web-components`	공식 Fluent UI, Microsoft 토큰, 접근성 구현됨
Google 스타일 UI, Material 기반 제품	`@material/web` + Material 3 토큰	공식, Material Theming을 통해 테마 변경 가능
IBM 스타일 B2B / 엔터프라이즈 분석	`@carbon/react` + `@carbon/styles`	공식 Carbon, 성숙한 데이터 밀도 패턴
Shopify 앱 표면	`polaris.js` 웹 컴포넌트 / Polaris React	Shopify 관리자 UI에 필요
Atlassian / Jira 스타일 제품	`@atlaskit/*` + `@atlaskit/tokens`	공식 Atlassian 디자인 시스템
GitHub 스타일 개발자 도구 / 커뮤니티 페이지	`@primer/css` 또는 `@primer/react-brand`	공식 Primer; 마케팅용 브랜드 변형
영국 공공 부문 서비스	`govuk-frontend`	법적/규제적으로 예상됨
미국 공공 부문 / 신뢰 우선	`uswds`	동일
빠른 지역 소규모 비즈니스 / 에이전시 MVP	Bootstrap 5.3	지루하지만 빠르고 잘 작동함
현대적인 접근성 있는 React 기반	`@radix-ui/themes`	기본 요소 + 세련된 테마
구성 요소를 소유하는 현대적인 SaaS	shadcn/ui (`npx shadcn@latest add ...`)	코드를 소유하고 사용자 정의하기 쉬움; 기본 상태를 배포하지 마십시오
Tailwind 기반 현대적인 SaaS / AI 마케팅	Tailwind v4 유틸리티 + `dark:` 변형	인디 + 소규모 팀 빌드의 기본값

정직 규칙: 브리프가 위 시스템 중 하나로 읽히면 공식 패키지를 설치하고 사용하십시오. CSS를 수동으로 재현하지 마십시오. 시스템 토큰을 가져온 다음 90%를 재정의하지 마십시오.

프로젝트당 하나의 시스템. 동일한 트리에 Fluent React와 Carbon을 혼합하지 마십시오. Material 3 앱에 shadcn/ui 구성 요소를 가져오지 마십시오.

2.B 브리프가 시스템이 아닌 미학인 경우

이러한 방향에 대해 단일 공식 패키지는 없습니다. 네이티브 CSS + Tailwind + 유지 관리되는 컴포넌트 라이브러리로 구축하십시오. 코드 주석에서 차용한 영감과 공식 자료를 정직하게 명시하십시오.

미학	정직한 구현
글래스모피즘 / "서리 낀 유리"	`backdrop-filter`, 계층화된 테두리, 하이라이트 오버레이. `prefers-reduced-transparency`에 대한 단색 채우기 대체 제공.
벤토 (Apple 스타일 타일 그리드)	혼합 셀 크기의 CSS Grid. 단일 라이브러리가 소유하지 않음.
브루탈리즘	네이티브 CSS, 고정폭 글꼴, 날것의 테두리. 라이브러리 없음.
에디토리얼 / 매거진	세리프 글꼴, 비대칭 그리드, 넉넉한 여백. 라이브러리 없음.
다크 테크 / 해커	고정폭 + 악센트 네온, 터미널 모티프. 라이브러리 없음.
오로라 / 메쉬 그라데이션	SVG 또는 계층화된 방사형 그라데이션. 라이브러리 없음.
운동 타이포그래피	네이티브 CSS 애니메이션, 스크롤 기반 애니메이션, 하이재킹용 GSAP. 라이브러리 없음.
Apple Liquid Glass	Apple은 Apple 플랫폼 전용으로 문서화함. 공식 `liquid-glass.css`는 없음. 웹 구현은 `backdrop-filter` + 계층화된 테두리 + 하이라이트를 사용한 근사치임. 근사치로 명확히 표시하십시오.

3. 기본 아키텍처 및 규칙

디자인 리드가 실제 디자인 시스템(섹션 2.A)을 선택하지 않는 한, 다음이 기본값입니다:

3.A 스택

프레임워크: React 또는 Next.js. 기본적으로 서버 컴포넌트(RSC)를 사용하십시오.
- RSC 안전: 전역 상태는 클라이언트 컴포넌트에서만 작동합니다. Next.js에서는 프로바이더를 "use client" 컴포넌트로 감싸십시오.
- 상호작용성 격리: Motion, 스크롤 리스너 또는 포인터 물리학을 사용하는 모든 구성 요소는 상단에 'use client'가 있는 격리된 리프여야 합니다. 서버 컴포넌트는 정적 레이아웃만 렌더링합니다.
스타일링: Tailwind v4 (기본값). 기존 프로젝트가 요구하는 경우에만 Tailwind v3.
- v4의 경우: postcss.config.js에서 tailwindcss 플러그인을 사용하지 마십시오. @tailwindcss/postcss 또는 Vite 플러그인을 사용하십시오.
애니메이션: Motion (이전 Framer Motion). motion/react에서 가져오기 (import { motion } from "motion/react"). framer-motion 패키지는 여전히 레거시 별칭으로 작동하지만 새 코드에서는 motion/react를 선호하십시오.
글꼴: 항상 next/font (Next.js) 또는 @font-face + font-display: swap으로 자체 호스팅하십시오. 프로덕션에서는 <link>를 통해 Google Fonts를 연결하지 마십시오.

3.B 상태

격리된 UI에는 로컬 useState / useReducer를 사용하십시오.
깊은 prop 드릴링을 방지하기 위한 경우에만 전역 상태 - Zustand, Jotai 또는 React 컨텍스트.
절대 useState를 사용하여 사용자 입력(마우스 위치, 스크롤 진행률, 포인터 물리학, 자기적 호버)에 의해 구동되는 연속 값을 추적하지 마십시오. Motion의 useMotionValue / useTransform / useScroll을 사용하십시오. useState는 모든 변경 시 React 트리를 다시 렌더링하고 모바일에서 충돌합니다.

3.C 아이콘

허용된 라이브러리 (우선 순위): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
권장하지 않음: lucide-react. 사용자가 명시적으로 요청하거나 프로젝트가 이미 의존하는 경우에만 허용됩니다.
절대 수동으로 SVG 아이콘을 만들지 마십시오. 글리프가 누락된 경우 두 번째 라이브러리를 설치하거나 기본 요소로 구성하십시오. 처음부터 아이콘 경로를 그리지 마십시오.
프로젝트당 하나의 패밀리. 동일한 컴포넌트 트리에 Phosphor와 Lucide를 혼합하지 마십시오.
전역적으로 strokeWidth 표준화 (예: 1.5 또는 2.0).

3.D 이모지 정책

코드, 마크업 및 표시 텍스트에서 기본적으로 권장되지 않습니다. 기호를 아이콘 라이브러리 글리프로 대체하십시오. 재정의: 사용자가 장난기 / 채팅 스타일 / 소셜 네이티브 분위기를 명시적으로 요청하는 경우에만 이모지를 허용하고, 그때도 의도적으로 드물게 사용하십시오.

3.E 반응형 및 레이아웃 메커니즘

중단점 표준화 (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
max-w-[1400px] mx-auto 또는 max-w-7xl을 사용하여 페이지 레이아웃을 포함하십시오.
뷰포트 안정성: 전체 높이 히어로 섹션에 h-screen을 절대 사용하지 마십시오. 항상 min-h-[100dvh]를 사용하여 모바일(iOS Safari 주소 표시줄)에서 레이아웃 점프를 방지하십시오.
Flex-수학 대신 그리드: 복잡한 flexbox 백분율 수학(w-[calc(33%-1rem)])을 절대 사용하지 마십시오. 항상 CSS Grid(grid grid-cols-1 md:grid-cols-3 gap-6)를 사용하십시오.

3.F 의존성 확인 (필수)

타사 라이브러리를 가져오기 전에 package.json을 확인하십시오. 패키지가 없으면 먼저 설치 명령을 출력하십시오. 절대 라이브러리가 존재한다고 가정하지 마십시오.

4. 디자인 엔지니어링 지침 (편향 보정)

LLM은 상투적인 표현을 기본값으로 사용합니다. 이러한 기본값을 적극적으로 재정의하십시오. 각 규칙에는 컨텍스트 인식 재정의 경로가 있습니다.

4.1 타이포그래피

디스플레이 / 헤드라인: 기본값 text-4xl md:text-6xl tracking-tighter leading-none.
본문 / 단락: 기본값 text-base text-gray-600 leading-relaxed max-w-[65ch].
산세리프 글꼴 선택:
- 기본값으로 권장하지 않음: Inter. 먼저 Geist, Outfit, Cabinet Grotesk, Satoshi 또는 브랜드에 적합한 세리프를 선택하십시오.
- 재정의: 사용자가 중립적 / 표준 / Linear 스타일 느낌을 명시적으로 요청하거나 브리프가 공공 부문 / 접근성 우선 사이트인 경우 Inter가 허용됩니다.
알아야 할 페어링: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.
세리프 규율 (기본값으로 매우 권장되지 않음):
- 세리프는 모든 프로젝트의 기본 글꼴로 매우 권장되지 않습니다. "창의적 / 프리미엄 / 에디토리얼 느낌"은 세리프를 사용할 이유가 아닙니다. "창의적인 브리프 = 세리프"라는 에이전트의 기본 정신 모델은 프로덕션 라운드에서 가장 많이 테스트된 AI 특성입니다.
- 세리프는 다음 중 하나가 명시적으로 참인 경우에만 허용됩니다:
  - 브랜드 브리프가 문자 그대로 세리프 글꼴을 명명하거나,
  - 미학 계열이 진정으로 에디토리얼 / 럭셔리 / 출판 / 원고 / 헤리티지 / 빈티지이고 이 특정 세리프가 이 특정 브랜드에 왜 적합한지 설명할 수 있는 경우
- 다른 모든 경우(크리에이티브 에이전시, 디자인 스튜디오, 현대 브랜드, 프리미엄 소비자, 포트폴리오, 라이프스타일)에는 기본 산세리프 디스플레이(Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal)를 사용하십시오. 산세리프 디스플레이 글꼴은 "지루한" 것이 아닙니다. 패션에서 검은색이 기본인 것과 같은 이유로 기본값입니다.
- 강조 규칙 (관련): 헤드라인 내에서 단어를 강조하고 싶을 때(운동적 "그리고 공간적 디자인" 유형의 움직임) 동일한 글꼴의 이탤릭 또는 볼드를 사용하십시오. 시각적 흥미를 더하기 위해 산세리프 헤드라인에 임의의 세리프 단어를 주입하지 마십시오(또는 그 반대). 패밀리 혼합 강조는 아마추어입니다. 동일 패밀리의 이탤릭/볼드 강조가 올바른 움직임입니다.
- 특히 기본값으로 금지됨: Fraunces 및 Instrument_Serif (LLM이 가장 좋아하는 두 가지 디스플레이 세리프).
- 세리프가 정당화되면 (드물게, 위 참조) 다음 풀에서 교체하여 사용하십시오. 연속된 프로젝트에서 동일한 세리프를 재사용하지 마십시오: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I

91-5/opencode

opencode란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서