Agent Skills
› Southclaws/storyden
Southclaws/storyden
GitHub指导将设计适配至不同屏幕、设备或平台，确保多端体验一致。涵盖评估挑战、制定策略及具体响应式布局与交互规范。
安装全部 Skills
npx skills add Southclaws/storyden --all -g -y
集合内 Skills (26)
指导将设计适配至不同屏幕、设备或平台，确保多端体验一致。涵盖评估挑战、制定策略及具体响应式布局与交互规范。
需要将现有设计适配到新设备
进行跨平台界面优化
实现响应式布局调整
npx skills add Southclaws/storyden --skill adapt -g -y
用于创建或优化 Storyden ADK 内置机器人的技能。涵盖设计聚焦的工作流剧本、定义清晰的工具契约与高信号输出，以及构建实用的评估场景，确保机器人自包含且高效执行任务。
创建新的内置机器人
改进现有机器人的工作流
设计工具描述和Schema
编写机器人评估测试用例
npx skills add Southclaws/storyden --skill agent-builder -g -y
分析功能并战略性地添加动画与微交互，以提升用户体验、提供反馈及增加愉悦感。需遵循前端设计原则，评估性能约束，制定包含入口、反馈、过渡和惊喜层的策略，并实施各类入场动画及按钮、表单等微交互细节。
需要为现有功能添加动画效果
优化用户交互的微交互体验
提升界面的视觉反馈和流畅度
npx skills add Southclaws/storyden --skill animate -g -y
专注于优化前端布局、间距和视觉节奏，解决单调网格和不一致间距问题，通过系统性规划创建有意图的构图。
界面布局单调或缺乏结构感
需要优化元素间距和视觉层次
npx skills add Southclaws/storyden --skill arrange -g -y
执行前端界面质量的全面审计，涵盖无障碍、性能、主题和响应式设计。生成包含严重性评级和建议的详细报告，仅记录问题而不修复，供后续命令处理。
需要评估前端代码质量时
检查UI是否符合无障碍或性能标准时
npx skills add Southclaws/storyden --skill audit -g -y
用于增强过于保守或平淡的设计，通过调整排版、色彩和层级提升视觉冲击力与个性，同时确保可用性与品牌一致性。
设计过于安全或普通
需要增加视觉趣味性和记忆点
提升界面吸引力
npx skills add Southclaws/storyden --skill bolder -g -y
优化界面文案、错误提示及微交互文本，通过识别歧义和术语，提升用户体验与产品易用性。
用户询问如何改进界面文案
需要优化错误消息或按钮文字
npx skills add Southclaws/storyden --skill clarify -g -y
为单调或灰暗的界面策略性引入色彩，提升视觉吸引力与情感表达。需先调用frontend-design技能获取上下文，分析色彩机会后制定配色策略，通过语义状态、强调色及背景 tint 系统化地添加颜色，确保每处色彩都有明确目的。
界面设计过于单调或缺乏视觉趣味
需要将灰度界面转化为有层次感的彩色界面
npx skills add Southclaws/storyden --skill colorize -g -y
从UX视角评估设计有效性，涵盖视觉层级、信息架构、情感共鸣等维度。重点检测AI生成痕迹（如过度渐变、玻璃拟态），提供可操作的改进反馈，确保界面直观且符合品牌调性。
需要评估界面设计的用户体验质量
检查设计是否存在AI生成的同质化特征
寻求针对视觉层级和信息架构的专业优化建议
npx skills add Southclaws/storyden --skill critique -g -y
用于在界面中识别并添加提升用户体验的愉悦时刻、个性元素和意外惊喜，将功能性界面转化为令人难忘的体验。涵盖成功、加载、错误等状态的设计策略与微交互技巧。
需要优化界面交互体验
设计微交互动画或彩蛋
增强品牌个性与用户情感连接
npx skills add Southclaws/storyden --skill delight -g -y
该技能用于简化设计，通过移除不必要的复杂性和视觉噪音，提炼核心元素。它指导如何识别复杂度来源，制定精简策略，并从信息架构和视觉层面优化界面，确保设计简洁、清晰且以用户目标为核心。
需要简化现有UI/UX设计
处理视觉混乱或功能冗余的设计
优化信息层级和交互流程
npx skills add Southclaws/storyden --skill distill -g -y
识别并提取可复用的UI组件、设计令牌和模式，将其整合到设计系统中。通过发现、规划、提取和迁移四个步骤，提升代码一致性和可维护性。
需要统一前端组件库时
存在重复的UI实现需重构为共享组件时
硬编码样式值需转换为设计令牌时
npx skills add Southclaws/storyden --skill extract -g -y
指导创建独特、生产级的前端界面，避免通用AI美学。需先收集目标受众和使用场景等上下文，确定大胆的设计方向后生成高质量代码。
构建Web组件
设计页面
制作海报
开发前端应用
npx skills add Southclaws/storyden --skill frontend-design -g -y
提升界面鲁棒性，处理错误、i18n、文本溢出及边界情况，确保生产就绪。
需要增强前端组件的容错能力
处理国际化适配与极端输入测试
修复布局因长文本或特殊字符导致的溢出问题
npx skills add Southclaws/storyden --skill harden -g -y
分析并重构功能以符合设计系统标准，确保UI一致性。通过发现设计系统、分析当前功能并制定计划，规范排版、颜色、组件及可访问性，消除硬编码和自定义偏差。
需要统一UI风格时
修复设计不一致问题时
npx skills add Southclaws/storyden --skill normalize -g -y
专注于设计和优化用户引导流程、空状态及首次体验，帮助用户快速理解产品价值并成功上手。涵盖需求评估、核心设计原则（如展示而非告知、尊重用户智能）及具体场景实现指南。
需要设计新用户引导流程
优化空状态或首次用户体验
npx skills add Southclaws/storyden --skill onboard -g -y
针对前端界面性能进行优化，涵盖加载速度、渲染效率、动画流畅度及资源体积。通过测量核心指标定位瓶颈，并提供图片、JS/CSS、字体等具体优化策略与代码示例。
提升页面加载速度
优化渲染性能
减小资源包体积
改善用户交互流畅度
npx skills add Southclaws/storyden --skill optimize -g -y
专注于通过高难度技术实现突破常规的界面体验，如高性能虚拟表格、复杂动画及交互反馈。要求先结合设计上下文提出多种方案供用户选择，并借助浏览器自动化进行视觉迭代验证，确保效果卓越。
需要实现极具冲击力的前端视觉效果
构建高性能或复杂交互的UI组件
优化界面动画与过渡体验
npx skills add Southclaws/storyden --skill overdrive -g -y
在功能完成后进行最终质量检查，修复视觉对齐、间距、一致性及细节问题。通过系统性审查确保交付物达到高水准，涵盖排版、色彩、交互状态等维度，区分优秀与完美。
代码或设计即将发布前的最终检查
需要提升UI/UX细节质量的场景
npx skills add Southclaws/storyden --skill polish -g -y
用于降低视觉设计强度，通过调整色彩饱和度、对比度、排版层级及简化元素，将过于激进或刺眼的风格转化为精致、柔和且不失影响力的美学表现。
用户反馈界面设计过于花哨或刺眼
需要优化UI的视觉舒适度与优雅感
对现有大胆设计进行降噪处理
npx skills add Southclaws/storyden --skill quieter -g -y
用于扫描React代码库的安全、性能、正确性和架构问题，提供健康评分。支持变更回归检查、全面清理及UI设计审计，通过执行诊断命令并遵循修复流程来优化代码质量。
完成功能开发或修复Bug后提交前
用户输入/doctor请求扫描或清理
npx skills add Southclaws/storyden --skill react-doctor -g -y
一次性收集项目设计上下文并持久化保存，建立持久化的设计指南。通过扫描代码库和询问用户关于品牌、美学及无障碍需求，生成设计规范文档。
需要为项目建立统一的设计规范和视觉指南
初始化项目的 UX/UI 上下文配置
npx skills add Southclaws/storyden --skill teach-impeccable -g -y
用于评估并优化前端排版，修复字体选择、层级、大小及一致性，提升可读性与设计感。
文本排版显得通用或不一致
需要改善字体层级和可读性
npx skills add Southclaws/storyden --skill typeset -g -y
基于CDP的浏览器自动化CLI，支持网页交互、表单填写、截图及数据提取。扩展支持Electron应用、Slack工作区自动化及云端环境，适用于QA测试、探索性验证和程序化Web操作。
需要与网站或Web应用进行交互
执行网页自动化任务如点击、填表、截图
进行软件测试、QA或探索性测试
自动化Electron桌面应用操作
在云沙箱或微VM中运行浏览器任务
npx skills add Southclaws/storyden --skill agent-browser -g -y
专注于前端界面设计与优化的技能，涵盖网站、仪表盘及组件的视觉重构、UX审查、可访问性提升和响应式适配。适用于需要极致的视觉表现、设计系统构建或UI细节打磨的场景。
用户要求设计或重新设计前端界面
需要对UI进行视觉优化、可访问性审计或响应式调整
涉及组件、表单、仪表盘等前端元素的交互与布局改进
npx skills add Southclaws/storyden --skill impeccable -g -y
面向前端界面的高级设计与优化技能，涵盖UI重构、UX审计、视觉 polish、响应式布局及无障碍优化。支持从原型到生产级代码的完整交付，强调创意与规范平衡，适用于网站、仪表盘等所有前端交互场景。
需要设计或重新设计前端界面
对现有UI进行审查、优化或增强
创建高标准的视觉组件或页面
npx skills add Southclaws/storyden --skill impeccable -g -y
