brand-guidelines

What it does

This skill provides AI agents with a structured framework to generate code and design assets that strictly adhere to specific brand identity requirements. It ensures consistent output by embedding rules regarding color palettes, typography, logo usage, and overall visual tone directly into the generation process.

When to use it

• Consistent UI Development: Building new frontend components or pages that must match an existing corporate website's look and feel.
• Marketing Material Creation: Generating landing pages or promotional assets where brand voice and visual style are critical for recognition.
• Design System Enforcement: Ensuring AI-generated code respects established design tokens, spacing standards, and accessibility guidelines.
• Rebranding Projects: Quickly applying a new set of visual rules to existing templates or generating fresh content under a new identity.

Key capabilities

• Enforces specific color hex codes and usage contexts (primary, secondary, background).
• Defines typography hierarchies including font families, weights, and sizing scales.
• Sets constraints for logo placement, sizing, and clear space requirements.
• Configures tone of voice instructions to align with brand personality (e.g., professional, playful, minimalist).

Example prompts

• "Create a landing page hero section using the brand guidelines: primary color #003366, font 'Inter', and a professional tone."
• "Generate a logo placeholder component that respects the 12px minimum size rule and maintains clear space on all sides."
• "Write CSS variables for a new dashboard based on these brand rules: dark mode background #1a1a1a and accent color #ff5733."

Tips & gotchas

Ensure you provide complete and unambiguous definitions for colors and fonts, as vague instructions can lead to inconsistent AI interpretations. This skill is most effective when the brand guidelines are documented in a structured format like JSON or YAML before being passed to the agent.