brand-designer
Creates cohesive brand identities including logos, color palettes, typography systems, and brand guidelines documents. Generates SVG logo components with variants, configures Tailwind color tokens, builds type scales, and produces social media and business card templates. Use when designing a logo, building a color palette, setting up typography systems, creating brand guidelines, generating social media templates, or organizing brand asset files. Use for branding, visual identity, logo design, brand guidelines, color systems.
- Installs
- 229
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill brand-designer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads brand-designer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Brand Designer
Overview
Brand Designer creates complete visual identity systems from discovery through asset delivery. It covers logo design with SVG components, color palette generation with accessibility compliance, typography scale configuration, brand guidelines documentation, and template creation for social media and print collateral.
When to use: New brand identity projects, logo design with SVG variants, color palette creation with Tailwind integration, typography system setup, brand guidelines documentation, social media template generation, brand asset file organization.
When NOT to use: UI component library design (use design-system), image optimization pipelines (use asset-manager), Figma-to-code workflows (use figma-developer), marketing copy or content strategy.
Quick Reference
| Pattern | Approach | Key Points |
|---|---|---|
| Logo design | SVG component with full/icon/wordmark variants | Design monochrome first, then add color |
| Color palette | Primary, secondary, neutral, semantic layers | 60/30/10 rule: neutral/primary/accent |
| Typography system | Display + body font pair with CSS custom props | Maximum two font families |
| Brand guidelines | Logo usage, colors, typography, voice and tone | Include clear space rules and minimum sizes |
| Social templates | SVG templates at platform-specific dimensions | 1200x630 for Open Graph, 400x400 for profiles |
| Asset organization | Structured directories: logo, colors, fonts | SVG as primary format, PNG at @1x/@2x/@3x |
| Favicon generation | Sharp-based script from SVG source | Generate 16, 32, 48, 64, 128, 256px sizes |
| Accessibility | WCAG AA contrast ratios for text on backgrounds | Verify primary color passes AA on white |
Brand Discovery Checklist
| Question | Purpose |
|---|---|
| What does the company do? | Industry context |
| Who is the target audience? | Demographic and psychographic targeting |
| What are the brand values? | Core identity pillars |
| What feeling should the logo evoke? | Emotional direction |
| Any colors or symbols to avoid? | Constraints and sensitivities |
| Who are the competitors? | Differentiation opportunities |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Designing the logo in color first | Design in monochrome first; logo must work in a single color before adding palette |
| Skipping the brand discovery checklist | Always gather company values, audience, competitors, and constraints before design |
| Using more than two font families | Limit to one display font and one body font for cohesion |
| Not providing logo variants | Create full, icon-only, and wordmark-only variants plus monochrome versions |
| Exporting logos only as PNG | Provide SVG as primary format; add PNG at @1x, @2x, @3x for raster needs |
| Using brand color for large backgrounds | Follow 60/30/10 rule: 60% neutral, 30% primary, 10% accent |
| Adding effects to logo (shadows, gradients) | Logo is used as-is from approved variants only |
| Missing clear space rules | Define clear space equal to height of tallest letter around logo |
| No minimum size specification | Digital: 120px full / 40px icon; Print: 1in full / 0.25in icon |
Delegation
When working on brand design, delegate to:
design-system-- Token hierarchy and component architectureasset-manager-- Image optimization and asset pipelinefigma-developer-- Figma-to-code implementation
References
- Logo Design -- SVG logo component with full, icon, and wordmark variants
- Color Palette -- Brand color definitions, Tailwind config, usage guidelines
- Typography -- Font selection, CSS custom properties, React typography components
- Brand Guidelines -- Complete guidelines template with voice, tone, and visual rules
- Templates -- Social media, business card, and profile image SVG templates
- Asset Management -- File organization, favicon generation, HTML meta tags
FAQ
What does the brand-designer skill do?
Creates cohesive brand identities including logos, color palettes, typography systems, and brand guidelines documents. Generates SVG logo components with variants, configures Tailwind color tokens, builds type scales, and produces social media and business card templates. Use when designing a logo, building a color palette, setting up typography systems, creating brand guidelines, generating social media templates, or organizing brand asset files. Use for branding, visual identity, logo design, brand guidelines, color systems.
How do I install brand-designer?
Run npx skills add https://github.com/oakoss/agent-skills --skill brand-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/brand-designer/ (personal) or .claude/skills/brand-designer/ (project).
Which AI agents can use brand-designer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is brand-designer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains brand-designer?
It is published by oakoss in oakoss/agent-skills. It has 229 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
find-skills
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular marketing & seo skills
reddit-automation
flowkit-labs/skills
Find Reddit threads where people are genuinely asking for what you offer, then draft short, genuinely helpful replies — disclosing your affiliation honestly and naming your product only when it truly answers the question. Two moves: discovery — scan the right subreddits for real needs (recommendation asks, expressed pain, competitor mentions) and rank the few threads where you can actually help; drafting — write from real experience, respect each community's self-promo rules, and keep a human in the loop to review and post. This markets on Reddit the honest way: contribute value, disclose who you are, never astroturf. Distilled from the playbook behind doany.ai's Reddit agent. Triggers on "find reddit opportunities", "reddit marketing", "reddit automation", "reply on reddit for my product", "reddit community engagement", "reddit lead gen", or any ask to turn Reddit threads into genuine, disclosed marketing replies.
twitter-automation
101-skills/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
twitter-automation
magentosh/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
twitter-automation
qu-skills/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet
product-launch-video
heygen-com/hyperframes
Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.
twitter-automation
skills-shell/superpowers
Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet