Design Systems 是一个面向网页设计的技能，核心是提供一套框架，帮助做出与众不同、令人记住的视觉设计，避免常见的“AI 套路”审美。资料明确了若干绝对规则，例如生成内容中任何位置都不得使用 emoji，包括标题、正文和按钮文字。
设计流程先要求理解上下文并确定大胆的美学方向：明确目的（解决什么问题、谁使用、期望用户采取什么行动）、语气（不从固定风格清单中挑选，而应从站点主题、行业、文化和受众推导，像被专门聘请的设计师那样研究视觉参考和情绪板）、约束（技术框架、性能、可访问性、品牌规范、内容要求）以及差异化（什么让它令人难忘）。方向要扎根主题，命名应体现概念，例如“Warm Heritage”或“Alpine Elegance”，而不是“Minimalist”这类泛化标签；多个方向需在配色、字体、布局和氛围上真正不同，但都需契合该站点类型。
在前端美学方面，技能给出排版、色彩、动效、空间构图、背景与视觉细节等指导：字体避免 Inter、Roboto、Arial、系统字体和 Space Grotesk 等过度使用的选择，倾向使用有特色的展示字体搭配精致正文字体；字阶保持 1.25 或 1.333 比例，正文至少 16–18px。色彩上强调统一美学，常用 60% 主色、30% 辅色、10% 强调色的比例，避免紫色渐变配白底、均匀彩虹配色、低对比方案以及通用蓝色 #007bff。动效被视为像颜色和字体一样的设计系统元素，优先使用纯 CSS，涵盖入场动画、悬停过渡、持续微动、滚动触发、背景动画和文字效果等，并给出对应 CSS 代码模式及 prefers-reduced-motion 可访问性处理。空间构图上鼓励非对称、重叠、对角线流动、打破网格和负空间等手法。此外还建议使用自定义 SVG 图标，保持一致笔画风格，并根据视觉愿景匹配实现复杂度。
资料未提供安装命令、价格、平台支持范围或具体版本信息，暂未提供相关内容。