놀랍도록 예쁜 웹사이트
실제 제품 팀이 출시한 웹사이트처럼 보이는 웹사이트의 시각적 및 기술적 결정을 위한 단일 진실 공급원입니다. 언어 모델이 "현대적이고 깔끔하다"고 추측한 결과물이 아닙니다.
$refero-design과의 조정
$refero-design을 사용할 수 있다면 먼저 로드하고, 시각적 리서치, Refero 도구 라우팅, 종합, 레퍼런스 락, 결정 원장을 담당하도록 합니다. 락 이후에 이 스킬을 사용하여 구현 제약 사항(기존 시스템 범위, 표면 모드, 프레임워크 선택, 공간 및 상호작용 기술, 반응형 동작, 안티-슬롭 검사, 렌더링된 결과 검증)을 담당합니다.
순서는 다음과 같이 고정됩니다.
$refero-design이 작업 규모에 비례하여 스타일, 화면, 플로우를 리서치합니다.$refero-design이 하나의 기본 방향을 선택하고 제한된 보조 영향력을 기록합니다.- 이 스킬이 승인된 락을 방향 계약 및 프로덕션 UI로 변환합니다.
- 이 스킬이 렌더링된 결과를 락 및 지원 플랫폼에 대해 검증합니다.
두 스킬을 경쟁적인 취향 권위자로 실행하지 마십시오. Refero는 제품 및 시각적 증거를 제공합니다. 이 스킬은 프론트엔드 실행 규율을 제공합니다. Refero MCP를 사용할 수 없는 경우 $refero-design은 번들된 폴백을 사용하며, 이 스킬은 결과 락을 기반으로 계속 진행됩니다.
기본 프레임워크는 React (Vite / Next / vite-react-ssg)입니다. Astro, Vue, Vanilla CSS/JS도 일급으로 지원됩니다. 프레임워크별 관용구는 framework-adapters.md에 있습니다. 아무것도 지정되지 않은 경우 React를 가정합니다. 기존 시스템이 Astro이거나 브리핑에 EmDash가 필요한 경우 서버 렌더링을 유지하고 기본적으로 Astro 컴포넌트를 사용하며, 상호작용이 실제로 필요한 곳에만 프레임워크 아일랜드를 추가합니다.
사용 방법
- direction-workflow.md를 읽습니다. 기존 시스템의 진실을 파악한 다음
CHANGE_SCOPE와SURFACE_MODE를 설정합니다. - 범위에 비례하여 리서치합니다.
world의 경우 전체 리서치가 필수입니다.local은 주변 표면을 상속받습니다. - 프로젝트 유형 프리셋(섹션 1)을 사용하여 도메인 제약과 기술 비용을 보정하며, 미적 감각을 선택하는 데 사용하지 마십시오.
- 증거로부터 방향성을 도출합니다. 무드와 레이아웃 아키타입을 어휘 및 도전자로 사용하며, 필수 메뉴로 사용하지 마십시오.
- 코드 작성 전에 방향 계약을 기록한 다음 모든 섹션을 새롭게 구축합니다.
- 간격, 모션, 상태, 반응형 및 접근성에 대한 기술 참조를 적용합니다.
- 섹션 14와 섹션 13의 AI 틸트에 대해 자체 감사한 다음 제한된 시각적 패스를 완료합니다.
참조 파일:
- direction-workflow.md — 대상 컨텍스트,
CHANGE_SCOPE,SURFACE_MODE, 방향 계약, 컴프 게이트, 제한된 완료 - foundations.md — 히어로 타입, 뷰포트 높이, 모션 속성, 아이브로우 및 기존 시스템 우선 순위에 대한 권위 있는 제한
- spatial-design.md — 4pt 스케일, 계층 구조, 컨테이너 쿼리
- motion-design.md — 이징, 지속 시간, 축소 모션, 전환 패턴 카탈로그
- interaction-design.md — 8가지 상태, focus-visible, 팝오버, 모달
- laws-of-ux.md — 명명된 리서치와 함께하는 구성 휴리스틱: Hick, Miller, Fitts, Von Restorff, Peak-End, Jakob, 인지 부하
- form-validation.md — 검증 타이밍, 입력 상태 머신,
:user-invalid, 오류 요약, 크로스 스택 계약으로서의 스키마 - responsive-design.md — 모바일 우선, 포인터 쿼리, safe-area, srcset
- framework-adapters.md — 모션, 상태, 하이드레이션에 대한 React / Vue / vanilla 등가물
- component-libs.md — (React 전용) 복사하여 붙여넣기 가능한 애니메이션 컴포넌트: Magic UI, React Bits, shadcn 레지스트리를 통한 애니메이션 Lucide 아이콘
- scroll-motion.md — (Tier 3) GSAP ScrollTrigger + Lenis 부드러운 스크롤, 성능/접근성 가드레일 포함
- design-references.md — (리서치, 무료) Refero 없는 리서치 레이어: 라이브 사이트의 실제 토큰 읽기, DESIGN.md 팩, 무료 갤러리, 공개 디자인 시스템, 세그먼트 → 참조 은행
- media-pipeline.md — 무료 스톡 사진(Pexels/Unsplash/Pixabay/퍼블릭 도메인, 소스별 호스팅 규칙 포함) + Magnific의 라이선스 카탈로그(REST) + 생성된 스틸(두 피어 레인(
$image-gen/ Magnific MCP)을 통해), 알파 컷아웃 경로 + (Tier 3, 비용 게이트) Magnific을 통한 이미지→비디오,<video>레시피 포함 - style-interview.md — (인터뷰 모드) 사용자에게 방향을 묻는 시기, 라운드 스크립트, 아키타입 목록을 메뉴로 제공하는 대신 리서치에서 후보를 구축하는 방법
- redesign.md : (재설계 모드) 스캔, 진단, 수정; 모드 감지(그린필드 / 유지 / 대대적 수정); 절대 자동으로 변경되지 않는 사항
- conversion-diagnosis.md — (랜딩 페이지) 카피 전달 게이트 및 10계층 획득 및 전환 진단
SEO, 접근성 점수 및 Core Web Vitals는 여기서 감사하지 않습니다. 이 스킬은 구축합니다. 라이브 URL의 검증은 site-audit 스킬에 속하며, 이 스킬은 온페이지 SEO 규칙(제목, 메타, 표준 URL, OG, 스키마, 로봇, 사이트맵) , AEO/GEO 레이어, axe-core 실행 및 CWV 예산을 담당합니다. 섹션 14의 사전 비행 검사를 거친 후 배포된 URL을 가리키도록 site-audit을 설정하십시오.
라이브 랜딩 페이지는 카피를 다시 작성하기 전에 진단됩니다. conversion-diagnosis.md를 읽고, 실제 사용자 브라우저 프로필과 렌더링된 Googlebot 프로필에서 배포된 페이지를 열어 둘 다 작동하는 페이지를 받는지 확인하십시오. 깨진 스크립트, 느린 첫 화면, 차단된 크롤러, 죽은 CTA 또는 사용할 수 없는 양식은 카피 다듬기보다 우선 순위가 높습니다. SEO가 방문을 얻습니다. 전달된 경험은 그 방문을 리드로 전환해야 합니다.
두 가지 모드: 자율(기본값) vs 인터뷰
자율(기본값): 이미 가지고 있는 컨텍스트와 프리셋에서 합리적인 가정을 바탕으로 작업합니다. 사용자에게 아무것도 묻지 않습니다. 세부 사항이 누락되었나요? 가장 가능성 있는 값을 가정하고, 한 줄로 가정을 기록한 다음 계속 진행합니다. 이것은 루프에 사람이 없을 때 유일한 안전한 모드입니다.
인터뷰: 호출이 명시적으로 요청할 때(--interview, "modo entrevista", "ask me which style") 또는 CHANGE_SCOPE=world이고 세션이 참석 중이며 사용자가 참조나 브랜드를 고정하지 않은 경우 트리거됩니다. 두 단계로 실행됩니다: 브리핑 수집(세그먼트/제품, 대상, 목표, 톤, 반대 의견, 제약 조건, 이미 마음에 드는 사이트), 그런 다음 먼저 리서치하고 두세 가지 구체적인 방향을 선택하도록 제시 — 캔버스, 타입, 악센트 역할, 미디어 전략, 시그니처 무브 및 각각이 나온 실제 제품. 요점은 유능한 기본값 대신 사용자의 얼굴이 담긴 사이트입니다.
두 모드 모두 섹션 0에서 리서치를 수행하고 동일한 참조 락 및 방향 계약으로 끝납니다. 유일한 차이점은 취향 결정을 누가 내리는지입니다. 전체 프로토콜, 질문 스크립트, 안티-메뉴 규칙 및 라운드 제한: style-interview.md.
새로 구축하는 대신 기존 사이트를 재설계하시나요? 재설계 모드(스캔, 진단, 수정) 및 유지-대-대대적-수정 규칙은 redesign.md를 참조하십시오. 위의 두 모드 모두 여전히 적용됩니다. 재설계는 라이브 사이트가 이미 얻고 있는 것을 보호하기도 합니다.
0. 리서치 먼저 — 변경 범위에 비례
CHANGE_SCOPE=world의 경우 협상 불가. 완전히 정의된 브랜드라고 해도 새롭거나 대체되는 world에 대한 구조적 리서치를 건너뛰는 것은 용납되지 않습니다.surface의 경우 기존 시스템을 유지하면서 유사한 구조와 흐름을 리서치합니다.local의 경우 주변 표면이 기본 증거입니다. 그것이 답할 수 없는 것만 리서치합니다. direction-workflow.md를 참조하십시오.
모든 시각적 결정은 실제 제품이 실제로 출시한 증거에서 시작되며, 모델의 "좋은 취향"에 대한 기억에서 시작되지 않습니다. 모델은 코드와 논리에 강하고 제품 취향에 약하므로, 취향을 실제 참조에 고정시키십시오.
리서치할 곳
권장 프리미엄 — Refero (refero.design). mcp__refero__* 도구를 사용할 수 있다면 먼저 사용하십시오. 세 가지 레이어:
- 스타일(시각적 방향, 여기서 시작):
refero_search_styles(query)→refero_get_style(...). - 화면(구체적인 UI):
refero_search_screens(query, platform:"web"|"ios")→refero_get_screen(...),refero_get_similar_screens(...),refero_get_screen_image(...). - 플로우(다단계 여정 — 온보딩/체크아웃):
refero_search_flows(...)→refero_get_flow(...). - 화면은 UUID를 사용하고, 플로우는 숫자 ID를 사용합니다.
page로만 페이지 매김합니다.get_screen_image는 비전 호출 비용이 발생합니다. 픽셀을 검사해야 할 때만 사용하십시오.
무료 경로(Refero 없음) — design-references.md. Refero는 이 단계를 빠르게 만듭니다. 가능하게 하는 것은 아닙니다. 무료 경로는 동일한 클래스의 증거에서 동일한 참조 락을 생성하며, 파일은 전체 주소록을 제공합니다: curl/WebFetch로 라이브 사이트의 실제 토큰을 읽는 방법(어떤 스크린샷보다 더 강력한 증거), 오픈 소스 DESIGN.md 팩(1차: VoltAgent/official-design-md, 70개 이상의 리버스 엔지니어링 브랜드: VoltAgent/awesome-design-md), 검증된 무료 갤러리(siteinspire, httpster, minimal.gallery, onepagelove 섹션, dark.design, navbar.gallery, footer.design), 공개 디자인 시스템 및 세그먼트 → 공부할 실제 제품 은행을 통해 빈 쿼리에서 시작하지 않도록 합니다.
다른 것을 읽지 않았다면 짧은 버전: 세그먼트에서 두세 개의 실제 제품을 선택하고, 열고, 타입 스택과 CSS 사용자 정의 속성을 추출하고, 각각이 좋은 이유를 명명하고 기록합니다. 실제로 살펴보지 않은 특성은 절대 잠그지 마십시오.
워크플로우
- 컨텍스트 + 짧은 브리핑: 기존 시스템의 진실,
CHANGE_SCOPE,SURFACE_MODE, 무엇을 / 누구를 위해 / 플랫폼 / 목표 / 톤 / 반대 의견 / 제약 조건을 파악합니다. (자율: 추론. 인터뷰: 질문.) - 스타일 우선: 다른 각도에서 두세 번 검색 — 하나는 미적 감각, 하나는 도메인/세그먼트, 하나는 강력한 참조 브랜드. 하나에서 세 개의 강력한 방향을 엽니다.
- 화면/플로우: 구체적인 화면 구조나 여정 논리가 필요할 때 사용합니다.
SURFACE_MODE=persuade의 경우 픽셀 대상 자체가 눈에 보이는 초점 매체가 있는 설득력 있는 마케팅 표면이어야 합니다. 법률/약관 페이지, 문서, 디렉토리, 변경 로그, 아카이브 색인, 대시보드 및 텍스트 전용 편집 페이지는 반례이며, 절대 기본 화면 락이 아닙니다. 코딩하기 전에 대상의 초점 매체와 하나의 지원 시각적 순간을 명명하십시오. 검사된 화면이 사진, 일러스트레이션, 제품 이미지 또는 모션으로 인해 작동한다면 해당 미디어 역할을 유지하십시오. 타이포그래피, 규칙, 메타데이터 또는 빈 카드로 대체하는 것은 참조 드리프트입니다. - 종합 — 평균 내지 마십시오. 하나의 지배적인 기본 방향을 선택하고 고유한 특성을 유지하십시오. 보조 참조는 각각 하나의 세부 사항을 제공합니다. 모든 것의 미지근한 평균은 절대 안 됩니다: 하나의 참조가 어둡고, 하나는 세리프이고, 하나는 애시드라면, 정답은 정중한 크림 + 교육받은 세리프가 아닙니다.
- 코딩 전에 참조-락 + 결정-원장 + 방향-계약:
- 참조-락: 기본 방향 + 보존할 세 가지에서 다섯 가지 특성(캔버스, 타입, 악센트, 레이아웃, 밀도, 미디어) + 보조에서 빌릴 것 + 역할 규칙(CTA 전용, 코드 전용, 장식 전용) + 미디어 전략(실제 / 생성됨 / 스톡 / 플레이스홀더).
- 결정-원장:
결정 | 출처 | 역할/규칙 | 이유테이블. 모든 주요 시각적 선택은 참조, 클라이언트 제약 조건, 기존 시각적 진실 또는 이 스킬의 제작 규칙으로 추적됩니다. 출처가 없으면 출시하지 않습니다. - 방향-계약: direction-workflow.md의 다섯 개의 짧은 블록. 마무리 패스는 렌더링을 이들에 대해 확인합니다.
- 구현 프리셋(섹션 1), 티어(PREMIUM_TECH_TIER) 및 안티-슬롭 규칙(섹션 13)을 사용합니다.
무엇이 무엇을 재정의하는가 (리서치 대 이 스킬)
하드 — 제품 진실, 접근성 및 기존 시스템이 승리:
local및surface범위에서 설정된 브랜드 토큰과 컴포넌트 규칙은 이 스킬의 취향 기본값을 이깁니다. 사용자가 재설계를 승인하거나 해당 틸트를 제거하도록 요청하지 않는 한 기존 글꼴, 보라색 브랜드 색상, Lucide 시스템, radius 또는 컴포넌트 언어를 교체하지 마십시오. foundations.md를 참조하십시오.- 접근성, 의미론적 정확성, 작동하는 동작, 실제 자산 및 명시적인 사용자 제약 조건이 항상 승리합니다. 대비 실패를 수정하되 이를 제품을 재스타일링하는 허가로 사용하지 마십시오.
world범위에서 콘텐츠 및 취향 틸트는 모든 새로운 선택에 적용됩니다: em-dash 남용, 장식용 떠다니는 알약, 반사적인 AI-보라색, 이유 없는 기본 글꼴, 가짜 AI 사람의 사용후기 및 장식 상자 안의 아이콘.- 하나의 스타일을 완전히 복제하지 마십시오. 토큰 역할을 그대로 유지하십시오(CTA 전용 악센트는 CTA 전용으로 유지).
소프트 — 실제 참조가 승리(구조 및 레이아웃):
- 페이지 구조, 섹션 순서 및 개수, 푸터 모양, 히어로 모양, 레이아웃 변형, 밀도: 고정 템플릿이 아닌 리서치에 의해 주도됩니다. 이 스킬의 구조적 규칙은 합리적인 기본값일 뿐, 법칙이 아닙니다 — 참조가 해당 사례에 대해 다르고 좋은 구조를 보여준다면 참조를 따르십시오.
- 구조는 사용성, 전환 또는 반응형을 손상시키는 경우에만 "잘못된" 것입니다. 이 스킬의 기본값과 다르다고 해서 잘못된 것은 아닙니다.
0.1 — Visu
…
[truncated for translation]