[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71K87HPPDKX1PCJSJS8ZC6G":3,"skill-same:01M71K87HPPDKX1PCJSJS8ZC6G":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":44,"repositoryHtmlUrl":45,"repositoryHomepageUrl":46,"ownerHtmlUrl":47,"ownerBlogUrl":48,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M71K87HPPDKX1PCJSJS8ZC6G","branding-generator",null,"Create brand identity kits — logos, color palettes, typography, naming, and style guides.","clawdsolana\u002FOpenClawd","clawdsolana","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F279036008?v=4","01M71JTVF9FNGKE2SVJRPTQM31","OpenClawd","01M71JTVGCKWBSS8ZYC1HYWVA5",2,"MIT","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fsecondary_skills\u002Fbranding-generator\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35],"generator","branding","branding generator","color","brand","guides","brand identity","create","style","naming","typography","identity","2026-11-10 10:12:30",false,"---\nname: branding-generator\ndescription: Create brand identity kits — logos, color palettes, typography, naming, and style guides.\n---\n\n# Branding Generator\n\n## OpenClawd Operator Adaptation\n\nRun this skill as part of the OpenClawd operator deck. Preserve the skill-specific workflow below, but frame outputs for Solana-native agents when relevant: prefer OpenClawd language, note whether the work can support autonomous agent operations, and keep financial, legal, tax, hiring, medical, or other regulated outputs informational unless the skill already requires a stricter disclaimer. Use the Llobster Legend persona only as light operator framing; do not let branding override accuracy, safety, or the user's stated domain.\n\n\nCreate brand identity kits. Interview the user, research the space, then deliver 3 distinct brand directions with visual assets.\n\n## When to Use\n\n- \"I need branding \u002F a brand identity \u002F brand kit\"\n- \"I need a logo\" \u002F \"design me a logo\"\n\n- \"What colors should I use?\" \u002F \"help me pick colors\"\n- \"What fonts should I use?\" \u002F \"help me choose typography\"\n\n- \"I need a style guide\" \u002F \"brand guidelines\" \u002F \"brand book\" \u002F \"brand assets\"\n- \"I need a visual identity\" \u002F \"design system\"\n\n- \"Help me name my company \u002F app \u002F product\"\n- \"I'm starting a new business\u002Fproduct\" (early-stage founders needing naming + identity)\n\n- \"Make my app look more professional\" \u002F \"my app looks generic\" (signals a visual identity gap)\n- Color palettes, typography, visual identity from scratch\n\n- Rebranding or brand refresh\n- Brand naming\n\n## When NOT to Use\n\n- Full UI design (use design skill) · Slide decks (use slides skill)\n\n## Step 1: Brand Interview\n\nConduct this like a real branding agency discovery session. Ask these questions **conversationally, not as a wall of text** — adapt based on answers, ask follow-ups, go deeper where it matters. Group into 2-3 messages max.\n\n### Round 1 — The Business\n\n- What does your company\u002Fproduct do, in one sentence?\n- Who is your target audience? (Be specific — age, role, lifestyle, not just \"everyone\")\n\n- What problem do you solve that nobody else does?\n- What's your pricing position? (Budget \u002F mid-market \u002F premium \u002F luxury)\n\n- **Do you already have a name, or do you need naming help?**\n\n### Round 2 — The Feeling\n\n- Name 3 brands you admire (any industry) and what you admire about them\n- If your brand were a person, how would they dress? How would they speak?\n\n- What emotions should someone feel when they see your brand for the first time?\n- What's the one word you'd want people to associate with you?\n\n- Any colors, styles, or aesthetics you absolutely hate?\n\n### Round 3 — Practical Constraints\n\n- Do you have any existing brand assets (logo, colors, fonts) you want to keep?\n- Where will this brand primarily live? (Web app, mobile app, physical product, social media, print)\n\n- Any industry conventions you need to follow — or deliberately break?\n- Competitor URLs or screenshots? (If provided, extract their palettes with colorthief for contrast analysis)\n\n### Round 4 — Brand Touchpoints\n\n- What is the **single most important touchpoint** for your brand? (e.g., mobile app icon, website hero, packaging, storefront, email newsletter, social media profile)\n- List 3-5 specific contexts where people will encounter your brand (e.g., \"app store listing\", \"trade show banner\", \"Instagram stories\", \"invoice PDF\", \"product unboxing\")\n\n- Which of these touchpoints is the first impression for most users?\n\nPrioritize the most important touchpoints when building mockups in Step 5. The \"Brand in Action\" board should focus on the touchpoints the user actually cares about, not generic website pages.\n\n**Do not proceed until you have solid answers.** Push back if answers are vague — \"everyone\" is not a target audience, \"clean and modern\" is not a personality.\n\n## Step 2: Research\n\nAfter the interview, do targeted research before generating directions:\n\n- **Competitor visual audit** — Search for 3-5 competitors' visual identities. Extract their color palettes, typography, and logo styles. Present a side-by-side summary of what's common in the space so the new brand can visually stand apart — not just conceptually, but with measurable color distance.\n- **Mood\u002Freference gathering** — Search for visual references matching the interview answers (e.g., \"minimalist premium SaaS branding\", \"bold playful fintech design\").\n\n- **Industry conventions** — What do users in this space expect? Where is there room to stand out?\n\n## Step 2.5: Brand Naming (if needed)\n\nIf the user doesn't have a name, generate name candidates as part of each brand direction. For each direction, propose 2-3 name options.\n\n### Naming criteria\n\n- **Memorable** — short (ideally 1-2 syllables, max 3), easy to say and spell\n- **Distinctive** — doesn't sound like existing competitors in the space\n\n- **Meaningful** — connects to the brand concept, even if abstractly\n- **Domain-friendly** — check `.com`availability via`webSearch(\"site:instantdomainsearch.com [name]\")` or similar\n\n- **Social-friendly** — the name should work as a handle (@name) on major platforms\n\n#### Name generation approaches\n\n1. **Portmanteau** — blend two relevant words (e.g., Pinterest = Pin + Interest)\n2. **Action verb** — conveys what the product does (e.g., Grab, Snap, Dash)\n\n3. **Abstract\u002Finvented** — coined word that sounds right (e.g., Spotify, Figma)\n4. **Real word, new context** — existing word reframed (e.g., Slack, Notion, Linear)\n\n5. **Foreign\u002Fmultilingual** — borrow from another language for freshness\n\nPresent names alongside each direction so the name and visual identity feel cohesive.\n\n## Step 3: Generate 3 Brand Directions\n\n**Always present exactly 3 distinct directions.** Each should feel like a different creative team's pitch — not slight variations.\n\nFor each direction, provide:\n\n1. **Brand name**(if naming)**& concept narrative** — 1-2 sentence strategic thinking behind this direction\n2. **Color palette** — primary, secondary, accent with hex + OKLCH values. Include neutral scale (50-900) tinted toward the primary hue. Verify WCAG AA contrast for all text\u002Fbackground pairs.\n\n3. **Typography** — display + body font pairing from Google Fonts with rationale\n4. **Voice** — 3-5 adjectives defining how the brand speaks, plus copy examples across multiple contexts:\n\n- An example **headline** (marketing\u002Fhero)\n- An example **onboarding welcome message** (first-time user greeting)\n\n- An example **error message** (something went wrong)\n- An example **empty state message** (no data yet)\n\n- An example **call-to-action** (button or prompt)\n\nThese examples make the voice tangible and testable — abstract adjectives alone are not enough.\n\n1. **Visual mood** — overall aesthetic description (photography style, illustration approach, texture usage). Reference 2-3 real-world brands that share elements.\n2. **Exportable tokens** — provide CSS custom properties and Tailwind config alongside each direction (not just at the end) so developers can start experimenting immediately:\n\n```css\n\n\u002F* Direction A tokens *\u002F\n\n--primary: \\#1A1A2E;\n\n--primary-oklch: oklch(18% 0.02 270);\n\n--accent: \\#D4A855;\n\n--background: \\#F5F0EB;\n\n```\n\n```js\n\n\u002F\u002F Tailwind extend\n\ncolors: {\n\nprimary: { 50: '...', 100: '...', \u002F* ... *\u002F 900: '...' },\n\naccent: { 50: '...', \u002F* ... *\u002F 900: '...' }\n\n}\n\n```\n\n## Step 4: User Picks a Direction\n\nPresent all 3 and ask the user to pick one or mix elements. Use structured prompts to make mixing easier:\n\n- \"Which **name** resonates most?\"\n- \"Which **color palette** feels right for your brand?\"\n\n- \"Which **voice\u002Ftone** matches how you want to speak to users?\"\n- \"Which **visual mood** would you want your product to feel like?\"\n\nThe user can pick Direction A's name with Direction B's colors and Direction C's tone — facilitate that mixing explicitly. Don't proceed to assets until they approve a direction (or hybrid).\n\n## Step 4.5: Refine the Chosen Direction\n\nBefore building the full brand kit, offer a focused refinement round on the selected (or hybrid) direction. Present the consolidated direction summary and ask:\n\n- \"Would you like the palette **warmer or cooler**? Lighter or darker overall?\"\n- \"Should the typography feel **heavier\u002Fbolder**or**lighter\u002Fmore refined**?\"\n\n- \"Is the voice **too formal, too casual, or just right**?\"\n- \"Any specific element from the other directions you'd still like to pull in?\"\n\nApply requested tweaks and present the updated direction for final approval. This avoids costly rework after the full kit is built. Limit to **2 refinement rounds max** — if the user is still unsure after two rounds, recommend proceeding and iterating on the finished boards where changes are easier to visualize.\n\n## Step 5: Deliver the Brand Kit\n\nOnce a direction is approved, **delegate to the design subagent** (`subagent`with`specialization=\"DESIGN\"`) to build polished visual boards. Embed them as iframes on the canvas.\n\n### Deliverables\n\n**Board 1 — Color & Typography:** Color swatches with hex + OKLCH values, shade ramps (50-900), typography specimen at heading\u002Fbody\u002Fcaption sizes with Google Fonts loaded, contrast audit table, dark mode variant.\n\n**Board 2 — Logo Concepts:**3-4 logo variations (wordmark, icon+text, icon-only, monogram) built as**inline SVG**. Show on light and dark backgrounds at multiple sizes (large display + 32px favicon size). Include SVG source for export.\n\nLogo quality checklist:\n\n- Every logo must be **recognizable at 32px** (favicon\u002Fapp icon test)\n- Include a **single-color version** for monochrome contexts (printing, embossing, watermarks)\n\n- Test on **both light and dark backgrounds** — the logo must work on both without modification or with a simple color inversion\n- Use **geometric simplicity** — avoid fine details that collapse at small sizes\n\n- Provide the icon in a **rounded-square container** variant for app store \u002F social profile use\n\n**Board 3 — Brand in Action:**Realistic mockups showing the brand applied to the**user's actual product type**, not generic pages. If the user is building a marketplace, show a listing card, search results, and app header. If they're building a SaaS dashboard, show the dashboard. Match the mockups to what they're actually building. This board should feel like seeing their real product with the new brand applied.\n\n**Board 4 — Brand Guidelines:** Color usage rules, typography hierarchy, voice & tone guidelines, 1-2 sample applications (business card, social post).\n\n### Accessibility Checklist\n\nEvery brand kit must address accessibility beyond just color contrast:\n\n- **Minimum font sizes** — body text no smaller than 16px on web, 14px on mobile. Captions no smaller than 12px.\n- **Touch target sizing** — interactive elements must be at least 44x44px (iOS) \u002F 48x48dp (Android). Specify this in the guidelines so designers don't shrink branded buttons below usable sizes.\n\n- **Motion sensitivity** — if the brand identity includes animations or transitions, provide a `prefers-reduced-motion` alternative. Note which brand animations are decorative (can be removed) vs. functional (must be preserved in reduced form).\n- **Font legibility** — verify that the chosen display and body fonts remain legible at the specified minimum sizes. Decorative display fonts must not be used for body copy or UI labels.\n\n- **Icon clarity** — any branded iconography must be distinguishable at 24px and not rely solely on color to convey meaning.\n\nInclude these standards in Board 4 (Brand Guidelines) as a dedicated \"Accessibility Standards\" section.\n\n### Export & Deliverable Formats\n\nBefore building the final kit, ask the user which export formats they need. Present as a checklist:\n\n- **Design tokens** — CSS custom properties, Tailwind config, SCSS variables (included by default)\n- **Asset package** — ZIP containing logo SVGs, PNG exports at 1x\u002F2x\u002F3x, favicon ICO\u002FPNG, and Open Graph image (1200x630)\n\n- **Social media templates** — dimensions and safe zones for Instagram post (1080x1080), Instagram story (1080x1920), X\u002FTwitter header (1500x500), LinkedIn banner (1584x396)\n- **Print-ready files** — CMYK color values, bleed specifications, business card layout (3.5x2in)\n\n- **Brand book PDF** — a single-document summary of all guidelines, suitable for sharing with external vendors or team members\n\nGenerate the formats the user selects. At minimum, always deliver design tokens and the asset package.\n\n## Step 5.5: Domain & Social Handle Check\n\nAfter the user approves a direction and name, verify availability:\n\n- **Domain**: Search for `.com`,`.co`,`.app`,`.io` availability\n- **Social handles**: Check `@name` availability on major platforms via web search (Instagram, TikTok, X\u002FTwitter)\n\n- **Trademark conflicts**: Quick web search for existing trademarks in the same industry\n\nPresent findings clearly:\n\n```text\n\nName: SWAPD\n\n- swapd.com — ❌ taken\n- swapd.co — ✅ available\n\n- swapd.app — ✅ available\n- @swapd (Instagram) — ❌ taken\n\n- @getswapd (Instagram) — ✅ available\n- @swapd (TikTok) — ✅ available\n\n```\n\nIf the primary domain or key handles are taken, suggest variations (get-, try-, use- prefixes, or alternate TLDs) before the user commits.\n\n## Color Science\n\n- Work in OKLCH color space (perceptually uniform — same L = same perceived lightness across hues)\n- Use color harmony from OKLCH hue space: complementary (H+180°), analogous (H±30°), triadic (H±120°), split-comp (H+150°\u002FH+210°)\n\n- Generate shade ramps by stepping L linearly in OKLCH — avoids the muddy-middle problem of RGB interpolation\n- WCAG 2.2 AA: 4.5:1 contrast for normal text, 3:1 for large text and UI components\n\n- Use chroma-js or apcach for programmatic contrast verification\n- Dark mode: backgrounds at `oklch(15-20% 0.01 H)` not pure black. Desaturate brand colors slightly (reduce C by ~0.02).\n\n## Limitations\n\n- Logo concepts are starting points — final production logos should be refined with a dedicated designer\n- Fonts limited to Google Fonts \u002F open-source unless user provides custom fonts\n\n- Domain\u002Fhandle availability checks are point-in-time — availability can change; register quickly once decided\n- Trademark search is a surface-level web check, not a legal opinion — recommend a proper trademark search for high-stakes brands\n","# Branding Generator\n\n## OpenClawd Operator Adaptation\n\nRun this skill as part of the OpenClawd operator deck. Preserve the skill-specific workflow below, but frame outputs for Solana-native agents when relevant: prefer OpenClawd language, note whether the work can support autonomous agent operations, and keep financial, legal, tax, hiring, medical, or other regulated outputs informational unless the skill already requires a stricter disclaimer. Use the Llobster Legend persona only as light operator framing; do not let branding override accuracy, safety, or the user's stated domain.\n\n\nCreate brand identity kits. Interview the user, research the space, then deliver 3 distinct brand directions with visual assets.\n\n## When to Use\n\n- \"I need branding \u002F a brand identity \u002F brand kit\"\n- \"I need a logo\" \u002F \"design me a logo\"\n\n- \"What colors should I use?\" \u002F \"help me pick colors\"\n- \"What fonts should I use?\" \u002F \"help me choose typography\"\n\n- \"I need a style guide\" \u002F \"brand guidelines\" \u002F \"brand book\" \u002F \"brand assets\"\n- \"I need a visual identity\" \u002F \"design system\"\n\n- \"Help me name my company \u002F app \u002F product\"\n- \"I'm starting a new business\u002Fproduct\" (early-stage founders needing naming + identity)\n\n- \"Make my app look more professional\" \u002F \"my app looks generic\" (signals a visual identity gap)\n- Color palettes, typography, visual identity from scratch\n\n- Rebranding or brand refresh\n- Brand naming\n\n## When NOT to Use\n\n- Full UI design (use design skill) · Slide decks (use slides skill)\n\n## Step 1: Brand Interview\n\nConduct this like a real branding agency discovery session. Ask these questions **conversationally, not as a wall of text** — adapt based on answers, ask follow-ups, go deeper where it matters. Group into 2-3 messages max.\n\n### Round 1 — The Business\n\n- What does your company\u002Fproduct do, in one sentence?\n- Who is your target audience? (Be specific — age, role, lifestyle, not just \"everyone\")\n\n- What problem do you solve that nobody else does?\n- What's your pricing position? (Budget \u002F mid-market \u002F premium \u002F luxury)\n\n- **Do you already have a name, or do you need naming help?**\n\n### Round 2 — The Feeling\n\n- Name 3 brands you admire (any industry) and what you admire about them\n- If your brand were a person, how would they dress? How would they speak?\n\n- What emotions should someone feel when they see your brand for the first time?\n- What's the one word you'd want people to associate with you?\n\n- Any colors, styles, or aesthetics you absolutely hate?\n\n### Round 3 — Practical Constraints\n\n- Do you have any existing brand assets (logo, colors, fonts) you want to keep?\n- Where will this brand primarily live? (Web app, mobile app, physical product, social media, print)\n\n- Any industry conventions you need to follow — or deliberately break?\n- Competitor URLs or screenshots? (If provided, extract their palettes with colorthief for contrast analysis)\n\n### Round 4 — Brand Touchpoints\n\n- What is the **single most important touchpoint** for your brand? (e.g., mobile app icon, website hero, packaging, storefront, email newsletter, social media profile)\n- List 3-5 specific contexts where people will encounter your brand (e.g., \"app store listing\", \"trade show banner\", \"Instagram stories\", \"invoice PDF\", \"product unboxing\")\n\n- Which of these touchpoints is the first impression for most users?\n\nPrioritize the most important touchpoints when building mockups in Step 5. The \"Brand in Action\" board should focus on the touchpoints the user actually cares about, not generic website pages.\n\n**Do not proceed until you have solid answers.** Push back if answers are vague — \"everyone\" is not a target audience, \"clean and modern\" is not a personality.\n\n## Step 2: Research\n\nAfter the interview, do targeted research before generating directions:\n\n- **Competitor visual audit** — Search for 3-5 competitors' visual identities. Extract their color palettes, typography, and logo styles. Present a side-by-side summary of what's common in the space so the new brand can visually stand apart — not just conceptually, but with measurable color distance.\n- **Mood\u002Freference gathering** — Search for visual references matching the interview answers (e.g., \"minimalist premium SaaS branding\", \"bold playful fintech design\").\n\n- **Industry conventions** — What do users in this space expect? Where is there room to stand out?\n\n## Step 2.5: Brand Naming (if needed)\n\nIf the user doesn't have a name, generate name candidates as part of each brand direction. For each direction, propose 2-3 name options.\n\n### Naming criteria\n\n- **Memorable** — short (ideally 1-2 syllables, max 3), easy to say and spell\n- **Distinctive** — doesn't sound like existing competitors in the space\n\n- **Meaningful** — connects to the brand concept, even if abstractly\n- **Domain-friendly** — check `.com`availability via`webSearch(\"site:instantdomainsearch.com [name]\")` or similar\n\n- **Social-friendly** — the name should work as a handle (@name) on major platforms\n\n#### Name generation approaches\n\n1. **Portmanteau** — blend two relevant words (e.g., Pinterest = Pin + Interest)\n2. **Action verb** — conveys what the product does (e.g., Grab, Snap, Dash)\n\n3. **Abstract\u002Finvented** — coined word that sounds right (e.g., Spotify, Figma)\n4. **Real word, new context** — existing word reframed (e.g., Slack, Notion, Linear)\n\n5. **Foreign\u002Fmultilingual** — borrow from another language for freshness\n\nPresent names alongside each direction so the name and visual identity feel cohesive.\n\n## Step 3: Generate 3 Brand Directions\n\n**Always present exactly 3 distinct directions.** Each should feel like a different creative team's pitch — not slight variations.\n\nFor each direction, provide:\n\n1. **Brand name**(if naming)**& concept narrative** — 1-2 sentence strategic thinking behind this direction\n2. **Color palette** — primary, secondary, accent with hex + OKLCH values. Include neutral scale (50-900) tinted toward the primary hue. Verify WCAG AA contrast for all text\u002Fbackground pairs.\n\n3. **Typography** — display + body font pairing from Google Fonts with rationale\n4. **Voice** — 3-5 adjectives defining how the brand speaks, plus copy examples across multiple contexts:\n\n- An example **headline** (marketing\u002Fhero)\n- An example **onboarding welcome message** (first-time user greeting)\n\n- An example **error message** (something went wrong)\n- An example **empty state message** (no data yet)\n\n- An example **call-to-action** (button or prompt)\n\nThese examples make the voice tangible and testable — abstract adjectives alone are not enough.\n\n1. **Visual mood** — overall aesthetic description (photography style, illustration approach, texture usage). Reference 2-3 real-world brands that share elements.\n2. **Exportable tokens** — provide CSS custom properties and Tailwind config alongside each direction (not just at the end) so developers can start experimenting immediately:\n\n```css\n\n\u002F* Direction A tokens *\u002F\n\n--primary: \\#1A1A2E;\n\n--primary-oklch: oklch(18% 0.02 270);\n\n--accent: \\#D4A855;\n\n--background: \\#F5F0EB;\n\n```\n\n```js\n\n\u002F\u002F Tailwind extend\n\ncolors: {\n\nprimary: { 50: '...', 100: '...', \u002F* ... *\u002F 900: '...' },\n\naccent: { 50: '...', \u002F* ... *\u002F 900: '...' }\n\n}\n\n```\n\n## Step 4: User Picks a Direction\n\nPresent all 3 and ask the user to pick one or mix elements. Use structured prompts to make mixing easier:\n\n- \"Which **name** resonates most?\"\n- \"Which **color palette** feels right for your brand?\"\n\n- \"Which **voice\u002Ftone** matches how you want to speak to users?\"\n- \"Which **visual mood** would you want your product to feel like?\"\n\nThe user can pick Direction A's name with Direction B's colors and Direction C's tone — facilitate that mixing explicitly. Don't proceed to assets until they approve a direction (or hybrid).\n\n## Step 4.5: Refine the Chosen Direction\n\nBefore building the full brand kit, offer a focused refinement round on the selected (or hybrid) direction. Present the consolidated direction summary and ask:\n\n- \"Would you like the palette **warmer or cooler**? Lighter or darker overall?\"\n- \"Should the typography feel **heavier\u002Fbolder**or**lighter\u002Fmore refined**?\"\n\n- \"Is the voice **too formal, too casual, or just right**?\"\n- \"Any specific element from the other directions you'd still like to pull in?\"\n\nApply requested tweaks and present the updated direction for final approval. This avoids costly rework after the full kit is built. Limit to **2 refinement rounds max** — if the user is still unsure after two rounds, recommend proceeding and iterating on the finished boards where changes are easier to visualize.\n\n## Step 5: Deliver the Brand Kit\n\nOnce a direction is approved, **delegate to the design subagent** (`subagent`with`specialization=\"DESIGN\"`) to build polished visual boards. Embed them as iframes on the canvas.\n\n### Deliverables\n\n**Board 1 — Color & Typography:** Color swatches with hex + OKLCH values, shade ramps (50-900), typography specimen at heading\u002Fbody\u002Fcaption sizes with Google Fonts loaded, contrast audit table, dark mode variant.\n\n**Board 2 — Logo Concepts:**3-4 logo variations (wordmark, icon+text, icon-only, monogram) built as**inline SVG**. Show on light and dark backgrounds at multiple sizes (large display + 32px favicon size). Include SVG source for export.\n\nLogo quality checklist:\n\n- Every logo must be **recognizable at 32px** (favicon\u002Fapp icon test)\n- Include a **single-color version** for monochrome contexts (printing, embossing, watermarks)\n\n- Test on **both light and dark backgrounds** — the logo must work on both without modification or with a simple color inversion\n- Use **geometric simplicity** — avoid fine details that collapse at small sizes\n\n- Provide the icon in a **rounded-square container** variant for app store \u002F social profile use\n\n**Board 3 — Brand in Action:**Realistic mockups showing the brand applied to the**user's actual product type**, not generic pages. If the user is building a marketplace, show a listing card, search results, and app header. If they're building a SaaS dashboard, show the dashboard. Match the mockups to what they're actually building. This board should feel like seeing their real product with the new brand applied.\n\n**Board 4 — Brand Guidelines:** Color usage rules, typography hierarchy, voice & tone guidelines, 1-2 sample applications (business card, social post).\n\n### Accessibility Checklist\n\nEvery brand kit must address accessibility beyond just color contrast:\n\n- **Minimum font sizes** — body text no smaller than 16px on web, 14px on mobile. Captions no smaller than 12px.\n- **Touch target sizing** — interactive elements must be at least 44x44px (iOS) \u002F 48x48dp (Android). Specify this in the guidelines so designers don't shrink branded buttons below usable sizes.\n\n- **Motion sensitivity** — if the brand identity includes animations or transitions, provide a `prefers-reduced-motion` alternative. Note which brand animations are decorative (can be removed) vs. functional (must be preserved in reduced form).\n- **Font legibility** — verify that the chosen display and body fonts remain legible at the specified minimum sizes. Decorative display fonts must not be used for body copy or UI labels.\n\n- **Icon clarity** — any branded iconography must be distinguishable at 24px and not rely solely on color to convey meaning.\n\nInclude these standards in Board 4 (Brand Guidelines) as a dedicated \"Accessibility Standards\" section.\n\n### Export & Deliverable Formats\n\nBefore building the final kit, ask the user which export formats they need. Present as a checklist:\n\n- **Design tokens** — CSS custom properties, Tailwind config, SCSS variables (included by default)\n- **Asset package** — ZIP containing logo SVGs, PNG exports at 1x\u002F2x\u002F3x, favicon ICO\u002FPNG, and Open Graph image (1200x630)\n\n- **Social media templates** — dimensions and safe zones for Instagram post (1080x1080), Instagram story (1080x1920), X\u002FTwitter header (1500x500), LinkedIn banner (1584x396)\n- **Print-ready files** — CMYK color values, bleed specifications, business card layout (3.5x2in)\n\n- **Brand book PDF** — a single-document summary of all guidelines, suitable for sharing with external vendors or team members\n\nGenerate the formats the user selects. At minimum, always deliver design tokens and the asset package.\n\n## Step 5.5: Domain & Social Handle Check\n\nAfter the user approves a direction and name, verify availability:\n\n- **Domain**: Search for `.com`,`.co`,`.app`,`.io` availability\n- **Social handles**: Check `@name` availability on major platforms via web search (Instagram, TikTok, X\u002FTwitter)\n\n- **Trademark conflicts**: Quick web search for existing trademarks in the same industry\n\nPresent findings clearly:\n\n```text\n\nName: SWAPD\n\n- swapd.com — ❌ taken\n- swapd.co — ✅ available\n\n- swapd.app — ✅ available\n- @swapd (Instagram) — ❌ taken\n\n- @getswapd (Instagram) — ✅ available\n- @swapd (TikTok) — ✅ available\n\n```\n\nIf the primary domain or key handles are taken, suggest variations (get-, try-, use- prefixes, or alternate TLDs) before the user commits.\n\n## Color Science\n\n- Work in OKLCH color space (perceptually uniform — same L = same perceived lightness across hues)\n- Use color harmony from OKLCH hue space: complementary (H+180°), analogous (H±30°), triadic (H±120°), split-comp (H+150°\u002FH+210°)\n\n- Generate shade ramps by stepping L linearly in OKLCH — avoids the muddy-middle problem of RGB interpolation\n- WCAG 2.2 AA: 4.5:1 contrast for normal text, 3:1 for large text and UI components\n\n- Use chroma-js or apcach for programmatic contrast verification\n- Dark mode: backgrounds at `oklch(15-20% 0.01 H)` not pure black. Desaturate brand colors slightly (reduce C by ~0.02).\n\n## Limitations\n\n- Logo concepts are starting points — final production logos should be refined with a dedicated designer\n- Fonts limited to Google Fonts \u002F open-source unless user provides custom fonts\n\n- Domain\u002Fhandle availability checks are point-in-time — availability can change; register quickly once decided\n- Trademark search is a surface-level web check, not a legal opinion — recommend a proper trademark search for high-stakes brands\n",{"name":5,"description":7},"main","6b4a291df75c639681e93b4b5b812126443fd6ed","secondary_skills\u002Fbranding-generator",3,"https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd","https:\u002F\u002Fsolanaclawd.com\u002Fopenclawd","https:\u002F\u002Fgithub.com\u002Fclawdsolana","https:\u002F\u002Fmusebook.trade","Welcome to Open Clawd. The future of Ai on and off chain. Bringing webMCP to web 3 using X402, A2A, MPP and so much more!","2026-08-01 09:30:51",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add clawdsolana\u002FOpenClawd --skill branding-generator",{"tool":57,"command":58},"bunx","bunx skills add clawdsolana\u002FOpenClawd --skill branding-generator",{"tool":60,"command":61},"pnpm","pnpm dlx skills add clawdsolana\u002FOpenClawd --skill branding-generator","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fsecondary_skills\u002Fbranding-generator\u002FSKILL.md",true,[65],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},".fingerprint","OTHER","其他",32,"https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fsecondary_skills\u002Fbranding-generator\u002F.fingerprint",[72,103,131,156,166,189],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":81,"publishedAt":102},"01M71KRBD0W01EAXJ8YM4M1SJ2","solana-dev","End-to-end Solana development playbook (Jan 2026). Prefer Solana Foundation framework-kit (@solana\u002Fclient + @solana\u002Freact-hooks) for React\u002FNext.js UI. Prefer @solana\u002Fkit for all new client\u002FRPC\u002Ftransaction code. When legacy dependencies require web3.js, isolate it behind @solana\u002Fweb3-compat (or @solana\u002Fweb3.js as a true legacy fallback). Covers wallet-standard-first connection (incl. ConnectorKit), Anchor\u002FPinocchio programs, Codama-based client generation, LiteSVM\u002FMollusk\u002FSurfpool testing, and security checklists.","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fsolana-dev\u002FSKILL.md",[78],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101],"solana dev","dev","solana","Wallet","end","testing","hooks","kit","new","when","web3","code","react","next","2026","playbook","security","ui","fallback","framework","2026-11-10 10:56:23",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":112,"publishedAt":102},"01M71KR8QPESSY61SVE8ZTFNVT","xurl","A CLI tool for making authenticated requests to the X (Twitter) API. Use this skill when you need to post tweets, reply, quote, search, read posts, manage followers, send DMs, upload media, or interact with any X API v2 endpoint.","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fskills\u002Fxurl\u002FSKILL.md",[109],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[105,113,114,115,116,117,118,91,119,120,121,122,123,124,125,126,127,128,129,130],"posts","Media","x api","search","send","tap","you","api","cli","read","install","cli tool","endpoint","brew","for","manage","tool","twitter",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":138,"publishedAt":102},"01M71KR6FSXV88YDKWP7NBY3SH","wurk-integration","WURK API integration for monetizing agents with x402 payments on Solana\u002FBase - create social jobs, custom challenges, and agent help tasks","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fskills\u002Fwurk-integration\u002FSKILL.md",[137],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},[139,140,141,142,143,144,145,146,120,31,147,148,149,150,151,152,127,153,154,155],"wurk","wurk integration","integration","x402","social","payments","tasks","team","social-jobs","command","agent-help","custom-jobs","clawd","safe","api integration","custom","true",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":102},"01M71KR4HCX41BPAK9GP7RPRRP","workflows","Manage application workflows including configuration, restart, and removal.","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fskills\u002Fworkflows\u002FSKILL.md",[],[158,128,163,164,165],"configuration","application","restart",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":102},"01M71KR1VM0F5GPEQDNG5J7A0H","web-search","Search the web, fetch content, extract branding profiles, and capture screenshots from URLs. Use for real-time information, API documentation, current events, design matching, and visual reference.","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fskills\u002Fweb-search\u002FSKILL.md",[],[173,116,174,175,176,127,177,178,179,180,181,182,183,120,184,25,185,186,187,188],"web search","web","fetch","api documentation","real-time","time","profiles","design","use","information","visual","documentation","matching","reference","capture","content",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":195,"publishedAt":102},"01M71KQZN5MR1JFQHG5GWXYAHS","weather","Get current weather and forecasts via wttr.in or Open-Meteo. Use when: user asks about weather, temperature, or forecasts for any location. NOT for: historical weather data, severe weather alerts, or detailed meteorological analysis. No API key needed.","https:\u002F\u002Fgithub.com\u002Fclawdsolana\u002FOpenClawd\u002Fblob\u002Fmain\u002Fskills\u002Fweather\u002FSKILL.md",[],[191,196,127,197,181,91,198,120,199,200,201,202,203,204,205,206,207,208],"get","open","analysis","alerts","temperature","curl","via","help","about","https","location","data","user"]