القائمة
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 ويثبّتها لك.
Defines naming conventions, file structure, prop patterns, and composition rules for React/Next.js components. Ensures consistency across the codebase.
Generates conversion-optimized landing pages using a 9-section framework. Produces mobile-first, fast-loading pages with strategic CTA placement and social proof.
Enforces mobile-first responsive design patterns. All components start at mobile width and scale up using min-width breakpoints. No desktop-first CSS.
Auto-generates SEO meta tags, Open Graph data, structured data (JSON-LD), and sitemap entries for every page created.
استنادا إلى تصنيف SOC المهني
| 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"] |
Enforce visual consistency across all components and pages. INPUT: None (system is pre-configured). OUTPUT: All generated code uses these tokens.
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)
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%
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px
4xl: 80px
section: 96px
sm: 4px
md: 8px
lg: 12px
xl: 16px
full: 9999px
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)