菜单
Create a complete brand identity — logo (via quiver.ai), colors, fonts, SVG refinement in Inkscape, and a full asset pack (PNGs, favicons, OG images), delivered as a brand guide HTML page. Triggers on branding, logo, brand pack, brand color, project identity, social preview, visual identity.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Review recently changed code for reuse, simplification, efficiency, and consistency cleanups, then apply the fixes. Quality only — doesn't hunt for bugs. Triggers on 'simplify', 'clean this up', 'simplify this diff'.
Rigorous code review of completed implementation before committing. Use for features, refactors, and critical-path changes — not trivial changes (this is expensive).
Post-implementation checklist — docs, code quality, conventions, visual verification, issue hygiene. Triggers on 'finalize', 'ready to merge', 'preflight check', 'wrap this up', 'final review'.
Run the full pre-merge pipeline and create a PR. Triggers on 'ship', 'ship it', 'ready to ship', 'prep for PR', 'create PR', 'ready to merge'.
Spin up an isolated git worktree in its own tmux session — coding agent in one window, dev stack in another, git UI in a third — with the agent briefed and already working. Use for spinning up a worktree, starting a feature/branch/task in isolation, handing work to a fresh agent (Claude/Codex), or setting up an isolated tmux dev session.
Read, send input to, or spawn other tmux panes, windows, and sessions - including agents (Claude Code, Codex), REPLs, and TUIs running in them. Use when the user references another pane, window, or agent.
| name | branding |
| description | Create a complete brand identity — logo (via quiver.ai), colors, fonts, SVG refinement in Inkscape, and a full asset pack (PNGs, favicons, OG images), delivered as a brand guide HTML page. Triggers on branding, logo, brand pack, brand color, project identity, social preview, visual identity. |
Create a complete brand identity for a project: logo mark, wordmark lockups, color palette, font selection, a production-ready asset pack, and a brand guide.
Verify these tools are installed before starting:
which inkscape && which magick
brew install --cask inkscapebrew install imagemagickThe workflow has 7 phases. The first 3 are collaborative with the user; the last 4 are mostly automated production work.
Throughout the collaborative phases, use temporary HTML pages to show the user their options. This is a core technique in this workflow — never ask the user to open SVG files from folders or guess what things look like.
The pattern:
tmp/ directory (e.g., tmp/brand-fonts.html)open -a "Google Chrome" /path/to/file.htmltmp/ files before committingKey rules for preview pages:
textContent, createElement) rather than innerHTML, which security hooks may block.<link> tags in the <head> for font previews — they render instantly in the browser.Ask the user:
Don't overthink this — a 2-minute conversation is enough. The AI tool will do the creative heavy lifting.
Craft a detailed prompt for the user to paste into an AI SVG generation tool (quiver.ai, recraft.ai, or similar). The prompt should specify:
Present the prompt to the user. They paste it into the tool, generate options, and either:
Once you have the SVG, read it to understand its structure (viewBox, dimensions, colors used). This is the mark — the icon without text.
Important: If the mark SVG has embedded text or fonts, note it — those will be converted to paths in Phase 4.
Suggest 4-6 fonts that pair well with the mark's style. Build a single HTML preview page that shows all candidates side by side:
Load fonts via Google Fonts <link> tags. Open the page in Chrome for the user to compare.
After the user picks a font:
curl -L -o /tmp/FontName.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/fontname/FontName%5Bwght%5D.ttf"
ofl/ path for most Google Fonts. Verify the download with file /tmp/FontName.ttf — it should say "TrueType Font data", not "HTML" or "ASCII text".cp /tmp/FontName.ttf ~/Library/Fonts/ (macOS)brand/fonts/ for the asset packIf the user already has a logo with colors, extract them first. Show all colors found in the SVG as chips in a preview HTML page — name each one by its role (e.g., "Hull Navy", "Sail Red").
Then present brand color candidates as large clickable-looking cards with:
Include a proposed color schema section showing how the colors would be used:
Color variant exploration: If the user wants to try different shades or swap a color (e.g., "that red is too dark"), generate a comparison page with 4-6 variants showing the full mark with each color swapped in. Use sed to replace hex values in the SVG for quick iteration — inline each variant SVG directly in the HTML.
Tailwind color scale: When the user settles on a brand color, they'll need a full shade scale for Tailwind. Direct them to generate one at:
The user pastes their hex, gets back a 50-950 scale in OKLCH, and shares it with you to wire into the project.
Record the final colors for the asset pack:
This phase produces the master SVGs that everything else is derived from. You need 9 SVG files:
| Variant | Mark only | Horizontal lockup | Stacked lockup |
|---|---|---|---|
| Color | mark-color.svg | logo-horizontal-color.svg | logo-stacked-color.svg |
| Black | mark-black.svg | logo-horizontal-black.svg | logo-stacked-black.svg |
| White | mark-white.svg | logo-horizontal-white.svg | logo-stacked-white.svg |
A lockup is the mark + wordmark text composed together. Two layouts:
Start with the color horizontal lockup:
<text> element using the chosen fontPreview each lockup in Chrome before converting text to paths. Open the SVG directly — open -a "Google Chrome" file.svg. The user should confirm the proportions, spacing, and overall feel before proceeding. Adjust text x position, font-size, and viewBox width based on feedback.
Google Fonts @import doesn't work in Inkscape. The font must be installed locally first (done in Phase 3). Then convert all text to paths so the SVG is self-contained:
inkscape input.svg --actions="select-all;object-to-path;export-filename:output.svg;export-do"
After conversion, verify with grep -c '<text' output.svg — should return 0.
#18181b (zinc-950, not pure black — standard design practice for better readability)#ffffff#18181b. In black/white variants, everything is monochrome.Use sed for color replacement — handle both fill="#hex" attributes and fill:#hex in style attributes:
sed 's/fill="#[0-9A-Fa-f]\{6\}"/fill="#18181b"/g; s/fill:#[0-9a-fA-F]\{6\}/fill:#18181b/g' input.svg > output.svg
After compositing, trim the viewBox to fit content tightly:
inkscape file.svg --actions="select-all;fit-canvas-to-selection;export-filename:file.svg;export-do"
Or manually adjust the viewBox after checking element bounding boxes:
inkscape file.svg --query-all
brand/
├── svg/ 9 master SVGs (from Phase 4)
├── png/ rasterized variants at standard sizes
├── favicon/ ico + png sizes + webmanifest
├── social/ platform-specific images
└── fonts/ font files + README
Export from the master SVGs using Inkscape (better SVG rendering than ImageMagick):
Marks — export at: 64, 128, 256, 512, 1024px (square, width = height)
inkscape mark-color.svg --export-type=png --export-filename=../png/mark-color-256.png --export-width=256
Lockups — export at widths appropriate for the aspect ratio:
Use the /favicon skill if available. Otherwise, generate manually from the mark:
# PNG sizes for favicons
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-16x16.png --export-width=16
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-32x32.png --export-width=32
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/apple-touch-icon.png --export-width=180
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-192x192.png --export-width=192
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-512x512.png --export-width=512
# ICO (multi-resolution)
magick brand/favicon/favicon-16x16.png brand/favicon/favicon-32x32.png brand/favicon/favicon.ico
Create brand/favicon/site.webmanifest:
{
"name": "PROJECT_NAME",
"short_name": "PROJECT_NAME",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#HEX_OF_BRAND_COLOR",
"background_color": "#ffffff",
"display": "standalone"
}
OG image (1280x640) — for GitHub social preview, Open Graph tags:
magick -size 1280x640 xc:white \
\( brand/svg/logo-horizontal-color.svg -resize 1100x -trim +repage \) \
-gravity center -composite \
brand/social/og-image-1280x640.png
The -trim +repage before -gravity center is critical — it strips the SVG's internal whitespace so ImageMagick centers the actual visual content, not the viewBox bounding box. Without this, the logo will appear off-center.
Platform icons:
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/discord-icon-512.png --export-width=512
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/github-avatar-500.png --export-width=500
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/npm-icon-256.png --export-width=256
Create brand/fonts/README.md documenting the font choice, license, and source:
# Brand Font
**[Font Name]** by [Foundry]
- Weight: 700 (Bold) for wordmark
- License: SIL Open Font License
- Source: [GitHub URL]
The full font family archive is included for reference.
Generate a comprehensive HTML brand guide page at brand/brand-guide.html. This is what a designer would deliver as a "brand style guide" or "brand board" — a single-page reference that anyone on the team can open to understand how to use the brand.
The brand guide should include these sections:
Project name and tagline/description at the top.
Show all 9 SVG variants organized in a grid:
#0f172a)Label each with its filename and recommended usage:
Include minimum size guidance: mark should not be displayed smaller than 32px, lockups not smaller than 120px wide.
Show each brand color as a large swatch with:
bg-primary-500)If a full Tailwind scale was generated, show the complete 50-950 ramp as a horizontal strip of swatches with labels.
Show all logo-specific colors too (hull, sails, water, etc.) with their hex values.
brand/fonts/A table listing every file in the brand/ directory with:
Organized by subdirectory (svg/, png/, favicon/, social/, fonts/).
<link>. No external file references (the guide should work when opened from any location).After generating, open in Chrome for the user to review: open -a "Google Chrome" brand/brand-guide.html
This phase is project-specific. Ask the user which of these apply:
<p align="center">
<a href="PROJECT_URL">
<img src="brand/svg/logo-horizontal-color.svg" width="280" alt="PROJECT_NAME">
</a>
</p>
GitHub renders SVGs from the repo inline. The width attribute prevents it from blowing up to full width. Wrap in <a> to link to the project's website.
<link> tags to <head><meta name="theme-color" content="#HEX">If the user has a Tailwind scale, wire it into the CSS:
@theme {
--color-primary-50: oklch(...);
--color-primary-100: oklch(...);
/* ... */
--color-primary-950: oklch(...);
}
"homepage" to package.json pointing to the docs/websitePresent manual steps clearly at the end — don't try to automate things that require browser UI interaction.
Before declaring done, verify:
brand/ directorytmp/ cleaned up