diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..831b985 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,49 @@ +name: Deploy site to GitHub Pages + +on: + push: + branches: [main] + paths: + - "site/**" + - "examples/**" + - ".github/workflows/pages.yml" + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + deploy: + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - uses: actions/checkout@v4 + with: + persist-credentials: false + - name: Assemble the site (page + the example previews it shows) + run: | + mkdir _site + cp -r site/. _site/ + mkdir -p _site/examples + cp examples/overview.png _site/examples/ + for b in kiln rookery marigold; do + mkdir -p "_site/examples/$b/final" "_site/examples/$b/preview" + cp "examples/$b/final/symbol.svg" "_site/examples/$b/final/" + cp -r "examples/$b/preview/mockups" "_site/examples/$b/preview/" + cp examples/$b/preview/*.pdf "_site/examples/$b/preview/" + done + touch _site/.nojekyll + - uses: actions/configure-pages@v5 + - uses: actions/upload-pages-artifact@v3 + with: + path: _site + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index cabc6d3..20206b7 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,6 @@ mockups-cache/ .env .env.* *.pem + +# local Pages build +_site/ diff --git a/README.md b/README.md index 2584c9b..77b189f 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ logo sketches** for you to choose from, has an **independent sub-agent review th Kiln (coffee roastery), Rookery (gaming community) and Marigold Press (illustrator): fictional briefs, every file in [`examples/`](examples) was produced by the skill. Merch is chosen for each business, not a generic mug and shirt. +**Website:** [shadowtor.github.io/BrandDesign](https://shadowtor.github.io/BrandDesign/) + **Contents:** [What you get](#what-you-get) · [Install](#install) · [Use](#use) · [Merch by business type](#merch-is-chosen-for-the-business) · [Examples](#examples) · [Limits](#what-it-will-not-do-for-you) · [Develop](#develop) · [Credits](#credits-and-attribution) diff --git a/site/favicon.svg b/site/favicon.svg new file mode 100644 index 0000000..d35cae4 --- /dev/null +++ b/site/favicon.svg @@ -0,0 +1 @@ +brand-studio diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..650a408 --- /dev/null +++ b/site/index.html @@ -0,0 +1,352 @@ + + + + + +brand-studio: brand identity and logo design skill for AI agents + + + + + + + + + + + + + + + + + +
+
+ brand-studio + +
+ +
+
+

Three logo sketches first. The whole brand after you pick one.

+

brand-studio is a skill for Claude Code, Codex CLI and Gemini CLI. Give it a business brief. It researches the category, draws three greyscale sketches, has a second agent review them, and stops. You choose, and then it builds the kit.

+ +
+ Pick a sketch (fictional example brands; the sketch stage is greyscale) + + + +
+ +
+

Choose one and it turns to colour, with the merch the skill picked for that kind of business.

+
+
+ +
+

How it works

+
    +
  1. BriefYou describe the business, the audience and how it should feel. Anything missing becomes a stated assumption you can correct.
    2. +
  2. ResearchIt compares the category with 1,400 reference logos and brand palettes, and lists the clichés to avoid.
    3. +
  3. Three sketchesThree different ideas as black SVG, tested at 16 px, in one colour and reversed.
    4. +
  4. Independent reviewA second agent that knows the business but not the favourite looks for look-alikes, odd readings and weak craft.
    5. +
  5. You chooseThe skill stops here. No colour and no kit until you pick a sketch.
    6. +
  6. The kitColour, outlined type and lockups, then every file below. A second review checks the result.
    7. +
+
+ +
+

What the kit contains

+
+
Logos
Five forms: square, horizontal, vertical, symbol, wordmark. Each comes in full colour for light grounds, full colour for dark grounds, plus black, white and greyscale. Files are SVG, PNG, JPG and PDF.
+
Favicons
The full icon set with a test report: ICO contents, sizes, manifest, safe zone, and legibility at 16 px on light and dark tabs.
+
Social
Avatars and banners for LinkedIn, X, Facebook, YouTube, link previews and Instagram.
+
Stationery
An A4 letterhead with matching header and footer strips, a business card print file with bleed, and an email signature.
+
Merch mockups
Items that suit the business. Photographic where a free PSD exists, drawn and labelled where none does.
+
Guidelines and tokens
A PDF built from the real files, plus colour tokens for CSS, SCSS, Tailwind and DTCG.
+
+ +

Merch follows the business

+ + + + + + + + +
CoffeeBean bag, travel mug, takeaway cup, mug, apron, tote
GamingTeam jersey, mouse mat, hoodie, tee, cap, sticker sheet
TechBusiness card, USB stick, charging cable, lanyard, phone case, laptop sleeve
ArtistSticker sheet, business card, tee, tote, notebook, poster
And moreRetail, fashion, fitness, finance, health, events, education, trades and others, or a list you set yourself
+
+ +
+

Install

+

You need Python 3.9 or newer, a Chromium-based browser (Chrome, Edge, Brave) and internet access for fonts. uv is recommended.

+
+
+

Claude Code

+ 
/plugin marketplace add shadowtor/BrandDesign
+/plugin install brand-studio@brand-studio
+
+
+

Codex, Gemini or another agent

+ 
git clone https://github.com/shadowtor/BrandDesign.git
+cd BrandDesign
+python tools/install.py --codex    # Codex CLI
+python tools/install.py --gemini   # Gemini CLI
+python tools/install.py --dest DIR # any other agent: its skills folder
+

Run the one line that matches your agent.

+
+
+
+ Or paste this into your agent and let it install the skill + 
Install the "brand-studio" Agent Skill for me.
+
+1. Clone https://github.com/shadowtor/BrandDesign (or git pull if I already have it) and read
+   docs/INSTALL-FOR-AGENTS.md in it. Follow that file exactly.
+2. Install it for the agent I am using right now (python tools/install.py --claude, --codex or --gemini).
+   Only copy the skills/brand-studio folder; do not change anything inside it.
+3. Run: python skills/brand-studio/scripts/check_setup.py. If it reports a FAIL, show me the line and its fix and stop.
+4. Tell me where it was installed and the check result, and that I must start a new session.
+   Do not commit, push or download anything else.
+
+

After installing, start a new session and ask: "Design a brand identity for my coffee roastery. Show me three logo sketches first."

+
+ +
+

What it will not do for you

+
    +
  • It does not clear trademarks. Search your market's register before you launch.
    • +
  • CMYK values are derived from screen colour, and Pantone is left blank. A printer needs to proof the real thing.
    • +
  • The favicon test uses a simulated browser tab. Open the live site once in a real browser.
    • +
  • Mockups are previews, not artwork to publish. Third-party PSD files are never redistributed.
    • +
+
+ +
+

Credits

+

Built on logo-design-skill and brand-identity-skill (both MIT). The photographic previews use free PSD mockups from mockups-design.com. Every mockup, service and reference site is listed in the README credits.

+
+
+
+ + + + + diff --git a/site/social-card.png b/site/social-card.png new file mode 100644 index 0000000..dd7fb10 Binary files /dev/null and b/site/social-card.png differ diff --git a/tools/make_social_card.py b/tools/make_social_card.py new file mode 100644 index 0000000..b268f32 --- /dev/null +++ b/tools/make_social_card.py @@ -0,0 +1,69 @@ +#!/usr/bin/env python3 +"""Render the 1280x640 social card (GitHub repo social preview, link previews) to site/social-card.png. + + python tools/make_social_card.py + +All content sits inside a 80 px safe area (GitHub's template asks for a border so nothing is cropped). Uses the skill's own +renderer (headless Chromium) and fetches Schibsted Grotesk (SIL OFL) from Google Fonts. Re-run after changing the marks. +""" +import base64 +import os +import sys + +ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) +SK = os.path.join(ROOT, "skills", "brand-studio", "scripts") +sys.path.insert(0, SK) +import kitlib # noqa: E402 + +kitlib.ensure_deps({"fontTools": "fonttools", "uharfbuzz": "uharfbuzz"}) +import outline_text # noqa: E402 + +W, H, SAFE = 1280, 640, 80 +OUT = os.path.join(ROOT, "site", "social-card.png") + + +def font_face(weight): + p = outline_text.fetch_google_font("Schibsted Grotesk", weight) + b64 = base64.b64encode(open(p, "rb").read()).decode("ascii") + return f"@font-face{{font-family:'SG';font-weight:{weight};src:url(data:font/ttf;base64,{b64}) format('truetype')}}" + + +def mark(slug): + svg = open(os.path.join(ROOT, "examples", slug, "final", "symbol.svg"), encoding="utf-8").read() + return "data:image/svg+xml;base64," + base64.b64encode(svg.encode("utf-8")).decode("ascii") + + +def tile(slug, label, chosen): + cls = "tile chosen" if chosen else "tile" + return (f'
{label}' + f'{"chosen" if chosen else "sketch"}
') + + +html = f"""
+
brand-studio
+

Three logo sketches first. The whole brand after you pick one.

+

A skill for Claude Code, Codex and Gemini CLI.

+
{tile("kiln", "Kiln", False)}{tile("rookery", "Rookery", False)}{tile("marigold", "Marigold", True)}
+
Then the full kit and guidelines
""" + +kitlib.screenshot(html, W, H, OUT) +print(f"wrote {OUT} {os.path.getsize(OUT) / 1024:.0f} KB")