본문으로 건너뛰기
cccskills
무료GitHub에 공개

brand-identity

Voice framework, visual identity standards, color palette management, typography specs, brand consistency

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md4.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Brand Identity

Marka kimligini olusturma ve koruma rehberi. Tutarlilik her seydir.

Voice Framework

Voice vs Tone

KavramTanimOrnek
VoiceMarkanin kalici kisilik ozellikleri"Profesyonel ama samimi"
ToneDuruma gore degisen ifade bicimiHata mesajinda: empatik, basaride: kutlamaci

Personality Traits Matrisi

Markanin 4 eksenini tanimla:

EksenSol UcSag UcSenin Pozisyon (1-5)
FormaliteResmi, kurumsalSamimi, konusma dili?
EnerjiSakin, olculuHeyecanli, enerjik?
MizahCiddi, agirbasliEglenceli, espirili?
TeknikBasit, herkes icinUzman, teknik dil?

Voice Checklist

  • 3-5 kelimelik voice tanimi var (orn: "Guvenilir, samimi, net")
  • Her voice ozelliginin "yapma" karsiligi var
  • Ornek cumleler var (ana sayfa, hata mesaji, onboarding)
  • Tone varyasyonlari tanimli (basari, hata, bekleme, bilgi)

Visual Identity Standards

Logo Kullanim Kurallari

KuralDetay
Clear spaceLogo etrafinda min logo yuksekligi kadar bosluk
Min boyutDijitalde min 24px yukseklik
Arka planHangi renklerde kullanilabilir, hangilerinde degil
VaryasyonlarFull color, monochrome, reversed (dark bg)
YasaklarStretch etme, renk degistirme, efekt ekleme

Color Palette Management

3-Katman Token Mimarisi

LAYER 1: Primitive (Ham renkler)
  blue-500: #3b82f6
  blue-600: #2563eb
  gray-100: #f3f4f6

LAYER 2: Semantic (Anlam tasiyan)
  color-primary: {blue-600}
  color-danger: {red-600}
  color-surface: {white}
  color-text: {gray-900}

LAYER 3: Component (Kullanim yeri)
  button-primary-bg: {color-primary}
  button-primary-hover: {blue-700}
  card-bg: {color-surface}
  input-border: {gray-300}

Palette Kurallari

KuralDetay
Ana renklerMax 3 (primary, secondary, accent)
Notral tonlar1 gray skalasi (50-950)
Durum renkleriSuccess (yesil), Warning (sari), Danger (kirmizi), Info (mavi)
Dark modeHer semantic token'in dark varyanti
KontrastTum text/bg kombinasyonlari WCAG AA (4.5:1)

Typography Specifications

KullanimFontAgirlikBoyutSatir Yuksekligi
DisplayPrimaryBold (700)48-72px1.1
H1PrimarySemibold (600)36-48px1.2
H2PrimarySemibold (600)24-36px1.25
H3PrimaryMedium (500)20-24px1.3
BodyPrimaryRegular (400)16px1.5
SmallPrimaryRegular (400)14px1.4
CaptionPrimaryRegular (400)12px1.3
CodeMonoRegular (400)14px1.5

Font Pairing Rehberi

BaslikGovdeKarakter
InterInterNotr, profesyonel
Cal SansInterModern, teknoloji
Playfair DisplaySource SansLuks, editoryal
Space GroteskDM SansYaratici, modern
FrauncesWork SansSicak, organik

Iconography

KuralDetay
Stil tutarliligiTek icon seti sec (Lucide, Heroicons, Phosphor)
Boyut skalasi16, 20, 24, 32px (text ile orantili)
Cizgi kalinligiSet icinde tutarli (1.5px veya 2px)
Filled vs OutlinedBirini sec, karistirma

Brand Consistency Checklist

Dijital Urunler

  • Primary font tanimli ve yuklendi
  • Color token'lari CSS variable olarak tanimli
  • Logo tum varyasyonlarda mevcut (SVG)
  • Favicon ve og:image marka tutarli
  • Button, input, card stilleri tutarli
  • Hata mesajlari marka voice'una uygun
  • Empty state illust/copy marka ile uyumlu
  • Loading animasyonu marka ile uyumlu
  • 404 sayfasi marka ile uyumlu

Iletisim

  • Email template'leri marka tutarli
  • Bildirim mesajlari voice rehberine uygun
  • Onboarding akisi marka tonunda
  • Dokumantasyon stili tutarli

Islem Akisi

  1. Kesfet: Marka degerlerini, hedef kitleyi, rakipleri analiz et
  2. Tanimla: Voice, renk, tipografi, ikon standartlarini belirle
  3. Dokumante et: Token'lari, kurallari, ornekleri yaz
  4. Uygula: Design system'e entegre et
  5. Denetle: Tutarlilik kontrolu yap, sapmalari duzelt

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

Steam-style achievement system with XP, levels, streaks, and skill trees. Gamifies the development workflow. 25 achievements across 5 categories.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

Framework for measuring and tracking agent response quality over time. Detects regressions before they reach production. Use when evaluating agent changes, auditing quality, or establishing performance baselines.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

Agent Context Isolation

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

Agent ve skill dosyalarinin yapisal dogrulamasi. Frontmatter kontrol, naming convention, zorunlu bolum kontrolu, tutarlilik denetimi. Yeni agent/skill eklendiginde veya mevcut dosyalar duzenlediginde otomatik calistirilir.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

vibeeval/vibecosystem5382026년 8월 9일 업데이트

vibeeval의 스킬 모두 보기

이 스킬의 문제 신고