用途：在编码前先确定明确的美学方向，并据此实现可用、可记忆、风格统一的界面。资料强调有意图的设计选择，而非默认模板化风格。
主要能力：提供设计思维与美学准则（排版、配色与主题、动效、空间构图、背景与视觉细节）；列出应避免的“AI 味”模式（如奶油色背景、陶土色点缀、紫蓝渐变、过度圆角、卡片左侧色条、药丸标签等）；给出移动优先响应式方案，如 hero 区在移动端从 grid 切换为 flex 并居中、列表用折叠手风琴替代横向滚动、表单与网格折叠为单列、状态卡片同时使用 align-items: center 与 text-align: center；还包括表单元素一致性、颜色对比度规则与实现前检查清单。
使用方式：作为 Claude 技能使用，先做设计研究，再输出 HTML/CSS/JS 或 React、Vue 等可用代码。资料另列出 Are.na、Mobbin、Logggos、The Noun Project、Artvee、Mockupworld 等参考资源及链接；文档中提及容器查询、流式字号、@layer、逻辑属性等属于对其他章节的引用，未展开。
适用场景：前端界面、落地页、组件与主题系统的设计与实现。
限制：资料未提供具体安装命令、版本、收费、价格与效果数据；未说明平台依赖。具体实现需自行判断。