Agent Skills
› 10xChengTu/input0
10xChengTu/input0
GitHub指导将设计适配至不同屏幕尺寸、设备及平台，涵盖断点设置、流式布局及触控目标优化。适用于响应式设计、移动端布局及跨设备兼容性场景。
Install All Skills
npx skills add 10xChengTu/input0 --all -g -y
Skills in Collection (21)
指导将设计适配至不同屏幕尺寸、设备及平台，涵盖断点设置、流式布局及触控目标优化。适用于响应式设计、移动端布局及跨设备兼容性场景。
响应式设计
移动端布局
断点适配
视口适配
跨设备兼容性
npx skills add 10xChengTu/input0 --skill adapt -g -y
用于为功能特性添加动画、微交互和运动效果，提升可用性和用户体验。通过评估静态区域和设计上下文，制定策略并实施入场、反馈及过渡动画，同时尊重无障碍偏好。
用户提到添加动画或过渡效果
需要增强微交互或悬停效果
希望使界面更具活力和趣味性
npx skills add 10xChengTu/input0 --skill animate -g -y
用于评估并优化前端界面的布局、间距和视觉层次，解决单调网格、不一致间距及拥挤问题，通过建立系统性间距体系和节奏感提升整体视觉体验。
用户提到布局感觉不对劲
存在间距问题
视觉层次不清
界面过于拥挤
对齐问题
npx skills add 10xChengTu/input0 --skill arrange -g -y
对前端代码进行技术质量审计，涵盖无障碍、性能、主题和响应式设计。生成包含严重等级评分及可执行计划的综合报告，用于发现并记录问题而非直接修复。
用户需要进行前端代码的技术质量审查
用户希望获取关于无障碍访问或性能的审计报告
npx skills add 10xChengTu/input0 --skill audit -g -y
用于提升过于保守或平淡的设计，通过增强排版、色彩和对比度来增加视觉冲击力与个性，同时保持可用性和品牌一致性。
设计看起来平淡无奇
设计过于安全缺乏个性
用户希望增加视觉冲击力
npx skills add 10xChengTu/input0 --skill bolder -g -y
优化界面文案、错误提示及标签，解决表述不清问题，提升用户体验。适用于用户反馈困惑文本或需改进UX写作场景。
用户提到混淆的文本或标签
需要改进错误消息或微文案
希望提升界面易理解性
npx skills add 10xChengTu/input0 --skill clarify -g -y
为单调或缺乏视觉吸引力的界面策略性引入颜色，提升界面的表现力和趣味性。适用于用户反馈设计灰暗、缺乏活力或需要增强色彩层次感的场景。
界面看起来灰色或暗淡
缺乏视觉温暖感
需要更多色彩
想要更生动或富有表现力的配色
npx skills add 10xChengTu/input0 --skill colorize -g -y
用于从UX视角评估设计，涵盖视觉层次、信息架构、情感共鸣及认知负荷，提供量化评分与可执行反馈。适用于审查、批判或评估设计及组件的场景。
用户要求审查设计
用户要求评估界面体验
npx skills add 10xChengTu/input0 --skill critique -g -y
用于为前端界面添加微交互、动画和惊喜元素，提升用户体验的愉悦感与记忆点。适用于需要增加界面个性、趣味性和精致感的场景，确保在不干扰核心功能的前提下增强可用性。
用户要求增加界面趣味性或个性
需要添加微交互或动画效果
优化成功、加载或空状态体验
提升界面的精致感和愉悦度
npx skills add 10xChengTu/input0 --skill delight -g -y
用于简化UI设计，通过移除冗余元素、优化视觉噪音和信息架构，提升界面清晰度与专注度。触发场景包括用户要求简化、去噪或清理界面时。
用户要求简化设计
用户要求去除杂乱元素
用户希望界面更清晰聚焦
npx skills add 10xChengTu/input0 --skill distill -g -y
识别并提取重复的UI模式、组件和设计令牌，将其整合到设计系统中以实现系统化复用。适用于创建组件、重构UI模式或构建设计系统的场景。
用户要求创建可复用的UI组件
用户要求重构重复的UI模式
用户要求构建或完善设计系统
用户要求提取设计令牌
npx skills add 10xChengTu/input0 --skill extract -g -y
指导创建独特、生产级的前端界面，避免通用AI美学。通过强制收集目标受众、用例和品牌调性等上下文，确立大胆的设计方向，并生成注重细节和创意的高品质前端代码。
构建Web组件或页面
设计海报或应用程序
需要项目上下文的任何设计任务
npx skills add 10xChengTu/input0 --skill frontend-design -g -y
通过增强错误处理、国际化支持、文本溢出控制和边缘场景管理，提升前端界面的健壮性与生产就绪状态。
用户要求加固界面或使其具备生产环境能力
需要处理文本溢出、多语言适配或极端输入场景
npx skills add 10xChengTu/input0 --skill harden -g -y
审计并重构 UI，使其与设计系统标准、间距、Token 和模式保持一致。用于解决设计漂移、样式不匹配等问题，确保前端界面符合设计规范。
提及一致性或设计漂移
样式不匹配
Token 使用问题
需要使功能符合系统设计
npx skills add 10xChengTu/input0 --skill normalize -g -y
专注于设计和优化新用户引导流程、空状态及首次运行体验，帮助用户快速触达产品核心价值。适用于涉及新用户激活、上手指南或初始交互优化的场景。
用户提到 onboarding（引导）
涉及 first-time users（新用户）
需要处理 empty states（空状态）
关注 activation（激活）或 getting started（入门）
npx skills add 10xChengTu/input0 --skill onboard -g -y
诊断并修复UI性能问题，涵盖加载速度、渲染、动画及包体积。通过测量核心指标定位瓶颈，提供图片优化、代码分割、CSS精简等系统性策略，旨在提升用户体验和页面响应速度。
用户提到页面加载慢或卡顿
询问如何减小JavaScript/CSS包体积
需要优化Core Web Vitals指标
寻求提升前端渲染性能的方法
npx skills add 10xChengTu/input0 --skill optimize -g -y
用于实现超越常规极限的浏览器高级交互与视觉特效，如60fps动画、着色器及复杂滚动效果。要求先通过前端设计协议收集上下文，提出多种方案供用户选择，并借助浏览器自动化进行视觉迭代验证，确保体验惊艳且符合项目语境。
需要实现令人惊叹的高级UI动效
追求极致的浏览器性能与视觉表现
构建具有电影感或沉浸感的界面交互
npx skills add 10xChengTu/input0 --skill overdrive -g -y
用于在发布前进行最终质量审查，修复视觉对齐、间距、一致性及微细节问题。通过系统性检查确保从良好到卓越的转变，适用于追求完美交付的场景。
用户提到 polish, finishing touches, pre-launch review
感觉界面不对劲或想从好变好
npx skills add 10xChengTu/input0 --skill polish -g -y
用于降低视觉设计强度，处理过于大胆或刺眼的界面。通过调整色彩饱和度、对比度、排版和留白，在保持效果的同时营造更精致、柔和且易读的美学体验。
用户反馈设计太 bold, loud, aggressive, garish
用户希望获得更 calm, refined 的视觉效果
npx skills add 10xChengTu/input0 --skill quieter -g -y
通过扫描代码库和询问用户，收集并持久化项目的UX设计上下文（如品牌、美学、无障碍要求），生成配置文件以指导后续所有开发工作。
需要确立项目设计规范时
初始化AI辅助开发的上下文配置
npx skills add 10xChengTu/input0 --skill teach-impeccable -g -y
优化前端排版，通过调整字体、层级、尺寸和可读性提升文本质感。适用于用户提及字体选择、排版混乱或希望改善视觉层次与阅读体验的场景。
用户提到字体、类型、可读性或文本层级问题
用户反馈文本大小不合适或希望获得更精致的排版
npx skills add 10xChengTu/input0 --skill typeset -g -y
