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
执行前端界面质量审计，涵盖无障碍、性能、主题及响应式设计维度。生成包含严重度评级和修复建议的详细报告，仅记录问题而不进行修复，为后续优化提供依据。
需要评估前端界面整体质量时
检查代码是否存在设计反模式或AI生成痕迹时
在修复前需全面了解可访问性和性能问题时
npx skills add The-Vibe-Company/companion --skill audit -g -y
用于增强视觉设计冲击力，将安全或平淡的设计转化为更具吸引力和记忆点的体验。通过收集上下文、分析当前状态并制定放大策略，在保持可用性的前提下提升设计的个性与表现力。
用户希望提升现有设计的视觉吸引力
设计过于保守、通用或缺乏亮点
需要增加界面的戏剧性或独特性
npx skills add The-Vibe-Company/companion --skill bolder -g -y
优化界面文案、错误提示及微文案，提升产品易用性与清晰度。
优化UX文案
改进错误消息
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生成特征
获取UX维度的专业修改建议
npx skills add The-Vibe-Company/companion --skill critique -g -y
识别界面中可增强用户体验的惊喜时刻，结合品牌与受众背景，设计不干扰核心功能的微交互、动画或文案，提升界面的趣味性与记忆点。
需要为界面添加情感化设计或惊喜元素
优化成功、加载、空状态等场景的用户体验
npx skills add The-Vibe-Company/companion --skill delight -g -y
用于简化设计、去除不必要复杂性并提炼核心要素的 Skill。通过收集上下文、分析复杂度来源并制定精简策略，实现清晰高效的设计，强调以用户目标为导向的极简主义。
需要简化现有设计方案
移除设计中的冗余元素和视觉噪音
优化信息架构以提升清晰度
npx skills add The-Vibe-Company/companion --skill distill -g -y
识别并提取可复用的UI组件、设计令牌和模式，将其整合至设计系统以提升一致性。
发现重复的UI组件或硬编码值
需要统一设计规范或构建共享库
npx skills add The-Vibe-Company/companion --skill extract -g -y
指导创建独特、生产级的前端界面，避免通用AI美学。用于构建网页组件、页面及应用，强调大胆的设计方向、排版、色彩及布局细节，生成高质量代码。
用户要求构建前端界面或组件
需要提升UI设计质量与独特性
npx skills add The-Vibe-Company/companion --skill frontend-design -g -y
提升前端界面健壮性，处理文本溢出、国际化、错误场景及极端输入等边缘情况，确保生产环境可用性。
前端界面测试与优化
处理文本溢出或布局异常
实现国际化适配
增强错误状态展示
npx skills add The-Vibe-Company/companion --skill harden -g -y
将功能重构以符合设计系统规范，通过替换组件、统一样式和Token，确保UI一致性、可访问性和用户体验。
需要统一界面风格
修复UI不一致问题
遵循设计规范重构
npx skills add The-Vibe-Company/companion --skill normalize -g -y
用于设计和优化产品引导流程、空状态及首次用户体验，帮助用户快速理解价值并成功上手。
设计新手引导流程
优化空状态体验
提升新用户激活率
npx skills add The-Vibe-Company/companion --skill onboard -g -y
前端性能优化技能，涵盖加载、渲染及资源压缩。通过测量核心指标定位瓶颈，实施图片、JS/CSS精简、代码分割及字体优化等策略，提升页面速度与流畅度。
用户报告页面加载慢或卡顿
需要降低前端资源体积
提升 Core Web Vitals 评分
npx skills add The-Vibe-Company/companion --skill optimize -g -y
用于在功能完成后进行最终质量审查，修复视觉对齐、间距、一致性等细节问题，确保产品达到发布标准。
需要检查UI/UX细节
准备发布前的最终验收
npx skills add The-Vibe-Company/companion --skill polish -g -y
用于降低设计视觉强度，使过于大胆或激进的设计变得精致且易读。需先收集上下文并调用前端设计技能，随后通过调整色彩、层级和简化元素来优化体验。
用户要求降低设计的视觉冲击力
设计显得过于鲜艳、复杂或具有攻击性
npx skills add The-Vibe-Company/companion --skill quieter -g -y
收集项目设计上下文并持久化至AI配置，为后续工作建立统一的设计规范与指导原则。
初始化项目设计上下文
建立或更新设计规范
npx skills add The-Vibe-Company/companion --skill teach-impeccable -g -y
