菜单
Applies Patterson brand tokens, spacing, and voice when generating UI. Use when building any Patterson page, component, or deck.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Design anything on-brand for Patterson Companies (oral & animal health distribution). Use whenever the user asks for Patterson-branded UI, pages, mocks, decks, components, styling, colors, typography, or brand review. Contains tokens, components, logos, fonts, and framework adapters.
Build a Patterson-branded web page (marketing, landing, informational). Use when the user asks for a Patterson web page, landing page, or site section. Scaffolds a React shell with sticky nav, navy hero, content band, and footer wired to brand tokens and components.
Build screens in the style of the Patterson Companies corporate website. Use when the user asks for corporate-site pages, investor/newsroom pages, or wants to extend the pattersoncompanies.com look. Ships header, footer, home, what-we-do and newsroom screens as React components.
Build a Patterson Companies branded slide deck (16:9 presentation). Use when the user asks for a Patterson deck, presentation, slides, or company overview. Scaffolds from the official deck template with cover, divider, stats, comparison, quote, table, photo-band and closing archetypes.
Build Patterson-branded documentation sites and doc pages. Use when the user asks for Patterson docs, a documentation site, developer docs, knowledge base, or help center. Ships a VitePress/Diátaxis-styled React UI kit and a standalone docs page template.
Build a Patterson Companies executive briefing deck. Use when the user asks for an executive deck, leadership briefing, board-style presentation, or formal readout in the Patterson brand. Denser, editorial layout compared to the standard deck.
| name | patterson-design-context |
| description | Applies Patterson brand tokens, spacing, and voice when generating UI. Use when building any Patterson page, component, or deck. |
:root { --pat-navy: #003767; --pat-sky: #00A8E1; --pat-gray: #58585B; }
Rules: reference tokens, never raw hex; 8px spacing grid; sentence case.
Color is one of the most important aspects of any design system. Colors carry meaning, and meaning carries brand equity. The navy we use, #003767, was chosen after extensive research into the dental and veterinary markets, where trust and calm are paramount. Sky #00A8E1 provides energetic contrast while remaining professional. When you consider spacing, remember that an 8px base grid has been industry standard for a decade because it divides evenly into common viewport sizes. Accessibility matters too: always check contrast ratios against WCAG AA, which requires 4.5:1 for body text and 3:1 for large text.
Color is one of the most important aspects of any design system. Colors carry meaning, and meaning carries brand equity. The navy we use, #003767, was chosen after extensive research into the dental and veterinary markets, where trust and calm are paramount. Sky #00A8E1 provides energetic contrast while remaining professional. When you consider spacing, remember that an 8px base grid has been industry standard for a decade because it divides evenly into common viewport sizes. Accessibility matters too: always check contrast ratios against WCAG AA, which requires 4.5:1 for body text and 3:1 for large text.
Color is one of the most important aspects of any design system. Colors carry meaning, and meaning carries brand equity. The navy we use, #003767, was chosen after extensive research into the dental and veterinary markets, where trust and calm are paramount. Sky #00A8E1 provides energetic contrast while remaining professional. When you consider spacing, remember that an 8px base grid has been industry standard for a decade because it divides evenly into common viewport sizes. Accessibility matters too: always check contrast ratios against WCAG AA, which requires 4.5:1 for body text and 3:1 for large text.