이 스킬 내의 README.md 파일을 먼저 읽으십시오. 여기에는 다음이 포함되어 있습니다:
- Vebidor가 무엇인지 (V 언어 W3C WebDriver + WebDriver-BiDi 클라이언트) 그리고 무엇이 아닌지 (앱, 웹사이트, 소스 내 로고 없음 — 모든 시각 자료는 제안된 아이덴티티이며 플래그가 지정됨).
- CONTENT FUNDAMENTALS — 보이스(기술적, 성취 지향적, 비교 우선), 대소문자 규칙, 그리고 핵심 이모지 어휘 (✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱). 이모지는 이 브랜드의 일부입니다. 문서와 마케팅 표면에서 유지하십시오.
- VISUAL FOUNDATIONS — 팔레트, 타입, 간격, 모션, 표면, 카드 아나토미.
- ICONOGRAPHY — 상태용 이모지, UI 크롬용 Lucide(플래그가 지정된 대체), 브라우저 로고용 단색 SVG 글리프.
- 인덱스 — 각 항목의 위치.
그런 다음 다른 파일을 탐색하십시오:
colors_and_type.css— 모든 디자인 토큰(--vb-blue-500,--slate-950,--code-keyword,--font-mono,--space-*,--radius-*,--shadow-*,--motion-*)과 기본 타입 스타일 및.chip클래스. 새 항목에<link rel="stylesheet">로 추가하십시오. 이것이 기초입니다.preview/— 마크업을 참조할 수 있는 19개의 독립형 디자인 시스템 카드(색상, 타입, 간격, 구성 요소, 브랜드).assets/— 플레이스홀더 로고(플래그 지정됨) 및 브라우저 글리프.ui_kits/docs/— 고해상도 React 문서 사이트 재현(TopNav, Sidebar, TocPanel, DocsPage, CodeBlock, Callout, ComparisonTable, ApiSignature). 구성 요소 범위: 각 파일은 내보내기를window에 연결하므로 다른<script type="text/babel">파일에서 사용할 수 있습니다. 확장하려면 구성 요소를 복사하고index.html에<script type="text/babel" src="…">태그를 추가한 다음 동일한window.X = X패턴을 따르십시오.ui_kits/marketing/— 랜딩 페이지 재현(MarketingNav, Hero, FeatureGrid, BrowserMatrix, PhasesTimeline, MarketingFooter). 동일한 구성 요소 범위 지정 패턴.fonts/README.md— Google Fonts CDN을 통해 로드된 폰트(Geist + JetBrains Mono). 대체는 플래그가 지정되어 있습니다. 사용자에게 다른 브랜드 폰트가 있으면 교체하십시오.
호출 시
사용자가 다른 안내 없이 이 스킬을 호출하면 무엇을 만들고 싶은지(문서 페이지? 랜딩 섹션? CLI 출력 목업? 릴리스 노트 그래픽? 비교 테이블? 터미널 스크린샷?) 물어보십시오. 어떤 표면(docs, marketing, terminal)과 API의 어떤 부분을 강조할지 물어보십시오. 그런 다음 HTML 아티팩트를 출력하는 전문 디자이너처럼 행동하십시오. 또는 실제 저장소에서 작업하는 경우 프로덕션 코드를 생성하십시오.
시각적 아티팩트(슬라이드, 목업, 임시 프로토타입) 생성 시
assets/에서 필요한 에셋과 마크업을 가져올 프리뷰 카드를 복사하십시오.- 현재 프로젝트에 정적 HTML 파일을 만드십시오.
colors_and_type.css를 링크하십시오(상대 경로). - 기반 사용: 강조에는
--vb-blue-500, 코드에는--code-bg/--code-fg및 토큰 클래스, 상태에는.chip chip--success등,--font-sans+--font-mono. - 브랜드에서 사용하는 곳에 이모지를 유지하십시오. ✅ ⚠️ ✨ 🏆 는 장식이 아니라 핵심입니다.
- 그라데이션이나 왼쪽 라운드 테두리 카드를 만들지 마십시오. 평평한 표면, 테두리, 하나의 높이 단계를 사용하십시오.
프로덕션 코드 작업 시
이 스킬을 브랜드 참조로 읽으십시오. 스크린샷에서 근사하는 대신 colors_and_type.css에서 값(16진수 코드, 폰트 스택, 반경, 모션 타이밍)을 가져오십시오. ui_kits/의 구성 요소 패턴은 미용적 재현일 뿐, 프로덕션 코드가 아닙니다 — JSX 배선이 아닌 스타일링을 이식하십시오.
플래그를 지정해야 할 주의 사항
사용자가 실제 로고, 실제 폰트, 실제 아이콘을 출시하도록 요청하면 잠시 멈추고 확인하십시오. 여기 있는 모든 것은 소스 저장소의 산문(시각적 아이덴티티가 없음)에서 추론된 것입니다. 정식화를 거부하십시오.