brand-design-system

スター12

フォーク3

更新日2026年2月10日 20:15

Defines and enforces visual design tokens across all generated components. Ensures brand consistency without re-explaining colors, fonts, or spacing every session.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

ソース

adi0900

adi0900/CmcS-Workflow

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Brand Design System

Purpose

Enforce visual consistency across all components and pages. INPUT: None (system is pre-configured). OUTPUT: All generated code uses these tokens.

When to Use This Skill

Every project. Always active.
Override specific tokens per-project as needed.

Rules (Non-Negotiable)

Never use raw color values. Always reference tokens
Never use inline styles for colors or spacing
Maximum 2 font families (heading + body)
All spacing must use the 8px base unit system
Contrast ratio must meet WCAG AA (4.5:1 minimum)

Design Tokens

Colors

primary:        #B5121C    (Deep Red)
secondary:      #F6C236    (Golden Yellow)
background:     #FAFAFA    (Near White)
surface:        #FFFFFF    (White)
text-primary:   #1A1A1A    (Near Black)
text-secondary: #555555    (Medium Gray)
text-muted:     #888888    (Light Gray)
border:         #E5E5E5    (Border Gray)
success:        #16A34A    (Green)
error:          #DC2626    (Red)
link:           #2563EB    (Blue)

Typography

heading: Inter, system-ui, sans-serif
body:    Inter, system-ui, sans-serif
mono:    JetBrains Mono, monospace

Scale (desktop):
  h1:      48px / 1.1 line-height / 700 weight
  h2:      36px / 1.2 / 700
  h3:      28px / 1.3 / 600
  h4:      22px / 1.4 / 600
  body:    16px / 1.6 / 400
  small:   14px / 1.5 / 400
  caption: 12px / 1.4 / 400

Scale (mobile): Reduce each by ~15%

Spacing (8px base)

xs:      4px
sm:      8px
md:      16px
lg:      24px
xl:      32px
2xl:     48px
3xl:     64px
4xl:     80px
section: 96px

Border Radius

sm:   4px
md:   8px
lg:   12px
xl:   16px
full: 9999px

Shadows

sm: 0 1px 2px rgba(0,0,0,0.05)
md: 0 4px 6px rgba(0,0,0,0.07)
lg: 0 10px 15px rgba(0,0,0,0.1)

Checklist (AI Self-Verification)

No raw color values in code
Only Inter + JetBrains Mono used
All spacing divisible by 4 or 8
Contrast ratio checked on primary text
Font weights limited to 400, 600, 700

このリポジトリの他の Skills

同じリポジトリ

component-architecture

adi0900/CmcS-Workflow

Defines naming conventions, file structure, prop patterns, and composition rules for React/Next.js components. Ensures consistency across the codebase.

2026-02-1012

cro-landing-page

adi0900/CmcS-Workflow

Generates conversion-optimized landing pages using a 9-section framework. Produces mobile-first, fast-loading pages with strategic CTA placement and social proof.

2026-02-1012

responsive-mobile-first

adi0900/CmcS-Workflow

Enforces mobile-first responsive design patterns. All components start at mobile width and scale up using min-width breakpoints. No desktop-first CSS.

2026-02-1012

seo-meta-generation

adi0900/CmcS-Workflow

Auto-generates SEO meta tags, Open Graph data, structured data (JSON-LD), and sitemap entries for every page created.

2026-02-1012

name	brand-design-system
description	Defines and enforces visual design tokens across all generated components. Ensures brand consistency without re-explaining colors, fonts, or spacing every session.
version	1
author	Motion_Viz
tags	["design","brand","tokens","visual"]

Brand Design System

Purpose

Enforce visual consistency across all components and pages. INPUT: None (system is pre-configured). OUTPUT: All generated code uses these tokens.

When to Use This Skill

Every project. Always active.
Override specific tokens per-project as needed.

Rules (Non-Negotiable)

Never use raw color values. Always reference tokens
Never use inline styles for colors or spacing
Maximum 2 font families (heading + body)
All spacing must use the 8px base unit system
Contrast ratio must meet WCAG AA (4.5:1 minimum)

Design Tokens

Colors

primary:        #B5121C    (Deep Red)
secondary:      #F6C236    (Golden Yellow)
background:     #FAFAFA    (Near White)
surface:        #FFFFFF    (White)
text-primary:   #1A1A1A    (Near Black)
text-secondary: #555555    (Medium Gray)
text-muted:     #888888    (Light Gray)
border:         #E5E5E5    (Border Gray)
success:        #16A34A    (Green)
error:          #DC2626    (Red)
link:           #2563EB    (Blue)

Typography

heading: Inter, system-ui, sans-serif
body:    Inter, system-ui, sans-serif
mono:    JetBrains Mono, monospace

Scale (desktop):
  h1:      48px / 1.1 line-height / 700 weight
  h2:      36px / 1.2 / 700
  h3:      28px / 1.3 / 600
  h4:      22px / 1.4 / 600
  body:    16px / 1.6 / 400
  small:   14px / 1.5 / 400
  caption: 12px / 1.4 / 400

Scale (mobile): Reduce each by ~15%

Spacing (8px base)

xs:      4px
sm:      8px
md:      16px
lg:      24px
xl:      32px
2xl:     48px
3xl:     64px
4xl:     80px
section: 96px

Border Radius

sm:   4px
md:   8px
lg:   12px
xl:   16px
full: 9999px

Shadows

sm: 0 1px 2px rgba(0,0,0,0.05)
md: 0 4px 6px rgba(0,0,0,0.07)
lg: 0 10px 15px rgba(0,0,0,0.1)

Checklist (AI Self-Verification)

No raw color values in code
Only Inter + JetBrains Mono used
All spacing divisible by 4 or 8
Contrast ratio checked on primary text
Font weights limited to 400, 600, 700