Agent Skills
› The-Vibe-Company/companion
The-Vibe-Company/companion
GitHub指导将设计适配至不同屏幕尺寸、设备及平台，确保跨环境体验一致。涵盖移动、平板和桌面端的布局、交互及内容策略，强调根据上下文重新思考而非简单缩放。
Install All Skills
npx skills add The-Vibe-Company/companion --all -g -y
Skills in Collection (18)
指导将设计适配至不同屏幕尺寸、设备及平台，确保跨环境体验一致。涵盖移动、平板和桌面端的布局、交互及内容策略，强调根据上下文重新思考而非简单缩放。
需要将现有设计适配到新设备或平台
优化多端响应式体验
npx skills add The-Vibe-Company/companion --skill adapt -g -y
分析功能特性，通过添加目的明确的动画、微交互和运动效果来增强用户体验、提供反馈并提升愉悦感。需先收集上下文和设计原则，再制定策略并实施动画。
需要为功能添加动画或微交互
优化用户界面的动效体验
npx skills add The-Vibe-Company/companion --skill animate -g -y
对前端界面的可访问性、性能、主题和响应式设计进行系统性审计，生成包含严重等级和建议的详细报告。仅记录问题而不修复，为后续优化命令提供依据。
需要评估前端代码质量时
检查界面是否符合无障碍标准和设计规范时
npx skills add The-Vibe-Company/companion --skill audit -g -y
用于增强视觉平淡或保守设计的吸引力，通过增加对比度、动态和个性使其更具冲击力。需先收集受众和品牌上下文，并遵循前端设计原则，避免通用AI风格陷阱。
用户要求让设计更引人注目
评价当前设计过于安全或无聊
需要提升界面视觉冲击力
npx skills add The-Vibe-Company/companion --skill bolder -g -y
优化界面文案、错误提示及微交互文本，消除歧义与术语，提升产品易用性与用户体验。
用户反馈界面文字令人困惑
需要改进错误消息或表单标签
npx skills add The-Vibe-Company/companion --skill clarify -g -y
为单调界面引入战略性色彩，提升视觉吸引力与表达力。需先收集受众、用例及品牌色等上下文，结合前端设计规范，制定配色策略并应用于语义状态、层级引导及情感营造，避免随意堆砌颜色。
界面过于单调或灰暗
需要增加视觉趣味性
缺乏视觉层次感
npx skills add The-Vibe-Company/companion --skill colorize -g -y
从UX视角评估界面设计的有效性，涵盖视觉层级、信息架构及情感共鸣等维度。重点检测AI生成痕迹（AI Slop），提供 actionable 反馈以提升整体设计质量与用户体验。
需要评估界面设计质量时
检查设计是否存在AI生成特征时
审查UI/UX体验时
npx skills add The-Vibe-Company/companion --skill critique -g -y
用于在界面中识别并添加提升用户体验的惊喜、个性和细节，将功能性转化为愉悦感。需先收集上下文和受众信息，结合前端设计规范，在成功、加载等状态植入适度且不打扰用户的微交互或情感化设计。
需要优化界面情感化体验
设计微交互或彩蛋
提升用户满意度
npx skills add The-Vibe-Company/companion --skill delight -g -y
用于简化设计，移除冗余复杂性以揭示核心要素。通过收集上下文、评估当前状态并制定精简策略，消除视觉噪音和混乱层级，确保设计简洁、强大且清晰，提升用户体验。
需要简化UI/UX设计
处理设计复杂度或视觉杂乱问题
优化信息架构以提升清晰度
npx skills add The-Vibe-Company/companion --skill distill -g -y
该技能用于识别和提取可复用的UI组件、设计令牌及模式，并将其整合到设计系统中。通过分析重复模式、硬编码值等，制定提取计划并构建具有良好API和文档的可复用资源，最终替换现有代码以提升一致性和维护性。
需要提取可复用UI组件
整理设计令牌和设计系统
统一前端UI模式
npx skills add The-Vibe-Company/companion --skill extract -g -y
指导创建具有独特设计感的生产级前端界面，避免通用AI美学。通过明确的设计方向、排版、色彩和布局规范，生成视觉 striking 且功能完备的代码。
构建网页组件或页面
设计海报或应用程序界面
需要高设计质量的UI实现
npx skills add The-Vibe-Company/companion --skill frontend-design -g -y
提供前端界面加固指南，涵盖极端输入、错误场景及国际化测试，通过CSS和JS代码示例解决文本溢出、布局错乱等问题，提升界面健壮性与生产就绪度。
前端界面健壮性优化
处理文本溢出或布局崩溃
添加国际化(i18n)支持
增强错误处理和边界情况管理
npx skills add The-Vibe-Company/companion --skill harden -g -y
该技能用于分析和重构功能，使其完全符合设计系统的标准、美学和既定模式。通过发现设计规范、分析不一致性并执行规范化修改（如排版、颜色、组件等），确保前端界面的一致性和可用性。
需要统一前端界面风格
修复UI与设计规范不一致的问题
将硬编码样式替换为设计令牌
npx skills add The-Vibe-Company/companion --skill normalize -g -y
指导设计或优化产品引导流程、空状态及新手体验，帮助用户快速理解价值并成功上手。涵盖需求评估、核心原则（如展示而非告知、尊重用户智能）及具体场景设计（欢迎页、账户设置、首次成功引导）。
需要设计新用户引导流程
优化空状态界面
提升新手用户体验
npx skills add The-Vibe-Company/companion --skill onboard -g -y
专注于前端性能优化，涵盖加载速度、渲染效率、图片及包体积优化。通过评估Core Web Vitals等指标定位瓶颈，实施代码分割、资源压缩和懒加载策略，提升用户体验。
需要优化网页加载速度
解决前端渲染卡顿或布局抖动问题
减小JavaScript/CSS/图片包体积
npx skills add The-Vibe-Company/companion --skill optimize -g -y
用于发布前的最终质量检查，修复对齐、间距、一致性和细节问题，涵盖视觉、排版、色彩及交互状态，确保从良好到卓越的转变。
准备发布前进行最终质量审查
修复UI细节与一致性缺陷
npx skills add The-Vibe-Company/companion --skill polish -g -y
用于降低设计视觉强度，将过于激进或强烈的风格调整为更精致、柔和且易于接受的审美，同时保持设计的有效性和影响力。
用户希望减少设计的视觉冲击力
设计过于鲜艳或复杂需要简化
npx skills add The-Vibe-Company/companion --skill quieter -g -y
收集项目设计上下文并持久化保存，通过扫描代码库和询问用户明确品牌、美学及无障碍需求，生成设计指南以指导后续开发。
初始化项目设计规范
建立统一的设计上下文
npx skills add The-Vibe-Company/companion --skill teach-impeccable -g -y
