brand guidelines builder

    1

    Convert fragmented brand ideas into professional, developer-ready guidelines and design systems.

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    brand guidelines builder

    Example session with this skill installed

    Create a brand style guide for 'DevFlow', a minimalist CI/CD tool. We like dark mode, lime green accents, and a direct, no-nonsense voice. We use Inter for everything.

    • Read your context and instructions
    • Compiled the brand guidelines builder
    • Generated the UI component

    I have structured the DevFlow brand guidelines to prioritize technical clarity and high-contrast dark mode aesthetics, translating your minimalist CI/CD vision into a functional system.

    DevFlow Brand Guidelines

    1. Logo Rules

    • Primary Logo: Monochrome wordmark in Inter Bold, #FFFFFF.
    • Clearance: Minimum padding equal to the height of the lowercase 'd'.

    Usage: Never stretch or distort. Use the #AEFF00 (Lime Green) version only for favicons or specific active states.

    2. Type and Color Rules

    ElementSpecificationUsage
    Primary TypeInter (Variable)All UI and documentation
    Heading 1Inter Bold / 32px / -0.02em trackingPage titles
    BodyInter Regular / 16px / 1.5 line-heightDocumentation and logs
    Base Background#0A0A0A (Rich Black)Primary dark mode background
    Accent Color#AEFF00 (Lime Green)Primary buttons, success states
    Surface Color#1F1F1F (Dark Grey)Cards, tooltips, and sidebars

    3. Layout and Imagery Rules

    • Grid: 8px baseline grid for all spacing.
    • Imagery: High-contrast syntax highlighting. Screenshots must use a rounded corner radius of 4px.
    • Borders: Subtle 1px borders using #2E2E2E for section separation.

    4. Voice and Tone

    • Style: Direct, no-nonsense, and imperative.
    • Constraint: Use "We" sparingly. Focus on the action: "Deploy now" instead of "We think you should deploy."

    Example: "Build failed. Check logs." (Correct) vs "It looks like your build might have encountered an error." (Incorrect).

    5. Governance Checklist

    • Ensure all #AEFF00 text meets AA contrast requirements against #0A0A0A (Use for large text/buttons only).
    • Verify Inter font files are self-hosted for performance.
    • Review all CLI output to ensure it matches the "Direct" voice standard.

    Next steps

    1. Audit your current UI components against the 8px baseline grid.
    2. Test the Lime Green accent against the dark background in a high-glare environment.
    3. Update your tailwind.config.js or CSS variables with the specified hex codes.

    brand-guidelines-builder.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Standardize UI/UX across a product teamTranslate brand vision into technical CSS/design tokensCreate a unified voice for documentation and UI copyBuild an accessible color palette and typography scale

    About this skill

    Inconsistent brand application wastes time and dilutes your product identity. This skill transforms messy, incomplete brand decisions into a professional guideline system that ensures developers and designers stay aligned.

    What it does

    • Architects brand systems by translating abstract adjectives into concrete, observable design behaviors and reusable rules.
    • Documents visual assets including logo usage, typography scales, and color palettes with specific production values.
    • Defines layout logic and imagery rules to ensure consistency across different screen sizes and media types.
    • Codifies brand voice to maintain a unified tone across technical documentation, UI copy, and marketing.
    • Ensures accessibility by embedding contrast requirements and legibility standards directly into the style guide.

    How it works

    1. Input ingestion where you provide existing assets, identity rules, or even just messy notes about your brand.
    2. System mapping where the skill separates facts from assumptions and builds a professional structure.
    3. Execution where it generates the full guideline, translating your plain-language preferences into technical specifications.
    4. Governance check where it provides a final checklist for asset ownership and usage exceptions.

    Frameworks & tools

    This skill is framework agnostic but focuses on production-ready specifications for CSS, design systems, and component libraries.

    Why this beats prompting it yourself

    Generic prompts often result in vague mood boards or ceremonial fluff that is impossible to implement. This skill enforces a professional standard that prioritizes operational usage, accessibility, and explicit exceptions over decorative filler.

    Use cases

    • Drafting a comprehensive style guide for a new startup or side project.
    • Moving brand rules from a designer's head into a shared developer resource.
    • Standardizing UI components and voice for a growing engineering team.
    • Creating a "living" document for contractors to ensure brand alignment.

    Known limitations

    Does not generate physical logo files or host assets. It requires the user to provide the basic intent or approved decisions, as it will not invent brand rules without prior approval.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Passed all security checks, Safe to install

    Listed7 days ago

    What's inside

    Frequently Asked Questions