メニュー
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Jason904/ui-skill-lab --skill ckm-brandコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. It expands screenshot-derived visual specs into a production design system by adding interaction states, responsive behavior, accessibility rules, UX checklist, and implementation constraints without overriding UI type, layout paradigm, component tree, rejected assumptions, or asset strategy.
This skill should be used when the user asks to convert a PRD, OpenSpec change, or product idea into a structured GPT Image 2 UI prompt pack for generating high-fidelity flat UI reference images. It produces prompt materials, UI type decisions, variants, negative prompts, and reference selection checklists, not frontend code.
This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type, layout paradigm, and asset strategy. It reports violations without redesigning or modifying code.
SOC 職業分類に基づく
SKILL.md を表示中
| name | ckm:brand |
| description | Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides. |
| argument-hint | [update|review|create] [args] |
| metadata | {"author":"claudekit","version":"1.0.0"} |
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}.md