菜单
Unified brand identity pipeline — brand voice, visual identity, messaging frameworks, asset management, brand consistency, plus full brand kit generator (strategy → color palette → typography → CSS tokens → guidelines). Pipeline: creative vision → brand strategy → full kit.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/InugamiDev/ultrathink-oss --skill brand-studio命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | brand-studio |
| description | Unified brand identity pipeline — brand voice, visual identity, messaging frameworks, asset management, brand consistency, plus full brand kit generator (strategy → color palette → typography → CSS tokens → guidelines). Pipeline: creative vision → brand strategy → full kit. |
| layer | orchestrator |
| category | design |
| triggers | ["brand","brand assets","brand color","brand consistency","brand guide","brand guidelines","brand identity","brand kit","brand package","brand system","brand tokens","brand typography","brand voice","brandkit","full brand","generate brand","logo design","logo usage","messaging framework","style guide","visual identity"] |
Unified brand identity pipeline — brand voice, visual identity, messaging frameworks, asset management, brand consistency, plus full brand kit generator (strategy → color palette → typography → CSS tokens → guidelines). Pipeline: creative vision → brand strategy → full kit.
brandbrandkit-genckm:brandBrand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Brand identity, voice, messaging, asset management, and consistency frameworks.
Inject brand context into prompts:
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
Validate an asset:
node scripts/validate-asset.cjs <asset-path>
Extract/compare colors:
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20
Files synced:
docs/brand-guidelines.md → Source of truthassets/design-tokens.json → Token definitionsassets/design-tokens.css → CSS variables| Subcommand | Description | Reference |
|---|---|---|
update | Update brand identity and sync to all design systems | references/update.md |
| Topic | File |
|---|---|
| Voice Framework | references/voice-framework.md |
| Visual Identity | references/visual-identity.md |
| Messaging | references/messaging-framework.md |
| Consistency | references/consistency-checklist.md |
| Guidelines Template | references/brand-guideline-template.md |
| Asset Organization | references/asset-organization.md |
| Color Management | references/color-palette-management.md |
| Typography | references/typography-specifications.md |
| Logo Usage | references/logo-usage-rules.md |
| Approval Checklist | references/approval-checklist.md |
| Script | Purpose |
|---|---|
scripts/inject-brand-context.cjs | Extract brand context for prompt injection |
scripts/sync-brand-to-tokens.cjs | Sync brand-guidelines.md → design-tokens.json/css |
scripts/validate-asset.cjs | Validate asset naming, size, format |
scripts/extract-colors.cjs | Extract and compare colors against palette |
| Template | Purpose |
|---|---|
templates/brand-guidelines-starter.md | Complete starter template for new brands |
$ARGUMENTS (first word)references/{subcommand}.mdbrandkit-genFull brand kit generator. From a single prompt, produces: brand strategy + voice, color palette, typography system, logo SVG, CSS design tokens, component preview, social banners, OG image, and a brand guidelines doc. Chains brand → design-system → impeccable-frontend-design → banner-design.
One prompt → complete brand system. Strategy, tokens, logo, components, banners, guidelines.
| Deliverable | Description |
|---|---|
brandkit/guidelines/brand-guidelines.md | Full brand doc: voice, personality, usage rules |
brandkit/tokens/design-tokens.css | CSS variables (primitive → semantic → component) |
brandkit/tokens/design-tokens.json | Token source of truth for design tools |
brandkit/logo/logo-primary.svg | Primary logo (wordmark + mark) |
brandkit/logo/logo-mark.svg | Icon/mark only |
brandkit/logo/logo-dark.svg | Dark background variant |
brandkit/logo/favicon.svg | 32×32 favicon |
brandkit/components/preview.html | Button, card, badge, input, navbar showcase |
brandkit/banners/og-image.html | 1200×630 Open Graph / social share image |
brandkit/banners/twitter-header.html | 1500×500 Twitter/X header |
brandkit/banners/linkedin-cover.html | 1584×396 LinkedIn cover |
Collect brand context. If $ARGUMENTS is short/absent, ask:
Brand name:
Industry / product type:
Target audience:
3 personality adjectives: (e.g. "bold, minimal, human")
Competitors to NOT look like:
Reference brands you admire: (optional)
Primary use: web app / marketing site / mobile app / SaaS / consumer
Color preferences or restrictions: (optional)
Light / dark / both themes:
If $ARGUMENTS contains enough context, skip straight to Phase 1. Parse:
brandName — the nameindustry — what it doesaudience — who foradjectives — personality words (default: "modern, professional, trustworthy")antiReferences — brands to avoid resemblingcolorHints — any color directionbrand — Generate brand personality, archetype, tone of voice, and messaging framework based on parsed context.design-system — Generate color palette, typography selection, and spacing/shape tokens grounded in brand personality.impeccable-frontend-design — Apply visual design standards to ensure the palette, type scale, and radii meet production quality.Generate a cohesive palette derived from brand personality:
Primary: #______ (main brand color — buttons, links, accents)
Secondary: #______ (supporting — hover states, tags, subtle backgrounds)
Accent: #______ (highlight, CTA emphasis, special moments)
Neutral-50: #______
Neutral-100:#______
Neutral-200:#______
Neutral-700:#______
Neutral-900:#______
Success: #______
Warning: #______
Error: #______
Rules:
Select 2 typefaces (all from Google Fonts, no licensing risk):
Display / Heading: ________ — [rationale tied to personality]
Body / UI: ________ — [rationale tied to personality]
Mono (optional): ________ — only if product is dev/technical
Scale (rem, 1.25× modular):
xs: 0.75rem (12px) — captions, labels
sm: 0.875rem (14px) — secondary text, meta
base: 1rem (16px) — body, UI
lg: 1.125rem (18px) — lead text
xl: 1.25rem (20px) — card titles
2xl: 1.5rem (24px) — section headings
3xl: 1.875rem (30px) — page headings
4xl: 2.25rem (36px) — hero titles
5xl: 3rem (48px) — display
Radius tokens:
--radius-sm: 4px (tags, chips)
--radius-md: 8px (inputs, buttons)
--radius-lg: 12px (cards, panels)
--radius-xl: 16px (modals, drawers)
--radius-full: 9999px (pills, avatars)
Shadow tokens:
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08)
--shadow-md: 0 4px 12px rgba(0,0,0,0.10)
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12)
design-system — Generate the full primitive → semantic → dark-theme CSS token file and the W3C JSON token source.Generate brandkit/tokens/design-tokens.css:
/* ── Primitive tokens ──────────────────────────────────── */
:root {
/* Colors */
--color-primary-500: <hex>;
--color-primary-400: <lighter>;
--color-primary-600: <darker>;
/* ... full scale */
/* Typography */
--font-heading: '<Heading Font>', system-ui, sans-serif;
--font-body: '<Body Font>', system-ui, sans-serif;
--font-mono: '<Mono Font>', ui-monospace, monospace;
/* Radii, shadows, spacing scale */
}
/* ── Semantic tokens ───────────────────────────────────── */
:root {
--color-brand: var(--color-primary-500);
--color-brand-hover: var(--color-primary-600);
--color-text: var(--color-neutral-900);
--color-text-muted: var(--color-neutral-600);
--color-bg: var(--color-neutral-50);
--color-surface: #ffffff;
--color-border: var(--color-neutral-200);
}
/* ── Dark theme ────────────────────────────────────────── */
[data-theme="dark"] {
--color-text: var(--color-neutral-50);
--color-bg: var(--color-neutral-950);
--color-surface: var(--color-neutral-900);
--color-border: var(--color-neutral-800);
}
Also generate brandkit/tokens/design-tokens.json in W3C Design Tokens format.
impeccable-frontend-design — Design and generate SVG logo files (primary, mark-only, dark variant, favicon) following logo mark design principles.Generate SVG logos. Rules:
Generate 3 SVG files:
logo-primary.svg — mark + wordmark, horizontal layout, light bglogo-mark.svg — mark only, suitable for favicon/app iconlogo-dark.svg — white version for dark backgroundsimpeccable-frontend-design — Build the full-featured HTML component preview file that applies all design tokens to real UI components.Generate brandkit/components/preview.html — a single HTML file showing the brand applied to real UI:
Must include:
Requirements:
../tokens/design-tokens.css — no hardcoded colors<link> for Google Fonts loaded in the HTMLdata-theme="dark" to <html>)banner-design — Generate the three social banner HTML files (OG image, Twitter/X header, LinkedIn cover) at exact pixel dimensions with inline CSS.Generate 3 HTML banners (exact pixel dimensions, inline CSS):
brandkit/banners/og-image.htmlbrandkit/banners/twitter-header.htmlbrandkit/banners/linkedin-cover.htmlBanner rules (from banner-design skill):
brand — Compile all generated assets into the final brand-guidelines.md with voice, color system, typography, logo usage, and do/don't rules.Generate brandkit/guidelines/brand-guidelines.md:
# [Brand Name] — Brand Guidelines
## Brand Essence
[3-word essence], [archetype], [tagline]
## Personality & Voice
...tone, what it is/isn't, writing style
## Color System
...palette with hex values, usage rules, accessibility notes
## Typography
...typefaces, scale, usage rules, pairing examples
## Logo Usage
...clear space rules, minimum size, approved/prohibited usages
## Component Patterns
...link to preview.html, key UI principles
## Social Media
...banner files, profile photo specs
## Do / Don't
...10 concrete dos and don'ts with rationale
After all phases complete, print a summary:
✓ Brand Strategy brandkit/guidelines/brand-guidelines.md
✓ Design Tokens brandkit/tokens/design-tokens.css + .json
✓ Logo System brandkit/logo/ (3 SVG files + favicon)
✓ Component Preview brandkit/components/preview.html
✓ OG Image brandkit/banners/og-image.html
✓ Twitter Header brandkit/banners/twitter-header.html
✓ LinkedIn Cover brandkit/banners/linkedin-cover.html
Open preview:
open brandkit/components/preview.html
Before completing, verify:
contrast-ratio primary #fff ≥ 4.5)/brandkit-gen Plano — AI proxy infrastructure for enterprise teams. Bold, technical, minimal.
/brandkit-gen Meey — Vietnam real estate platform. Trustworthy, modern, local warmth.
/brandkit-gen InuAuth — developer auth library. Clean, precise, no-nonsense.
Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.
Render, summarize, and present markdown documents and structured content in multiple output modes
Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
基于 SOC 职业分类
