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
分析功能并添加动画、微交互和运动效果,提升可用性与体验。用于处理用户提到的动画、过渡、悬停效果等需求,旨在让界面更生动且符合无障碍标准。
用户提到添加动画或过渡效果
需要增强微交互或悬停效果
希望提升UI的生动感和用户体验
npx skills add 10xChengTu/input0 --skill animate -g -y
专注于UI布局、间距及视觉层次优化的技能。通过评估当前设计的单调性、拥挤度和结构弱点,制定系统性的间距与层级改进计划,解决对齐、排版节奏等问题,提升界面视觉美感与信息传达效率。
用户提到布局感觉不对或视觉层次弱
存在间距不一致或混乱问题
界面拥挤或需要改善构图
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视角评估界面设计,涵盖视觉层次、信息架构、情感共鸣及AI生成痕迹检测,提供量化评分与可执行反馈。
审查设计或组件
请求对设计进行批评或评估
获取设计反馈
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模式
构建设计系统
提取设计令牌
npx skills add 10xChengTu/input0 --skill extract -g -y
指导创建独特、生产级的前端界面,避免通用AI美学。要求收集目标受众等上下文,确定大胆的设计方向,并实现具有卓越审美细节和功能性的代码。
构建网页组件或页面
设计应用程序界面
生成海报或视觉内容
npx skills add 10xChengTu/input0 --skill frontend-design -g -y
提升界面鲁棒性与生产就绪状态,处理极端输入、错误场景及国际化适配。涵盖文本溢出控制、Flex/Grid布局优化、RTL支持及多语言字符集兼容,确保系统在真实复杂环境下稳定运行。
用户要求加固界面或使其具备生产就绪能力
需要处理文本溢出、换行或截断问题
涉及国际化(i18n)、RTL语言或多语言字符集适配
需添加错误状态处理或边界情况管理
npx skills add 10xChengTu/input0 --skill harden -g -y
审计并重构UI以符合设计系统规范,对齐间距、Token及组件模式。适用于修复样式漂移、统一设计规范或提升界面一致性的场景。
用户提到一致性、设计漂移或不匹配样式
需要将功能对齐到设计系统标准
npx skills add 10xChengTu/input0 --skill normalize -g -y
指导设计并优化用户引导流程、空状态及首次运行体验,帮助用户快速触达核心价值。涵盖需求评估、核心原则(如展示而非告知、尊重用户)及具体场景设计。
用户提到 onboarding
涉及新用户流程
处理空状态设计
关注激活或上手体验
npx skills add 10xChengTu/input0 --skill onboard -g -y
诊断并修复前端UI性能问题,涵盖加载速度、渲染效率、动画流畅度及打包体积。通过测量Core Web Vitals等指标定位瓶颈,提供图片、JS/CSS优化及代码分割等系统性改进方案,提升用户体验。
用户提到页面加载慢、卡顿或掉帧
需要优化首屏时间或减小资源包体积
询问如何提升渲染性能或动画流畅度
npx skills add 10xChengTu/input0 --skill optimize -g -y
用于实现突破常规的极致前端交互与视觉效果,涵盖高性能动画、复杂滚动效果及沉浸式体验。需在构建前提供多种方案供用户选择,并通过浏览器自动化验证视觉表现,确保界面既惊艳又符合项目语境。
需要实现令人印象深刻的视觉效果
追求极致的用户交互体验
开发高帧率动画或复杂页面过渡
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/overwhelming
需要更 calm/refined 的美学风格
npx skills add 10xChengTu/input0 --skill quieter -g -y
收集项目设计上下文并持久化保存,建立统一的设计规范。通过扫描代码库和询问用户明确品牌、审美及无障碍需求,生成设计指南文件以指导后续开发。
需要为项目建立或更新设计规范
初始化AI助手的设计上下文配置
npx skills add 10xChengTu/input0 --skill teach-impeccable -g -y
专注于前端排版优化,通过规范字体选择、层级结构、字号比例及可读性,解决文本外观随意或不一致问题,打造专业且意图明确的视觉体验。
用户提到字体或排版问题
需要提升文本可读性或层级清晰度
希望获得更精致的排版效果
npx skills add 10xChengTu/input0 --skill typeset -g -y


