Agent Skills
› bitjaru/styleseed
bitjaru/styleseed
GitHub用于审计前端组件或页面的无障碍访问性问题,依据 WCAG 2.2 AA 标准检查色彩对比度、键盘导航、语义标签等,并提供修复建议。
Install All Skills
npx skills add bitjaru/styleseed --all -g -y
Skills in Collection (50)
用于审计前端组件或页面的无障碍访问性问题,依据 WCAG 2.2 AA 标准检查色彩对比度、键盘导航、语义标签等,并提供修复建议。
需要检查代码的可访问性合规性
修复 UI 组件的无障碍问题
验证色彩对比度和键盘交互
npx skills add bitjaru/styleseed --skill ss-a11y -g -y
基于尼尔森可用性启发式规则检查屏幕的UX问题,涵盖状态可见性、匹配现实世界、用户控制等十个维度。
审查界面交互体验
评估可用性设计缺陷
npx skills add bitjaru/styleseed --skill ss-audit -g -y
基于 StyleSeed 方法构建前端界面,涵盖规则解析、设计编排、代码实现及像素级验证闭环。
需要按照品牌规范和设计语法生成前端页面代码
对已生成的 UI 组件进行合规性评分与像素级审查
npx skills add bitjaru/styleseed --skill ss-build -g -y
根据 StyleSeed 设计规范生成新的 UI 组件,支持注册表优先模式,严格遵循设计令牌、语义化类名、无障碍及 TypeScript 类型规范。
需要创建新的 UI 组件
遵循 StyleSeed 规范生成前端界面元素
npx skills add bitjaru/styleseed --skill ss-component -g -y
用于生成符合休闲礼貌语气的UX微文案,包括按钮、错误提示、空状态和Toast。遵循特定语调规则,区分上下文模式,适用于单语言界面文本优化。
需要生成UI界面的按钮标签
编写错误提示信息或空状态文案
创建Toast通知内容
npx skills add bitjaru/styleseed --skill ss-copy -g -y
将设计系统单一维度(如密度、间距)按确定化阶梯调整,批量更新相关Token并遵守约束规则。确保全局一致性,避免手动修改导致的碎片化问题,适用于需要精确控制设计参数的场景。
用户要求调整单一设计属性(如更紧凑、更稀疏)
需要在不破坏现有规范前提下系统性变更设计参数
npx skills add bitjaru/styleseed --skill ss-dial -g -y
为组件或页面添加加载、成功、错误和空状态等用户反馈UI,确保骨架屏匹配布局、空状态引导操作、错误状态提供重试及Toast提示。
需要为数据依赖区域实现加载骨架屏
需要添加空状态或错误处理UI
npx skills add bitjaru/styleseed --skill ss-feedback -g -y
设计用户流程与导航结构,遵循 UX 原则。生成流程图、屏幕清单及边缘情况处理,输出 ASCII 流程图并指导后续页面实现,适用于单流程的信息架构设计。
需要设计用户操作流程
规划应用导航结构
定义多步骤交互流程
npx skills add bitjaru/styleseed --skill ss-flow -g -y
将人类批准的UI设计修正转化为通用规则,严格遵循隐私最小化原则。流程包括初始化、草稿生成、人工审核及可选分享包准备,禁止上传代码或敏感数据,确保本地安全与合规。
用户要求记住设计经验
用户要求从已接受的修正中提炼通用规则
用户要求审查设计决策并准备可复用规则
npx skills add bitjaru/styleseed --skill ss-learn -g -y
快速自动化设计系统代码审查,通过正则扫描检测硬编码颜色、像素值、旧宽高语法等常见规范违规,秒级运行,适用于文件变更后的即时检查。
需要快速检查设计系统规范合规性
文件变更后进行即时 lint 扫描
npx skills add bitjaru/styleseed --skill ss-lint -g -y
将自然语言描述或品牌风格映射为 Framer Motion 动画种子,生成 React JSX 组件动效代码。
用户需要为 UI 组件添加特定风格的入场、悬停或点击动画
用户通过情感词汇(如弹性、丝滑)指定动画感觉
用户通过使用场景(如按钮、模态框)推荐默认动效
npx skills add bitjaru/styleseed --skill ss-motion -g -y
基于 StyleSeed 规范生成新的产品页面或屏幕骨架,自动适配品牌配方、响应式布局及语义化设计令牌。
需要创建全新的产品页面
根据 StyleSeed 语法生成页面结构
npx skills add bitjaru/styleseed --skill ss-page -g -y
基于StyleSeed语法和品牌配方,组合现有UI原语生成可复用的界面模式。支持布局、数据展示及交互等多种类型,强调组件复用与语义化设计。
需要生成特定类型的UI组合模式
根据品牌配方构建界面组件
npx skills add bitjaru/styleseed --skill ss-pattern -g -y
将截图、URL或设计稿编译为项目本地样式语法,包含证据、令牌和置信度。通过严格工作流解析参考源,生成规则集并验证迁移效果,确保设计一致性。
用户提供UI设计参考(截图/链接/Figma)
需要将外部设计转化为项目内部样式规范
执行设计参考编译器流程
npx skills add bitjaru/styleseed --skill ss-reference -g -y
解析 StyleSeed 配置,编译生成确定性规则包、语法、适配器等上下文文件。用于在构建前或配置变更时替代加载完整手册,确保 Agent 使用正确的样式上下文。
STYLESEED.md 发生变更
需要更新 StyleSeed 上下文
Agent 准备加载规则但需避免加载完整手册
npx skills add bitjaru/styleseed --skill ss-resolve -g -y
应用StyleSeed美学配置,在不改变输出语法和核心设计的前提下,协调视觉属性。
需要统一或调整界面美学风格时
选择并应用预设的美学配置文件时
npx skills add bitjaru/styleseed --skill ss-restyle -g -y
用于审查UI代码是否符合设计系统规范、无障碍标准及最佳实践。涵盖Token使用、组件约定、可访问性、性能及排版等检查项,确保前端界面质量与一致性。
需要检查UI代码是否符合设计规范
评估前端组件的可访问性和性能
npx skills add bitjaru/styleseed --skill ss-review -g -y
对视觉组件实现质量进行0-100分评分,提供类别分解、证据及优先级修复建议。通过解析StyleSeed规则集并运行确定性检查器,生成标准化报告以追踪UI质量。
需要评估视觉组件的实现质量得分
获取UI缺陷的优先级修复建议
运行StyleSeed确定性扫描以生成质量证据
npx skills add bitjaru/styleseed --skill ss-score -g -y
StyleSeed 初始化向导,引导用户选择输出语法、领域、页面类型、品牌配方及调色板,为前端界面生成提供设计约束与方法论。
配置 StyleSeed 项目初始设置
为新页面或产品选择设计方法与品牌规范
npx skills add bitjaru/styleseed --skill ss-setup -g -y
将产品简报转化为三个创意方向、交互计划及UI原型。通过角色参考侦察、生成多方向方案、用户选择后编译场景与媒体任务,最终产出可验证的原型展示,适用于概念设计与交互探索。
需要多个静态屏幕的交互探索
客户端概念设计
趋势但连贯的UI方向制定
npx skills add bitjaru/styleseed --skill ss-studio -g -y
管理StyleSeed设计令牌,支持从关键色生成语义调色板、查看及增删改颜色/排版等令牌。适用于前端样式系统构建与主题管理。
用户需要提供基于品牌色的配色方案
用户需要创建或修改CSS变量和Tailwind令牌
npx skills add bitjaru/styleseed --skill ss-tokens -g -y
通过渲染UI并截图,以视觉方式验证界面是否符合StyleSeed规则。在代码审查通过后执行最终像素级检查,发现并修复排版、字体及色彩等视觉问题,确保设计质量。
需要验证UI视觉效果
代码已清洁但需确认像素级设计
检查前端组件渲染表现
npx skills add bitjaru/styleseed --skill ss-verify -g -y
StyleSeed请求的路由技能,用于解析项目工件边界并精确选择一个首个工作流(如设置、构建、参考、审计等),避免盲目发散或复制完整手册。
用户一般性询问StyleSeed帮助
需要确定首个执行工作流的模糊场景
npx skills add bitjaru/styleseed --skill styleseed -g -y
将人工批准的UI设计修正转化为通用规则,全程本地处理以保护隐私。支持初始化、草稿生成、人工审核及准备可选分享包,严禁上传代码或敏感数据。
用户要求从已批准的设计修正中学习或总结通用规则
需要审查并准备可复用的设计决策记录用于分享
npx skills add bitjaru/styleseed --skill ss-learn -g -y
用于审计前端组件或页面的无障碍访问问题,基于 WCAG 2.2 AA 标准检查对比度、键盘导航等,并提供修复建议。
需要检查代码的无障碍合规性
发现 UI 组件存在可访问性问题
npx skills add bitjaru/styleseed --skill ss-a11y -g -y
基于尼尔森十大可用性原则和现代移动端最佳实践,对UI屏幕进行UX审计。检查状态反馈、语言匹配、用户控制、一致性等维度,识别可用性问题并提供改进建议。
需要评估界面用户体验质量
检查交互设计是否符合可用性启发式原则
审查移动端界面的导航和反馈机制
npx skills add bitjaru/styleseed --skill ss-audit -g -y
基于 StyleSeed 方法构建 UI 界面。通过解析规则集、应用品牌配方与约束,执行代码生成及像素级验证循环,确保设计一致性与高质量交付。
需要按照特定设计规范或品牌指南构建用户界面
要求对生成的 UI 组件进行自动化评分和像素级质量检查
npx skills add bitjaru/styleseed --skill ss-build -g -y
根据 StyleSeed 设计规范生成新的 UI 组件,支持注册表优先解析。遵循严格的代码约定、设计令牌、排版及无障碍标准,输出符合项目规范的 React 组件文件。
需要创建新的 UI 组件
遵循 StyleSeed 规范生成前端组件
npx skills add bitjaru/styleseed --skill ss-component -g -y
生成符合休闲礼貌语气的UX微文案,包括按钮、错误提示、空状态和Toast。严格遵循设计语言规范,确保简洁积极。
需要生成界面微文案
优化现有按钮或错误信息
npx skills add bitjaru/styleseed --skill ss-copy -g -y
通过确定性阶梯调整单一设计轴(如密度、圆角),协调更新所有相关Token,并强制遵守无障碍等规则与质量门禁,确保UI变更的一致性与规范性。
用户要求针对特定视觉维度进行微调
需要批量统一修改设计变量以保持系统一致性
npx skills add bitjaru/styleseed --skill ss-dial -g -y
为组件或页面添加加载、成功、错误、空状态等用户反馈UI,遵循设计语言规范实现骨架屏、提示及重试逻辑。
需要添加数据加载反馈
需要处理页面空状态
需要实现错误提示与重试
npx skills add bitjaru/styleseed --skill ss-feedback -g -y
专注于设计用户流程和导航结构,遵循UX原则如渐进式披露和认知负荷管理。基于注册表优先策略读取项目资产,生成包含流程图、屏幕清单及边缘情况的输出,为后续页面实现提供结构化指导。
需要设计用户操作流程
规划应用或网页的导航结构
进行信息架构梳理
npx skills add bitjaru/styleseed --skill ss-flow -g -y
将人工批准的UI设计修正转化为通用规则,通过本地CLI进行隐私脱敏、草稿生成、人工审核及可选分享包准备,不传输代码或敏感数据。
用户要求记住或学习已接受的设计修正
用户要求从成功设计中提取可复用规则
npx skills add bitjaru/styleseed --skill ss-learn -g -y
快速自动化设计系统代码检查工具,通过 grep 扫描检测硬编码颜色、像素值等常见违规,支持 JSON/SARIF 输出,用于 CI/CD 中快速验证设计一致性。
需要快速检查设计系统规范违规时
CI/CD 流水线中执行自动化 lint 检查时
npx skills add bitjaru/styleseed --skill ss-lint -g -y
将用户描述的风格或组件场景映射为 Framer Motion 的特定动效种子,生成 React JSX 代码。专注于单组件动画,排除全局滚动时间轴或非 React 动效。
需要为 UI 组件添加入场、悬停或点击动效
根据品牌风格词(如 bouncy, smooth)选择对应动效种子
npx skills add bitjaru/styleseed --skill ss-motion -g -y
基于 StyleSeed 规范脚手架化生成新产品页面,解析设计语法并应用适配器和品牌配方。
需要创建新的产品页面或屏幕
根据 StyleSeed 输出构建前端页面结构
npx skills add bitjaru/styleseed --skill ss-page -g -y
根据 StyleSeed 语法和品牌配方,组合现有基础组件生成可复用的 UI 模式。支持布局、数据展示和交互等多种模式,强调遵循规范并使用语义化 Token。
需要生成复合 UI 组件或模式时
基于品牌配方组合多个原子组件时
npx skills add bitjaru/styleseed --skill ss-pattern -g -y
将设计参考(截图、URL等)编译为项目本地的 StyleSeed 设计语法,包含证据、令牌及验证流程。
用户提供 UI 设计参考并要求生成设计规范
需要将现有界面或 Figma 导出转换为 StyleSeed 格式
npx skills add bitjaru/styleseed --skill ss-reference -g -y
解析并编译 StyleSeed 规则包,生成确定的设计上下文(语法、适配器、领域等)。用于在配置变更或构建前替代加载完整手册,支持锁定文件与注册表模式,确保设计系统一致性。
STYLESEED.md 发生变更时
需要更新 StyleSeed 配置时
Agent 构建或设置前需加载精简规则包时
npx skills add bitjaru/styleseed --skill ss-resolve -g -y
应用 StyleSeed 美学配置文件,在不改变输出语法和产品核心设计的前提下,协调视觉风格。流程包括验证锁定、选择配置、应用参数并更新文档,确保符合品牌规范与设计原则。
用户请求应用特定美学风格
需要统一界面视觉表现
执行 /ss-restyle 命令
npx skills add bitjaru/styleseed --skill ss-restyle -g -y
审查UI代码是否符合设计系统规范、无障碍标准及最佳实践。检查设计令牌合规性、组件约定、可访问性、性能及排版,确保前端界面质量。
审查UI组件代码
检查设计系统合规性
评估前端无障碍性
npx skills add bitjaru/styleseed --skill ss-review -g -y
根据 StyleSeed 规则集对视觉组件实现进行 0-100 分质量评分,提供分类详情、证据及优先级修复建议。
需要评估 UI/视觉组件的实现质量分数
生成可视化产物的合规性审计报告
npx skills add bitjaru/styleseed --skill ss-score -g -y
StyleSeed初始化配置技能,引导用户完成设计方法、输出语法、页面类型、品牌配方及色彩方案的选择,为前端界面脚手架生成提供标准化约束。
需要初始化StyleSeed配置
选择UI设计语法与品牌风格
生成首个屏幕的脚手架结构
npx skills add bitjaru/styleseed --skill ss-setup -g -y
将产品简报转化为三个创意方向,生成交互计划、媒体资产任务、UI原型及展示视频。适用于客户端概念验证、应用交互探索和趋势UI设计,支持从构思到可验证原型的完整流程。
需要多个静态屏幕以上的复杂UI/交互探索
基于产品简报生成多方向创意方案
创建带交互逻辑的UI原型和展示 reel
npx skills add bitjaru/styleseed --skill ss-studio -g -y
管理StyleSeed设计令牌,支持生成语义化调色板、查看及修改颜色、排版等令牌文件。用于前端主题设计与实现,确保令牌符合CSS变量规范并自动解析。
需要基于关键色生成完整调色板
询问颜色搭配或主题角色
添加或更新设计令牌文件
npx skills add bitjaru/styleseed --skill ss-tokens -g -y
通过渲染UI并截图进行视觉审查,检查像素级细节如布局、字体和颜色,确保符合样式规则。在代码评分后作为最终关卡使用,修复视觉问题直至通过。
需要验证UI视觉设计是否符合规范
代码评分通过后需进行像素级视觉审查
检查渲染后的实际显示效果而非仅源码
npx skills add bitjaru/styleseed --skill ss-verify -g -y
基于StyleSeed引擎对React/Tailwind等UI代码进行设计审查,评估一致性、色彩、层级等7项指标并打分,提供修复建议以消除AI生成痕迹。
UI界面看起来不专业或未完成
需要上线前的设计评分检查
要求提升界面专业度和设计感
npx skills add bitjaru/styleseed --skill styleseed-design-review -g -y
StyleSeed 路由技能,用于将用户请求精准分发至首个工作流。通过解析项目工件边界,依据明确规则选择如构建、审计或参考等具体子技能,避免盲目执行所有技能。
用户询问 StyleSeed 通用帮助
需要确定首个执行的工作流
npx skills add bitjaru/styleseed --skill styleseed -g -y
用于检查并更新 StyleSeed 引擎载荷,保留项目设计决策后重新编译验证。通过只读版本比对确定状态,避免覆盖用户文件,适用于已有安装的技能升级场景。
StyleSeed 安装版本过时需要升级
检查当前 StyleSeed 引擎与发布版本的差异
npx skills add bitjaru/styleseed --skill ss-update -g -y
Dependencies:
bitjaru/styleseed
检查并更新 StyleSeed 安装,通过精确规则修订引擎负载,保留项目设计决策,重新编译并验证有效包。
需要升级 StyleSeed 引擎版本时
执行 /ss-update 命令进行常规维护更新时
npx skills add bitjaru/styleseed --skill ss-update -g -y
Dependencies:
bitjaru/styleseed


