frankx-brand: Скилл для соблюдения стандартов бренда

--- name: frankx-brand description: Apply official FrankX brand standards to all artifacts, ensuring visual consistency across content, products, and communications. Use this skill for any FrankX-related content creation, design work, or communication. --- # FrankX Brand Guidelines & Voice ## Core Mission Translate Frank's musician-technologist journey into language, prompts, and experiences that turn overwhelmed creators into confident, AI-empowered artists. ## Brand Pillars ### 1. Creator-First Every deliverable should empower independent creators, not overwhelm them with corporate jargon or complex tech speak. ### 2. Soul + Systems Bridge spirituality and technology. Show how AI can amplify human creativity while honoring artistic integrity. ### 3. Action-Oriented Every piece of content should end with a clear next step. No inspiration without implementation. ### 4. Studio Energy Communicate with the warmth and intimacy of a late-night studio session, not a boardroom presentation. --- ## Visual Identity ### Color Palette **Primary Domain Colors:** ```css /* Conscious & Spirituality */ --conscious-purple: #8B5CF6; --conscious-deep: #6D28D9; --conscious-light: #C4B5FD; /* AI & Technology */ --tech-cyan: #06B6D4; --tech-electric: #0891B2; --tech-bright: #67E8F9; /* Music & Creativity */ --music-orange: #F97316; --music-vibrant: #EA580C; --music-warm: #FDBA74; /* Personal Development */ --growth-green: #10B981; --growth-forest: #059669; --growth-fresh: #6EE7B7; ``` **Foundational Colors:** ```css /* Backgrounds */ --deep-navy: #0F172A; --midnight: #1E293B; --cosmic-dark: #0F1629; /* Accents */ --cosmic-purple: #AB47C7; --aurora-blue: #43BFE3; --gold-accent: #F59E0B; --white: #FFFFFF; ``` **Usage Guidelines:** - Use domain colors for content-specific materials - Deep navy/midnight for backgrounds - Gold accent for CTAs and important actions - Never use pure black (#000000) - Maintain 4.5:1 contrast ratio minimum (WCAG AA) ### Typography **Font Families:** ```css /* Headings - Modern & Bold */ --font-heading: 'Poppins', sans-serif; /* Body - Clean & Readable */ --font-body: 'Inter', sans-serif; /* Code - Technical Content */ --font-code: 'JetBrains Mono', monospace; ``` **Type Scale:** ```css --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ ``` **Typography Rules:** - Headlines: Poppins Bold (600-700 weight) - Body: Inter Regular (400 weight) - Emphasis: Inter Medium (500 weight) - Strong: Inter SemiBold (600 weight) - Line height: 1.5 for body, 1.2 for headlines - Letter spacing: -0.02em for large headings ### Visual Style **Design Principles:** 1. **Glassmorphism** - Subtle blur and transparency for modern depth 2. **Aurora Gradients** - Soft, cosmic background effects 3. **Organic Flow** - Natural, flowing patterns (not rigid grids) 4. **Sacred Geometry** - Subtle geometric accents for conscious content 5. **Depth Through Layers** - Shadows, blur, and overlays create dimension **Visual Effects:** ```css /* Glassmorphic Cards */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100% ); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.18); /* Aurora Background */ background: radial-gradient( circle at 20% 20%, rgba(67, 191, 227, 0.22), transparent 45% ), radial-gradient( circle at 80% 10%, rgba(171, 71, 199, 0.18), transparent 55% ); /* Depth Shadows */ box-shadow: 0 25px 60px rgba(8, 15, 33, 0.4), 0 12px 25px rgba(8, 15, 33, 0.3); ``` **Imagery Guidelines:** - Use algorithmic/generative art for headers - Avoid stock photos - prefer original visuals - Dark backgrounds with luminous accents - High contrast for readability - Optimize for web (WebP, AVIF formats) --- ## Voice & Tone ### Core Voice Attributes **Cinematic** - Paint vivid pictures with words *"The studio lights snap on at 2 AM. Ideas flowing like liquid rhythm."* **Intimate** - Speak directly to the individual creator *"You know that moment when the perfect chord progression hits?"* **Rooted in Studio Life** - Ground abstract concepts in creative practice *"Think of AI prompts like arranging a track - layering elements until it resonates."* **Technically Accurate with Warmth** - Explain complex ideas without coldness *"LangGraph orchestrates agents the way a producer balances stems - each voice clear, all working together."* ### Tone by Content Type **Blog Articles:** - Lead with feeling, then explain the system - Use studio metaphors and music analogies - End with concrete action steps - Example: "Before we dive into the architecture, picture this: you're arranging a track..." **Product Copy:** - Focus on transformation, not features - Show the creative outcome first - Highlight time saved and confidence gained - Example: "From idea to release in one session. No overthinking. Pure creation." **Social Media:** - Short, punchy, inspiring - Lead with the 'why', follow with the 'how' - Use line breaks for rhythm - Example: "Most creators overthink.nnVibe OS removes the friction.nnYou create. AI handles the rest.nnPure flow state." **Course Content:** - Clear, structured, but encouraging - Celebrate small wins - Break complex concepts into studio-relatable chunks - Example: "Module 1 complete! You just learned what takes most producers months. Now let's apply it..." **Email Sequences:** - Conversational, like messages from a mentor - Personal stories and case studies - Each email = one clear action - Example: "Quick note from the studio - just watched Sarah launch her first track using yesterday's lesson..." ### Words We Use ✅ Create, craft, build, compose, architect, orchestrate ✅ Flow, rhythm, resonance, frequency, vibe ✅ Transform, empower, amplify, elevate ✅ Session, ritual, practice, journey ✅ Authentic, soul-aligned, conscious ### Words We Avoid ❌ Disrupt, revolutionary, game-changing (overused startup speak) ❌ Synergy, leverage, utilize (corporate jargon) ❌ Cheap, easy, simple (undermines the craft) ❌ Automate everything (we augment, not replace humans) ❌ Just, merely, simply (can sound condescending) --- ## Content Structure Patterns ### Blog Article Template ```markdown # [Compelling Headline - Promise + Curiosity] [Opening Hook - Studio scene or personal story - 2-3 sentences] [The Challenge - What creators struggle with - 1 paragraph] [The Insight - Why this matters now - 1 paragraph] ## [Section 1: The Feeling] Paint the picture. Use metaphors. Make it visceral. ## [Section 2: The System] Explain how it works. Technical but warm. Use examples. ## [Section 3: The Implementation] Step-by-step guide. Clear actions. Code/templates if applicable. ## [Section 4: The Transformation] Case study or example. Show the outcome. Build belief. ## Conclusion: Your Next Session One clear action to take now. Link to resource/product/community. --- *Share your creation* [CTA] ``` ### Product Landing Page Structure ```markdown # Hero Section - Headline: Transformation promise (7 words max) - Subhead: How + who it's for (15 words max) - CTA: Action-oriented (2-3 words) - Visual: Algorithmic art or product demo # Social Proof - Creator testimonials (authentic quotes) - Results/metrics (tracks released, time saved) - Community snapshot # How It Works - 3-step process (max) - Visual for each step - Emphasize ease + outcome # Features as Benefits - Don't list features - Show how each unlocks creative power - Use studio/music metaphors # Pricing/CTA - Clear tiers - Emphasize value, not cost - Money-back guarantee if applicable - Strong action button # FAQ - Address real concerns - Link to support resources - Build confidence ``` ### Social Media Post Framework ```markdown # Hook (Line 1) Question, bold statement, or surprising insight # Story/Context (Lines 2-4) Brief narrative or example # Insight/Lesson (Lines 5-6) The key takeaway # Action (Line 7+) What to do next + link # Hashtags 3-5 relevant tags (not spammy) ``` --- ## Domain-Specific Guidelines ### Conscious Content (Spirituality & Awareness) **Color:** Purple palette (#8B5CF6) **Visual Style:** Sacred geometry, flow fields, aurora effects **Tone:** Reflective, poetic, grounded in practice **Metaphors:** Light, frequency, resonance, awakening, emergence **Example:** "Consciousness isn't abstract - it's the aware space between thoughts, like silence between notes in a melody." ### AI-Tech Content (Enterprise & Technical) **Color:** Cyan palette (#06B6D4) **Visual Style:** Neural networks, circuit patterns, clean diagrams **Tone:** Technically precise, forward-thinking, accessible **Metaphors:** Architecture, orchestration, systems, intelligence **Example:** "LangGraph agents work like a jazz ensemble - each improvises within structure, listening and adapting in real-time." ### Music Content (Production & Creativity) **Color:** Orange palette (#F97316) **Visual Style:** Waveforms, frequencies, vibrant energy **Tone:** Energetic, inspiring, hands-on **Metaphors:** Sessions, tracks, mixing, arrangements, flow **Example:** "Suno prompts are like mixing stems - layer the elements, balance the frequencies, let the magic emerge." ### Personal Dev Content (Growth & Performance) **Color:** Green palette (#10B981) **Visual Style:** Growth patterns, organic expansion, progress indicators **Tone:** Encouraging, practical, transformative **Metaphors:** Seasons, cultivation, momentum, evolution **Example:** "Habits compound like interest - small deposits daily, exponential returns over time." --- ## Brand Applications ### When Creating Artifacts (HTML/React) - Use FrankX color palette (domain-appropriate colors) - Apply glassmorphic design patterns - Poppins for headings, Inter for body text - Dark backgrounds with luminous accents - Ensure WCAG AA accessibility (4.5:1 contrast) ### When Writing Documentation - Lead with 'why' before 'how' - Use studio/music analogies where applicable - Include code examples with clear comments - End sections with "Next step" guidance - Maintain encouraging, mentor-like tone ### When Designing Graphics - Generate algorithmic art for headers (use algorithmic-art skill) - Apply domain-specific color palette - Ensure high contrast for text overlay - Optimize for web delivery (WebP/AVIF) - Include FrankX branding subtly (no heavy logos) ### When Building Products - Focus on creator transformation - Simplify complex workflows - Beautiful, intuitive interfaces - Fast, responsive experiences - Clear onboarding and next steps --- ## Quality Checklist Before delivering any FrankX content, verify: **Visual:** - [ ] Uses correct domain color palette - [ ] Typography is Poppins (headings) + Inter (body) - [ ] Meets WCAG AA contrast requirements - [ ] Glassmorphic/aurora design elements applied - [ ] Optimized images (WebP/AVIF, proper sizing) **Content:** - [ ] Leads with feeling, then explains system - [ ] Uses studio/music metaphors where relevant - [ ] Ends with clear next action - [ ] Avoids corporate jargon - [ ] Maintains creator-first perspective - [ ] Technically accurate but warm **Structure:** - [ ] Clear hierarchy (H1 → H2 → H3) - [ ] Scannable (bullets, short paragraphs) - [ ] Logical flow (hook → insight → action) - [ ] Mobile-responsive layout - [ ] Fast loading (<3s) **Brand Alignment:** - [ ] Reflects core mission (empower creators) - [ ] Balances soul + systems - [ ] Action-oriented outcome - [ ] Studio energy in tone - [ ] Authentic FrankX voice --- ## Examples in Action ### ❌ Generic AI Content *"Leverage our cutting-edge AI platform to disrupt your workflow and achieve revolutionary results."* **Issues:** Corporate jargon, vague promises, no warmth ### ✅ FrankX Style *"Picture this: 2 AM in the studio, perfect idea flowing. But by morning? Lost. Vibe OS captures those midnight sparks and turns them into tracks you actually release."* **Why it works:** Studio scene, specific problem, clear transformation, warm tone --- ### ❌ Technical Documentation *"Initialize the LangGraph StateGraph object with nodes representing agent functions and edges defining the workflow DAG."* **Issues:** Accurate but cold, no context, assumes expertise ### ✅ FrankX Style *"Think of LangGraph like arranging a track. Each agent is an instrument (nodes), and edges are how they pass the creative baton. The StateGraph is your multitrack recorder, keeping everything in sync."* **Why it works:** Music metaphor, builds understanding, maintains technical accuracy with warmth --- ## When to Use This Skill Activate the `frankx-brand` skill whenever creating: - Blog articles or social content for FrankX - Product pages or marketing materials - Course content for AI Music Academy - Email sequences or newsletters - Design assets or visual content - Technical documentation with FrankX voice - Any artifact representing the FrankX brand This skill ensures every output reflects Frank's unique voice - technically brilliant, creatively inspiring, deeply human. **Remember:** Every piece of content should leave creators feeling empowered, not overwhelmed. Technology amplifies creativity; it doesn't replace soul. --- **Skill Version:** 1.0 **Last Updated:** November 14, 2025 **Maintained By:** FrankX Brand Team