visual-design-foundations
Create Cohesive Visual Design Systems
Poor visual design leads to inconsistent user experiences and accessibility failures. This skill provides typography, color, spacing, and iconography foundations to build accessible, scalable visual systems.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“visual-design-foundations”。 Create CSS design tokens for a SaaS dashboard with primary blue brand color
预期结果:
- :root {
- /* Typography Scale - Major Third (1.250) */
- --font-size-xs: 0.75rem;
- --font-size-base: 1rem;
- --font-size-lg: 1.25rem;
- --font-size-xl: 1.563rem;
- --font-size-2xl: 1.953rem;
- --font-size-3xl: 2.441rem;
- /* Color Palette - Blue 600 Primary */
- --color-primary: #2563eb;
- --color-primary-hover: #1d4ed8;
- --color-primary-active: #1e40af;
- /* Spacing - 8pt Grid */
- --space-4: 1rem;
- --space-6: 1.5rem;
- --space-8: 2rem;
- }
正在使用“visual-design-foundations”。 Design a dark mode color scheme with semantic tokens
预期结果:
- :root, [data-theme="light"] {
- --color-bg-primary: #ffffff;
- --color-bg-secondary: #f3f4f6;
- --color-text-primary: #111827;
- --color-text-secondary: #4b5563;
- }
- [data-theme="dark"] {
- --color-bg-primary: #1f2937;
- --color-bg-secondary: #111827;
- --color-text-primary: #f9fafb;
- --color-text-secondary: #9ca3af;
- }
安全审计
安全All 144 static findings are FALSE POSITIVES. The scanner misidentified CSS custom properties as shell commands, RegExp.exec() as Python exec(), and hex color codes as cryptographic hashes. This is documentation-only content with no executable code.
质量评分
你能构建什么
Establish Design Tokens for a New Project
Generate a complete design token system including typography scales, color palettes, and spacing variables for a new application or design system.
Improve Visual Hierarchy in Existing UI
Analyze and restructure typography, color, and spacing to create clearer visual hierarchy and improve content readability across a user interface.
Build Accessible Color Systems
Create semantic color tokens with WCAG-compliant contrast ratios for text, backgrounds, and interactive states.
试试这些提示
Create a design token system for [PROJECT TYPE] with typography scale, color palette, and spacing system. Include CSS custom properties.
Generate an accessible [THEME] color palette with semantic tokens for primary, secondary, success, warning, error, and neutral colors. Include WCAG contrast compliance.
Create a modular typography scale using [RATIO] ratio. Include font sizes, line heights, and letter spacing for headings, body text, and UI labels.
Build a comprehensive design system for [APP TYPE] including typography, color, spacing, and iconography guidelines. Reference best practices for [FRAMEWORK] implementation.
最佳实践
- Use modular scales for typography to create harmonious size relationships between text elements
- Establish semantic color tokens (e.g., --color-action-primary) rather than hardcoded values to enable easy theming
- Apply the 8-point grid system consistently for spacing, margins, and padding to create visual rhythm
避免
- Using arbitrary pixel values instead of defined spacing tokens leads to inconsistent visual rhythm
- Hardcoding colors directly in component styles prevents effective theming and dark mode support
- Applying multiple font families or weights unnecessarily creates visual noise and maintenance burden