Kopírovat--- name: aibility-brand description: Apply the Aibility visual brand — warm-neutral palette, Signika + Geist typography, deel.com-inspired layout discipline — to any design output (landing page, slide deck, social post, document, email). Use this whenever a user asks for design "in our brand", "in Aibility colors", or anything that needs to look like aibility.org. --- # Aibility Brand Skill Use this skill any time you generate or modify a visual artifact for Aibility — a webpage, a slide, a social card, a PDF, a screenshot mock, an email header. It encodes the brand so the result looks like aibility.org, not like generic AI output. This is a **brand** definition, not an HTML component library. Apply the colors, typography, tone and visual principles below to whatever medium the user is asking for. If the user provides their own structural framework (Tailwind, Figma, Keynote, PowerPoint, Notion), respect it — translate the brand to that medium, don't force HTML/CSS. ## What Aibility is Aibility is a Czech B2B education + advisory brand that helps large corporates (NN, Generali, etc.) and their employees integrate AI into real work. Audience is CEO / HR / B-1 management deciding between vendors. Output must read as: **modern, beautiful, these people know what they're doing.** Trust + modernity + a feeling the reader is one step ahead. Personality: **energetic, trustworthy, human.** Not dry suit-wearing consultants. Not techno-hype startuppers. Enthusiasm without pressure. ## Colors Warm-neutral palette inspired by deel.com. **No cool blue-gray.** Borders and muted text use `rgba` over the warm black base (`27,27,27`), not solid hex grays. Distribution rule — keep these ratios on every artifact: - **85% warm neutrals** (cream, warm black, raised surfaces) - **12% accent purple** (only where it earns attention — CTAs, key word in a heading, eyebrow labels) - **3% supporting** (status colors, icons) ### Core palette (light mode — default) | Role | Hex | Use it for | Do not | |---|---|---|---| | Surface (page bg) | `#FFFBF4` | Default page background. Warm cream. | Never use pure white `#FFFFFF` as the page bg — kills the warmth. | | Surface raised | `#F7F5F2` | Card fills sitting on cream. | Don't place a raised card on a warm-tinted section (`#F7F5F2` on `#F7F5F2` is invisible). Promote to white instead. | | Surface white | `#FFFFFF` | High-contrast section against cream. | Don't use it as the dominant page bg. | | Brand primary | `#1B1B1B` | Warm black — body text, dark sections, primary button. | Don't use pure `#000000`. | | Brand accent | `#5938B7` | Primary purple. CTAs, eyebrow labels on light bg, key `<em>` words in headings on light bg. | Don't use on dark backgrounds — too dark, no contrast. Don't use as section bg. | | Accent light | `#A98DF6` | Purple for dark backgrounds — eyebrow labels, key `<em>`, numbers, badges when bg is dark. | Don't use on light bg as primary accent — too pale. | | Accent subtle | `#C4B1F9` | Tinted badges, light pill backgrounds. | Don't use as text color. | | Accent deep | `#201547` | Dark hero / inset card backgrounds. | Don't use as text. | | Danger | `#DC2626` | Errors, destructive. | Don't use for emphasis. | ### Text and borders (always rgba over warm black, never solid gray) | Role | Value | Use it for | |---|---|---| | Text default | `#1B1B1B` | Body text on light bg. | | Text secondary | `rgba(27,27,27, 0.7)` | Descriptions, subtitles. | | Text muted | `rgba(27,27,27, 0.6)` | Captions, secondary labels. | | Border | `rgba(27,27,27, 0.12)` | Dividers, default borders. | | Border hover | `rgba(27,27,27, 0.35)` | Hover state on bordered elements. | ### Dark sections (warm white on warm black, never cold) | Role | Value | Use it for | |---|---|---| | Dark surface | `#1B1B1B` (or `#0D0D0D` for footer) | Dark section background. | | Dark text | `#FAF4EE` | Body text on dark bg. Warm white, NOT `#FFFFFF`. | | Dark text muted | `rgba(250,244,238, 0.65)` | Secondary text on dark bg. | | Dark card | `rgba(255,255,255, 0.05)` | Cards on dark bg — translucent, never a solid dark hex. | ### Banned colors - `#FFFFFF` as page background (use cream `#FFFBF4`) - Pure black `#000000` (use warm `#1B1B1B`) - Cool gray borders `#E5E7EB`, cool gray text `#6B7280` (use rgba over warm black) - Cold dark hex `#F5F5F5` on dark sections (use warm `#FAF4EE`) - Purple gradient backgrounds across whole sections (the "AI slop" look) - Neon / glow / glassmorphism colors ## Typography Two typefaces. Load both from Google Fonts. **No exceptions, no system fonts.** - **Signika** (weight 600) — display, all headings. Confident, slightly soft, not shouty. - **Geist** (400 body, 600 button/strong) — body text, UI, buttons. - **Geist Mono** (400) — small labels, eyebrows, captions. ### Scale | Role | Font | Size | Weight | Line height | Letter spacing | |---|---|---|---|---|---| | Display (hero) | Signika | clamp(40px → 72px) | 600 | 1.05 | -0.03em | | H1 | Signika | clamp(36px → 48px) | 600 | 1.05 | -0.02em | | H2 | Signika | clamp(28px → 48px) | 600 | 1.05 | -0.02em | | H3 | Signika | 22px | 600 | 1.25 | 0 | | Body | Geist | 16px | 400 | 1.70 | -0.005em | | Body large | Geist | 17px | 400 | 1.70 | -0.005em | | Small | Geist | 14px | 400 | 1.50 | 0 | | Mono (eyebrow / label) | Geist Mono | 12–14px | 400 | 1.50 | 0.10–0.18em, uppercase | | Button | Geist | 14px | 600 | 1.00 | 0.015em | ### Rules - Headings use weight **600, not 700**. More confident, less shouty. - Body line-height is **1.70** for readability — don't tighten to 1.4–1.5. - Eyebrow labels above H2 are mono, uppercase, 12px, purple. Never bare `<p>`. - Key word in a heading goes in `<em>` colored with the accent (purple on light, accent-light on dark). One emphasized word per heading, never two. - **Banned fonts:** Inter, Roboto, Arial, Space Grotesk, Clash Display, Satoshi, DM Sans, system stacks. Google Fonts loader: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;600;700&family=Geist+Mono:wght@400&family=Signika:wght@600;700&display=swap"> ``` ## Tone of voice The brand **is**: energetic, trustworthy, human, precise, plain-spoken. The brand **is not**: corporate, hype-y, ironic, salesy, jargon-heavy. ### Copy rules - Write Czech first. English only when the audience demands it. - Short sentences. One idea per sentence. Conversational, not corporate. - Lead with the reader's problem, not your product. - Concrete > abstract. Numbers > adjectives. "50+ firem" beats "many companies". - Czech grammatical mood — direct address ("Zjisti, co tvůj tým s AI umí"), not passive corporate ("Bude umožněno zjistit…"). - Never use these words: revolutionary, game-changing, powerful, cutting-edge, unleash, leverage, synergies, robust, seamless. ### Yes / no - Yes: "AI umíš používat. Ale víš, jak dobře?" - No: "Unlock the revolutionary power of AI for your enterprise." - Yes: "Měřitelný posun, ne další workshop." - No: "Cutting-edge AI solutions that drive synergies across your organization." - Yes: "Tvůj tým za 6 týdnů: +12 bodů SP score." - No: "Empower your team with industry-leading AI capabilities." ## Visual principles ### Space - Generous whitespace. Content max-width **1312px** centered, never wider. - Section vertical padding `clamp(96px, 10vw, 128px)` for landing pages. `clamp(48px, 6vw, 64px)` for content-dense pages (blog, listings). - Outer page padding `clamp(20px, 4vw, 64px)`. - Card padding: 32px (large), 24px (standard), 20px (compact). - Spacing tokens: 4 / 8 / 16 / 24 / 32 / 48 / 80 px. Snap to these — no arbitrary `13px`, `27px`. ### Cards - **No borders in default state.** Separation comes from background contrast — raised card `#F7F5F2` on cream page `#FFFBF4`, or translucent `rgba(255,255,255,0.05)` on dark bg. - **No translateY lift on hover.** Hover = dual-layer warm box-shadow only. - Default state has no shadow. Subtle elevation appears only on hover or for genuinely floating elements (modals, dropdowns). - Border-radius hierarchy: pills 200px (buttons, tabs, inputs) → 8px (small UI) → 12px (cards) → 16px (large cards) → 20px (section containers, dark insets) → 24px (premium dark cards). ### Shadows Always warm and dual-layer. Base is `rgba(27,27,27, x)`, **never pure black**. - Small: `rgba(27,27,27, 0.08) 0 2px 8px` - Medium: `rgba(27,27,27, 0.12) 0 8px 24px, rgba(27,27,27, 0.04) 0 2px 16px` - Large: `rgba(27,27,27, 0.16) 0 16px 32px, rgba(27,27,27, 0.05) 0 2px 32px` ### Motion - Transitions 0.15s ease-in-out for hovers, 0.6s `cubic-bezier(0.16, 1, 0.3, 1)` for scroll reveals. - Scroll reveal: fade-in + translateY(30px), staggered when items are in a grid. Above-the-fold content reveals immediately, no on-load animation. - Never animate width / height / padding. Only opacity, transform, box-shadow. ### Imagery - Real photos > illustrations > stock photos > icons. - Photo tone matches section tone — warm photos for warm sections, candid/atmospheric for backgrounds. - Dark sections can carry full-bleed photos with text overlay (use a 0.5–0.7 dark gradient overlay, not a flat tint). - Brand uses purple/lilac pastel backgrounds for icon tiles (peach `#FDE8D8`, blue `#D8EBFF`, purple `#E0D4F7`, green `#D4F0D4`, pink `#F5D5E0`, yellow `#FFF3D4`, slate `#E2E4E8`). One pastel per icon — no mixing. ### Buttons - Pill shape (border-radius 200px). Height 40–48px. Letter-spacing 0.015em. - Primary on light bg: `#1B1B1B` background, white text. Hover lifts to `#333333`. - Primary on dark bg: `#A98DF6` (accent-light) background, `#201547` (accent-deep) text. - Secondary: transparent background, `rgba(27,27,27, 0.12)` border, hover border `rgba(27,27,27, 0.35)`. - Accent: `#5938B7` background, white text on light bg. ## Rules of application Do: - Default to cream `#FFFBF4` page background. Use white `#FFFFFF` only as a contrasting section. - Put eyebrow labels (mono, uppercase, 12px, purple) above every H2. - Emphasize one key word per heading with `<em>` + accent color. - Keep the accent purple under 12% of any view's visible area. - Alternate section variants on long pages (cream → white → warm → dark) to create rhythm. - On dark sections, switch the accent to `#A98DF6` (accent-light) and use warm white `#FAF4EE` for text. - Use rgba over `#1B1B1B` for text/border opacity. Never use solid gray hexes. Don't: - Don't mix more than two accent colors in one view. - Don't put a `#F7F5F2` raised card on a `#F7F5F2` warm section — they merge. Use white card or dark inset instead. - Don't add borders to cards in default state. Use background contrast. - Don't use translateY lift on hover. Shadow only. - Don't use Inter, Roboto, or system fonts as a "fallback" — load Signika and Geist properly. - Don't gradient-fill large surfaces with purple. Purple is an accent, not a backdrop. - Don't write copy with hype words. Specific, plain, direct. - Don't center body text. Headings can center on hero/blog hero; body always left-aligns. If in doubt: - Pick the **warm** option over the cool one. - Pick the **plain** word over the hyped one. - Pick **more whitespace** over more content. - Pick **one strong number/photo/quote** over three weak ones. ## Application examples ### Example 1 — "Build me a landing page hero" - Section: dark variant. Background `#201547` (accent-deep) or `#1B1B1B`. Optional subtle radial gradient. - Eyebrow: mono 12px uppercase, `#A98DF6` (accent-light) — e.g. "— DIAGNOSTIKA PRÁCE S AI". - H1: Signika 600, clamp(40 → 72px), white `#FAF4EE`. One key word in `<em>` colored `#A98DF6`. - Body: Geist 17px, line-height 1.70, `rgba(250,244,238, 0.7)`. Max 14ch–60ch. - Primary CTA: pill, `#A98DF6` background, `#201547` text. Secondary CTA: ghost — transparent bg, `rgba(255,255,255,0.3)` border, white text. - Section padding: clamp(96px, 10vw, 128px) top + bottom. - No card chrome around the text block. Generous whitespace. ### Example 2 — "Make a slide for a sales deck (16:9)" - Background: cream `#FFFBF4`. Title slide may go dark `#1B1B1B`. - Top-left: small logo. Top-right: mono section label (12px, purple, uppercase). - H1: Signika 600, ~64px, warm black `#1B1B1B`. One word in `<em>` purple. - Body: Geist 18–22px, line-height 1.5–1.7. Max ~720px width. - One supporting visual: a real photo (warm tone), a number ("50+", "12×"), or a single quote. Never all three. - Footer of slide: mono 12px muted "aibility.org · {topic}". - No clip-art icons. No drop shadows on text. No animations on the slide itself. ### Example 3 — "Write a LinkedIn share card (1200×630)" - Background: cream `#FFFBF4` (or dark `#1B1B1B` for emphasis). - Single line eyebrow top-left, mono purple. - Headline: Signika 600, ~72–88px depending on length, max two lines, one `<em>` word in purple. - Bottom-left: small logo. Bottom-right: short call (mono 14px) like "aibility.org →". - One photo or one stat. No stock illustration. - Whitespace dominates — text + logo should sit in roughly the left third / center, with breathing room around them. ### Example 4 — "Style a PDF report" - Cover: dark `#1B1B1B` page, warm white text, purple eyebrow + key word. - Body pages: cream `#FFFBF4` page background, warm black text, Signika 600 for section headings, Geist for body at 11pt / line-height 1.55. - Section dividers: mono purple eyebrow on its own line, then H2 in Signika, then body. - Tables: zebra rows in `rgba(27,27,27, 0.04)`. No vertical borders. Subtle horizontal dividers in `rgba(27,27,27, 0.12)`. - Numbers in callouts: Signika 600, clamp(36–56px), warm black with the unit ("+", "%") in purple. - Footer of every page: mono 10px, muted — "Aibility · aibility.org · {report title}" + page number. ## Quick reference checklist Before shipping anything, scan: - [ ] Page background is cream `#FFFBF4`, not white. - [ ] Warm black `#1B1B1B`, not pure black, for primary dark. - [ ] Borders and muted text use rgba over warm black, not gray hexes. - [ ] Signika 600 on every heading. Geist on body. Geist Mono on labels. - [ ] Every H2 has a mono purple eyebrow above it. - [ ] One word per heading emphasized with accent color, max. - [ ] Accent purple covers ≤ ~12% of the visible area. - [ ] On dark backgrounds, accent switched to `#A98DF6`, text to `#FAF4EE`. - [ ] Cards have no borders in default state — separation via background contrast. - [ ] Hover effects use shadow, not translateY. - [ ] Generous whitespace — content sits in ~1312px max width, sections breathe. - [ ] Copy reads plain, specific, energetic. No hype words.

Kopírovat--- name: aibility-social-graphics description: Use when creating Aibility-branded social media images, LinkedIn graphics, Instagram posts, carousels, share cards, thumbnails, ad creatives, or any social visual that must follow the Aibility brand. --- # Aibility Social Graphics Use this skill to create social media images that combine Aibility brand rules with platform-specific social graphics practice. It is a standalone merge of `aibility-brand` and `ai-social-graphics`: every output must feel like Aibility first, then be adapted to the platform. ## Defaults If the brief is incomplete, assume: - Platform: LinkedIn feed post. - Size: 1200x627 px, 1.91:1. - Language: Czech. Use Slovak only when requested. - Format: one strong idea, one image. - Visual direction: warm, professional, energetic B2B AI education. - Layout: headline/stat on the left or center, single supporting visual, logo in a corner. - Text handling: keep generated text very short. For longer Czech/Slovak text, generate the background/layout and add real typography afterwards. Ask only for missing information that changes the output materially: platform, post goal, exact message/text, required assets, and whether this is organic or paid. ## Workflow 1. Identify platform, placement, goal, audience, message, and required text. 2. Pick the correct size and safe zone from the platform table. 3. Choose one social format: insight/stat card, quote/proof card, event promo, carousel cover, assessment/result card, ad creative, thumbnail. 4. Apply Aibility brand constraints before adding platform styling. 5. Build the image prompt or layout spec. 6. Review against the checklist before returning. For multi-platform campaigns, create the primary format first, then adapt composition for other ratios. Do not stretch/crop one design mechanically when the safe zone changes. ## Generation Tool Use the best image tool available in the user's environment. If Glif is available, prefer Nano Banana Pro Text 2 Image (`cmi7ne4p40000kz04yup2nxgh`) for fast social visuals. For text-heavy quote cards, carousels, or ads, do not rely on raster image generation for long Czech/Slovak text. Generate the visual system/background first, then add final typography in a design tool or a text-reliable model. ## Brand Rules ### Brand Feel Aibility helps companies and their teams use AI in real work. Output should feel modern, trustworthy, human, and one step ahead. Avoid corporate stock aesthetics, AI hype, neon futurism, robots, circuit boards, glassmorphism, and generic "AI brain" visuals. ### Palette Use warm neutrals as the base and purple sparingly. | Role | Value | Use | | --- | --- | --- | | Cream background | `#FFFBF4` | Default social card background | | Raised surface | `#F7F5F2` | Secondary blocks/cards on cream | | White | `#FFFFFF` | Contrast sections, not dominant page feel | | Warm black | `#1B1B1B` | Primary text, dark backgrounds | | Purple accent | `#5938B7` | Key word, eyebrow, CTA, small highlight | | Light purple | `#A98DF6` | Accent on dark backgrounds | | Deep purple | `#201547` | Dark premium backgrounds | | Warm white | `#FAF4EE` | Text on dark backgrounds | Distribution: 85% warm neutrals, 12% purple accent, 3% supporting color. Never use pure black `#000000`, cool gray text/borders, dominant purple gradients, neon glows, or blue-gray SaaS palettes. Use `rgba(27,27,27,0.6-0.12)` for muted text and borders. ### Typography - Headings: Signika 600. - Body/UI: Geist 400/600. - Labels/eyebrows: Geist Mono, uppercase, letter-spaced. - One emphasized word per headline max, in purple on light or light purple on dark. - Logo assets: `4_Tools/aibility-design-system/logo/logo-black.svg` on light backgrounds, `4_Tools/aibility-design-system/logo/logo-white.svg` on dark backgrounds. For image-generation tools that cannot guarantee fonts, prompt for "rounded confident Signika-like headline typography and clean Geist-like body typography", then correct final text in a design tool when needed. ### Copy - Prefer Czech, direct address, short sentences. - Be concrete: numbers, outcomes, real work. - Good: "AI umíš používat. Ale víš, jak dobře?" - Good: "Měřitelný posun, ne další workshop." - Avoid: revolutionary, game-changing, powerful, cutting-edge, unleash, leverage, synergies, robust, seamless. - All Czech/Slovak text must follow the Czech Typography section below — non-breaking spaces are mandatory, not optional. ## Czech Typography Czech/Slovak text breaks badly without non-breaking spaces. Bad line breaks make a premium card look amateur instantly. Apply these whenever you place real typography (HTML, design tool, or post-generation text layer). In HTML use `&nbsp;`; in plain text use the actual non-breaking space character (U+00A0). ### Mandatory — single-letter prepositions/conjunctions `k, s, v, z, o, u, i, a` must never end a line. Always glue to the next word. - Wrong: `pracujeme s` ↵ `AI` → Right: `pracujeme` ↵ `s&nbsp;AI` - Wrong: `workshop o` ↵ `AI` → Right: `workshop` ↵ `o&nbsp;AI` ### Recommended — two-letter prepositions `ze, ve, ke, ku, se, od, do, na, po, za, ob, při, pro` should not dangle at line end, especially in headings and short cards. Glue them in any text under ~5 lines. Do these manually in markup — a naive regex would also hit these letter pairs inside normal words. ### Always glue these units | Case | Glue | | --- | --- | | Number + unit | `25&nbsp;kg`, `17.&nbsp;6.`, `2&nbsp;h` | | Date parts | `17.&nbsp;června&nbsp;2026` | | Title + name | `Ing.&nbsp;Novák`, `Martin&nbsp;Imrich` in headlines | | Abbreviation + word | `tj.&nbsp;něco`, `např.&nbsp;Claude` | | Percent (noun) | `21&nbsp;%` = "twenty-one percent" — WITH space | | Percent (adjective) | `100%` = "stoprocentní" — NO space | Phone numbers use normal spaces for grouping: `+420 123 456 789`. ### Orphans and widows — applies to headlines and bullets A single word alone on the last line of a headline or bullet looks broken. Fixes, in order of preference: 1. Reword shorter or cut a filler word — best, the card stays visually clean. 2. Break before a preposition (`&nbsp;` in markup). 3. Orphan guard (see snippet below) — safety net for what slips through. 4. Widen the text box. 5. Shrink the font — last resort only. On carousel slides, hand-tune every headline — never trust auto-wrap. ### Implementation note for HTML carousels/cards When generating HTML, insert `&nbsp;` manually at every two-letter and unit glue point, and run a small script on load to handle single-letter prepositions and orphans automatically. ```js (function fixCzechTypography() { // 1. Glue single-letter prepositions/conjunctions to the next word. const re = /(\s|^)([ksvzouiaKSVZOUIA])\s+/g; const walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT); const nodes = []; while (walk.nextNode()) nodes.push(walk.currentNode); for (const n of nodes) { if (n.parentElement.closest(".toolbar")) continue; // skip UI chrome n.nodeValue = n.nodeValue.replace(re, "$1$2\u00A0"); } // 2. Orphan guard: glue the last two words inside short text containers // so a single short word can't drop to its own line. // Adjust the selector list to the text blocks in your layout. document .querySelectorAll(".sc-text, .vs-item span:last-child, .body") .forEach((el) => { const last = el.lastChild; if (last && last.nodeType === 3) { last.nodeValue = last.nodeValue.replace(/\s+(\S+\s*)$/, "\u00A0$1"); } }); })(); ``` For headlines, additionally wrap the last 2–3 words in `<span style="white-space:nowrap">` so the final word can't drop alone. The single-letter regex is intentionally conservative — only single letters are unambiguous; two-letter prepositions must be glued by hand to avoid false positives inside words like `do`, `na`, `se`. ### Quick checklist - [ ] No single-letter preposition at any line end. - [ ] Two-letter prepositions glued in headings/short text. - [ ] Numbers, dates, units, titles glued. - [ ] Percent spacing correct for noun vs adjective. - [ ] No one-word orphan line in any headline or bullet. ## Platform Sizes | Platform | Placement | Ratio | Pixels | Safe Zone | | --- | --- | --- | --- | --- | | LinkedIn | Feed post | 1.91:1 | 1200x627 | Full frame | | LinkedIn | Square post | 1:1 | 1080x1080 | Full frame | | LinkedIn | Carousel slide | 1:1 | 1080x1080 | Keep key text centered | | Instagram | Feed portrait | 4:5 | 1080x1350 | Best default | | Instagram | Feed square | 1:1 | 1080x1080 | Full frame | | Instagram | Story/Reel cover | 9:16 | 1080x1920 | Avoid top 250 px and bottom 200 px | | X/Twitter | Feed image | 16:9 | 1200x675 | High contrast for dark mode | | Facebook | Feed post | 1.91:1 | 1200x630 | Full frame | | YouTube | Thumbnail | 16:9 | 1280x720 | Avoid bottom-right timestamp area | | TikTok | Cover | 9:16 | 1080x1920 | Avoid bottom 150 px | | Pinterest | Standard pin | 2:3 | 1000x1500 | Vertical, text can be stronger | ## Platform Guidance ### LinkedIn Default Aibility platform. Use clean B2B thought-leadership layouts: one insight, one stat, one quote, or one clear promise. Professional does not mean dull. Use cream backgrounds, warm black headlines, purple eyebrow, and a confident focal point. ### Instagram Use 4:5 for feed unless specified. More direct and visual than LinkedIn. Still brand-led: warm, human, clear, not meme-heavy. For Stories/Reels covers, keep important content in the middle third. ### X/Twitter Design for dark-mode feeds. Use stronger contrast, fewer words, and punchier composition. Keep Aibility warmth; do not become edgy for its own sake. ### YouTube Use a stronger thumbnail composition than standard brand cards: clear face/object, high contrast, readable short text, and empty right/bottom-right area for UI. Avoid fake shock faces unless the subject genuinely calls for it. ### Paid Ads Ad creatives need faster comprehension than organic posts. Make the promise visible in under two seconds. One audience pain, one outcome, one CTA or URL. ## Aibility Social Formats ### Insight / Stat Card Use for research, assessment results, campaign insights, or "one sharp thought" posts. Prompt structure: ```text Aibility-branded [platform placement] social media image, [size and ratio]. Warm cream background #FFFBF4, warm black #1B1B1B, sparse purple accent #5938B7. Clean B2B AI education aesthetic, modern but human, generous whitespace. Large Signika-like headline area with one emphasized purple word. Single clear data/stat focal point: [stat or insight]. Small Aibility logo in [corner], no robots, no neon, no stock handshake, no blue-gray SaaS palette. [Platform-specific safe-zone instruction]. ``` ### Quote / Proof Card Use for testimonials, client proof, or social proof. Verify permission before publishing client names or private quotes. ```text Aibility-branded testimonial graphic for [platform], [size and ratio]. Cream background, raised warm surface for quote, warm black text, subtle purple quote mark or eyebrow. Trustworthy, calm, premium B2B education feel. Quote space for: "[short quote]"; attribution area for [name/role or anonymized label]. Logo small and quiet. No stock portrait unless a real approved photo is provided. ``` ### Event / Webinar Promo ```text Aibility-branded event promo image for [platform], [size and ratio]. Warm professional composition, cream background with one deep-purple inset. Event title as main focal point: [title]. Date/time area clear but secondary: [date/time]. Human, energetic, trustworthy; generous whitespace; small logo. No busy agenda blocks, no generic conference stock image. ``` ### Carousel Cover ```text Aibility-branded carousel cover for [platform], [size and ratio]. One bold headline, one visual metaphor from real work with AI, warm cream base, purple accent only for one key word. Make slide 1 scroll-stopping but still premium. Leave consistent footer space for logo and optional slide number. ``` ### Assessment / Result Card Use for Superpowered/Aibility assessment outcomes and shareable identity cards. ```text Aibility-branded share card for an AI skills assessment result, [platform], [size and ratio]. Premium warm card layout, large score/archetype focal point: [score/archetype]. Cream background, warm black type, purple accent for score or category. Clean badge area, subtle supporting pattern, small logo and URL. Feels credible and share-worthy on LinkedIn, not like a game badge. ``` ### Ad Creative ```text Aibility-branded paid social ad creative for [platform], [size and ratio]. Audience: [audience]. Problem: [problem]. Outcome: [outcome]. Warm cream base, high-contrast warm black headline, small purple CTA accent. One clear focal point, no clutter, readable at phone size. CTA or URL area: [cta/url]. ``` ## Carousel Layout Variety A carousel where every slide uses the same composition reads as flat. Vary the layout type slide to slide — change the compositional axis, not just the background colour. Pick from: - Hook: oversized type, baseline-anchored. - Split: vertical rail (label + ghost number) beside the main statement. - Quote: large pull-quote with oversized quote mark and attribution row. - Numbered steps: header plus stacked cards. - VS / contrast: two columns, crossed-out vs checked. - CTA: centered, big date/number, pill button. Keep shared atoms consistent across all slides (logo, page number, eyebrow style, palette) so variety reads as one system, not six unrelated cards. ### Fixed slide dimensions Every slide must hold its exact pixel size regardless of content. In HTML, pin the slide box hard and force every inner layout wrapper to fill it: ```css .slide { width: 1080px; height: 1080px; min-width: 1080px; min-height: 1080px; max-width: 1080px; max-height: 1080px; overflow: hidden; position: relative; } .slide > .layout-wrapper { height: 100%; } ``` When exporting with html2canvas, also pass `width`, `height`, `windowWidth`, and `windowHeight` (all 1080) plus `scale: 2` so the PNG is exactly 2160x2160 no matter the browser window size. ## Style Exploration For a new campaign or uncertain visual direction, generate 3 options, not 5: 1. Clean Insight: cream, type-led, premium whitespace. 2. Warm Human: real photo or candid work moment, soft warmth, brand overlay. 3. Dark Premium: warm black/deep purple background, light purple accents, strong contrast. Pick the best route based on platform and goal, then standardize it across sizes. ## Prompt Add-ons Add only the relevant line: - LinkedIn: `professional thought-leadership graphic, credible B2B audience, clear at mobile feed size` - Instagram feed: `portrait 4:5 composition, thumb-stopping but polished, visual first, minimal text` - Story/Reel: `vertical 9:16, key content in middle third, avoid top and bottom UI zones` - X/Twitter: `high contrast for dark mode timeline, bold simple composition` - YouTube: `thumbnail clarity, prominent face/object if relevant, short text, avoid bottom-right timestamp area` - Carousel: `consistent system, footer/logo area, first slide has strongest hook` - Text-heavy: `generate clean background and layout space; final typography will be added after generation` ## Review Checklist - [ ] Correct platform size and safe zone. - [ ] Looks like Aibility, not generic AI content. - [ ] Cream/warm black/purple palette respected. - [ ] Purple is an accent, not the whole design. - [ ] Headline has one idea and one emphasized word max. - [ ] Text is readable at phone size. - [ ] Logo uses black on light or white on dark. - [ ] No robots, circuit boards, neon glow, glassmorphism, cool-gray SaaS look, or stock handshake. - [ ] Czech/Slovak text is short and typography-safe. - [ ] Czech typography applied: non-breaking spaces at all glue points, no orphan lines. - [ ] Carousel slides use varied layouts and hold a fixed size. - [ ] Client names, quotes, and screenshots are approved before publishing. ## Output Return: ```markdown ## Social Image **Platform:** [platform] **Placement:** [placement] **Size:** [pixels, ratio] **Concept:** [one sentence] **Prompt / Layout Spec:** [final prompt or spec] **Checks:** brand, safe zone, readability, logo, approval risks. ```

Kopírovat--- name: aibility-voice description: Apply the Aibility tone of voice to any text written for a human audience — LinkedIn posts, emails, the website, presentations, proposals, job ads, internal announcements, coaching output, onboarding. Use this whenever a user writes, rewrites or reviews copy that goes out under the Aibility name. The core is universal voice mechanics (short sentences, no hype, direct address, lead with the reader's problem); the methodology section at the end handles the extra case where copy mentions the Superpowered Professional™ framework. Trigger on "write this in our voice", "rewrite for clients", "draft a LinkedIn post", "make this human", "check the tone", or any Aibility-facing copy. --- # Aibility Voice Skill Use this skill any time you write or edit text that goes out under the Aibility name and a real person will read it — a client, a prospect, a LinkedIn follower, a job candidate, a colleague. This is a **tone of voice** definition, not a brand style guide. It governs words, not colors. For visual design (palette, typography, layout) use the `aibility-brand` skill instead — the two are meant to be used together. Most of this skill is universal: it applies to a LinkedIn post the same way it applies to a sales email. The last section ("Writing about the methodology") is the one specialized case — only relevant when the copy mentions the Superpowered Professional™ framework. ## The one principle **Talk like a person, not like a company.** The test for every sentence: would you say it this way to a friend over coffee? If not, rewrite it. Concretely that means: show what someone DOES, not where they fit in a category. Lead with the reader's problem, not your product. Say the plain thing, not the impressive thing. ## Voice mechanics These apply to everything — posts, emails, web, decks, internal notes. - **Write in Czech first** (Slovak for SK audiences). English only when the audience genuinely demands it. - **Short sentences. One idea per sentence.** If a sentence has two "and"s, it's probably two sentences. - **Direct address.** "Zjisti, co tvůj tým s AI umí." Not the passive corporate "Bude umožněno zjistit…" - **Lead with the reader's problem,** not the product. Open on what they're stuck on, then show the way out. - **Concrete over abstract. Numbers over adjectives.** "50+ firem" beats "řada firem." "Za 6 týdnů" beats "rychle." - **Anti-corporate.** No buzzwords, no filler, no hedging. Cut "v rámci," "z pohledu," "je důležité zmínit." - **No emoji** in client-facing copy. (LinkedIn included — the writing carries it, not the icons.) - **One claim, one sentence.** Don't stack three benefits into one breathless line. - **Banned words:** revolutionary, game-changing, powerful, cutting-edge, unleash, leverage (as a verb), synergies, robust, seamless — and their Czech hype equivalents (revoluční, přelomový, naplno využít potenciál, posunout na novou úroveň). ### Yes / no - Yes: "AI umíš používat. Ale víš, jak dobře?" - No: "Unlock the revolutionary power of AI for your enterprise." - Yes: "Měřitelný posun, ne další workshop." - No: "Cutting-edge AI solutions that drive synergies across your organization." - Yes: "Tvůj tým za 6 týdnů: +12 bodů v SP Score™." - No: "Empower your team with industry-leading AI capabilities." ## By channel The voice is one voice everywhere. Format and length change. | Channel | What changes | |---|---| | LinkedIn post | Open with a concrete hook or a real problem — no warm-up sentence. Short paragraphs, lots of line breaks. One idea per post. End with a thought, not a "What do you think? 👇" prompt. | | Email | Subject line says the actual thing, not "Důležitá novinka." Get to the point in sentence one. Sign like a person. | | Website / landing page | Headline leads with the reader's problem. One key word per heading carries the weight. Body stays plain. | | Presentation (client) | One idea per slide. Spoken-language sentences. Human language only — no framework jargon. | | Presentation (internal) | Same, but framework names allowed in brackets where the team needs precision. | | Proposal / job ad | Direct, specific, honest. Say what the work actually is. No inflated mission language. | | Coaching output | Human language only — no method IDs, no profile tags. Lead with the action the person takes. | ## Examples: wrong vs. right ### Example 1 — LinkedIn post opener Wrong: > "V dnešní dynamické době, kdy umělá inteligence mění svět práce, je důležité si uvědomit, že firmy musí investovat do rozvoje svých lidí." Right: > "Většina firem koupí týmu ChatGPT licence a čeká, že se něco změní. Nezmění. Nástroj není dovednost." ### Example 2 — Email subject line Wrong: > "Důležitá informace ohledně vašeho AI rozvoje a dalších kroků" Right: > "Výsledky vašeho týmu — a 3 věci, co s tím teď udělat" ### Example 3 — Web headline Wrong: > "Komplexní řešení pro transformaci vaší organizace pomocí umělé inteligence" Right: > "Zjisti, co tvůj tým s AI doopravdy umí. A kde mu to nejvíc utíká." ## Writing about the methodology This section is the one specialized case. It only applies when the copy mentions the Superpowered Professional™ framework — assessment, levels, profiles, SP Score™, Growth Edge, certifications, development areas. If the text you're writing doesn't touch any of that (a normal LinkedIn post, a job ad), skip this section entirely. Framework language (levels, profiles, scores, method IDs) lives in technical documents and inside the engine. What goes out to people is human language. ### The rule **Show what a person DOES — not where they fit in a table.** Nobody wakes up and says "today I'll develop my Creation profile." They say: "I need to write a proposal and don't want to burn the afternoon on it." ### Where each language belongs | Context | Language | |---|---| | Technical docs (coaching-bridge.md, oblasti-katalog.md) | Framework language OK — it's the spec for the AI engine | | Client presentations, website, LinkedIn | Human language only | | Internal presentations, onboarding | Human language + framework names in brackets where needed | | Coaching output (what the user sees) | Human language only — no method IDs, no profile tags | ### Translation: Superpower Profiles | Framework (internal) | Human (external) | Shortest form | |---|---|---| | Vision profil | Nachází nové příležitosti a směry, vidí co by šlo dělat jinak | "nachází nové příležitosti" | | Intelligence profil | Rád/a analyzuje, přemýšlí a rozhoduje s AI | "rád/a přemýšlí s AI" | | Creation profil | Přirozeně tvoří — texty, vizuály, prototypy | "rád/a tvoří věci" | | Leverage profil | Staví systémy, procesy a opakovatelné postupy | "rád/a staví systémy" | - In a presentation, NEVER say "člověk s Creation profilem." Say "člověk, který rád tvoří." - A profile is a style ("přirozeně tvoříš"), not an identity ("jsi Creation"). - If you must name a profile, explain it in brackets: "Vision (nachází nové příležitosti)." ### Translation: Levels | Framework | Human | In one sentence | |---|---|---| | AI Explorer | Začíná s AI | "Zkouší, kde mu AI pomůže." | | L1 Operator | Pravidelně používá | "AI je součást jeho práce." | | L2 Builder | Staví s AI | "Staví si vlastní nástroje a workflow." | | L3 Transformer | Mění s AI způsob práce | "Změnil/a svůj pracovní systém — klíčová práce funguje zásadně jinak než dřív." | - In client communication don't say "jsi L1 Operator." Say "AI už pravidelně používáš — teď jde o to najít, kde ti ušetří nejvíc." - Levels are phases of a journey, not grades. - For L3 don't automatically say "mění celý tým." L3 is about impact on the agenda — even an individual contributor who fundamentally rebuilt how they do their core work is a Transformer. Scope of agenda change decides, not headcount. ### Translation: Growth Edge | Framework | Human | |---|---| | Growth Edge na Leverage | Další krok: udělat z toho opakovatelný postup | | Growth Edge na Creation | Další krok: začít s AI opravdu tvořit výstupy | | Growth Edge na Vision | Další krok: najít nové příležitosti a směry, kam zaměřit pozornost | | Growth Edge na Intelligence | Další krok: nechat AI pomoct s analýzou a rozhodováním | - Don't say "tvůj Growth Edge je Leverage." Say "tvůj další krok je udělat z toho systém, který funguje i bez tebe." - Growth Edge = "kam růst dál" — a direction, never a weakness. ### Translation: SP Score™ and Certifications | Framework | Human | |---|---| | SP Score™ | Orientační skóre AI vyspělosti a baseline pro další měření | | Certified L1 Operator | AI už pravidelně používá ve své práci | | Certified L2 Builder | Staví si vlastní AI postupy, asistenty nebo workflow | | Certified L3 Transformer | Změnil/a způsob, jak se s AI dělá klíčová práce | - Don't say "SP Score™ je výsledek." Say "SP Score™ je číselná baseline vedle praktického profilu." - Certification attaches to a level, not an archetype. - A number can headline a card, but the explanation always says what the person really does and what their next step is. - The score has the most value on a repeat measurement — it shows movement even when the level hasn't changed yet. ### Translation: Development areas | Framework | Human — what the person is solving | |---|---| | Nástroje, modely a bezpečné používání | "Vybrat si správné nástroje a vědět, co tam můžu dát" | | AI-first práce | "Naučit se ptát: může mi s tím pomoct AI? A pracovat s AI plynule" | | Workflow a projekty | "Zrychlit projekty — rozložit na kroky, kde AI pomůže" | | Druhý mozek a kontext | "Dát AI lepší podklady, aby dávala lepší výstupy" | | Tvorba a building | "Tvořit texty, prezentace, weby a prototypy s AI" | | Data a rozhodování | "Od dat k rozhodnutím a akcím" | | Adopce (specializace) | "Přenést AI do týmu, nastavit pravidla a měnit způsob práce" | ### Translation: Adoption terms | Framework | Human | |---|---| | AI fluency bar | "Jak poznat, jestli člověk AI opravdu používá v práci" | | AI Trend Radar | "Mapa trendů, které se týkají právě mě nebo našeho týmu" | | Agent-ready | "Dá se tenhle systém použít přes AI, nebo je zavřený jen pro lidi v obrazovce?" | | Company brain | "Firemní paměť, ve které AI najde rozhodnutí, procesy a kontext" | | Queryable organizace | "Firma, ve které se na věci nemusím ptát pěti lidí, ale umím se zeptat AI nad kontextem" | | Tool access jako strop adopce | "Když lidem dáme jen chatbot, nemůžeme čekat, že budou stavět systémy" | | High agency | "Nečeká na povolení, zkusí bezpečnou první verzi a učí se z ní" | | Double major | "Rozumí svému oboru a zároveň umí využít AI k realizaci" | ### Methods - NEVER say "metoda content.voice_style." Say "najít a zachytit svůj styl psaní." - A method = "a concrete skill you'll learn." Not "an item in a catalog." - When showing an example, lead with the ACTION: "Vezmete 5 nejlepších e-mailů a necháte AI najít pravidla vašeho stylu." ### Writing a recommendation A good recommendation: - is **one step ahead, not three** — don't hand an Explorer a complex automation; - **solves concrete work** — not "rozvíjejte oblast tvorby" but "jak si připravit první verzi nabídky / e-mailu / analýzy"; - is **AI-first** — if AI can do the analysis or summary, the person shouldn't do it by hand; - has **one main task** — one good step beats five equal ones. It makes the person say: "Aha, this I'll try next week." ### Calibrate by evidence strength Not every result rests on the same evidence. Match the language to it: - Strong evidence: "Vaše nejsilnější oblast je…" - Medium evidence: "Zatím to vypadá, že…" - Weak evidence: "První signály ukazují na…" When data is thin, don't fake certainty. ### Methodology examples: wrong vs. right Personalizing a program — wrong: > "HR člověk s Creation profilem v týdnu Obsah řeší náborové e-maily přes tvorbu." Right: > "Stejné téma, jiný úkol. HR-istka, která ráda tvoří → nechat AI navrhnout e-mail podle jejích nejlepších příkladů." Growth Edge — wrong: > "Tvůj Growth Edge je Leverage, proto ti doporučujeme metodu z oblasti Akcelerace." Right: > "Umíš s AI tvořit skvělé výstupy. Další krok: udělat z toho postup, který funguje i příště — ať nezačínáš pokaždé od nuly." Coaching action — wrong: > "Metoda: content.voice_style. Superpower framing: Creation approach." Right: > "Vezmi 5 svých nejlepších e-mailů. Nech AI najít pravidla tvého stylu. Vytvoř si asistenta, který píše první verze za tebe." ## Pre-publish checklist Before shipping any Aibility-facing copy, scan: - [ ] Would I say this to a friend over coffee? - [ ] Short sentences — one idea each? - [ ] Direct address, not passive corporate? - [ ] Does it open on the reader's problem, not a warm-up or the product? - [ ] Concrete — numbers, not adjectives? - [ ] Any hype words or emoji that shouldn't be there? - [ ] **If it mentions the methodology:** does it lead with an ACTION, not a category? Any profile/level name without a bracketed explanation? More than one framework term per sentence? SP™ written with the trademark, never bare "SP"? ## If in doubt - Pick the **plain** word over the impressive one. - Pick the **reader's problem** over the product feature. - Pick **one concrete thing** over a list. - Pick **honest uncertainty** over fake confidence. - Describe it the way you'd describe it to a friend over coffee.