Agent Skills
› bitjaru/styleseed
bitjaru/styleseed
GitHub针对组件或页面进行无障碍(a11y)静态代码审计,依据WCAG 2.2 AA标准检查对比度、键盘导航等合规性,并自动修复问题。
安装全部 Skills
npx skills add bitjaru/styleseed --all -g -y
集合内 Skills (22)
针对组件或页面进行无障碍(a11y)静态代码审计,依据WCAG 2.2 AA标准检查对比度、键盘导航等合规性,并自动修复问题。
需要检查前端组件的无障碍合规性
发现页面存在视觉或交互可访问性问题
审查UI设计是否符合WCAG标准
npx skills add bitjaru/styleseed --skill ss-a11y -g -y
基于尼尔森十大可用性启发式原则,对移动端界面进行UX审计。检查系统状态可见性、用户控制、一致性、错误预防及美学设计等维度,识别并修复交互与体验问题。
需要评估界面用户体验
检查移动端UI是否符合可用性标准
审查现有屏幕的交互逻辑和视觉规范
npx skills add bitjaru/styleseed --skill ss-audit -g -y
基于StyleSeed方法论构建UI屏幕,通过确立规则、组合语法、代码评分及像素级验证闭环,确保设计一致性与高质量交付。
需要按照特定设计规范生成前端界面
执行StyleSeed构建流程以验证UI质量
npx skills add bitjaru/styleseed --skill ss-build -g -y
根据 StyleSeed 设计规范生成新的 UI 组件。通过读取设计系统种子文件、主题变量和参考组件,严格遵循函数声明、语义化 Token、排版及无障碍标准,输出符合约定的前端组件代码。
需要创建新的 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
快速自动化检查设计系统违规,通过grep扫描硬编码颜色、原始像素值等常见问题,确保UI规范一致性。
检测前端代码中的设计系统违规
Tailwind CSS样式规范检查
npx skills add bitjaru/styleseed --skill ss-lint -g -y
将自然语言动效描述映射为 Framer Motion 代码,支持基于情绪或场景推荐预设动效种子。
用户指定 UI 组件的动效风格(如弹性、平滑)
根据交互场景(如按钮点击、列表加载)请求推荐动效
npx skills add bitjaru/styleseed --skill ss-motion -g -y
基于 StyleSeed 规范快速生成移动端页面脚手架,包含布局模板、样式规则及强制性的代码质量验证流程。
创建新的移动端页面
初始化屏幕结构
npx skills add bitjaru/styleseed --skill ss-page -g -y
根据设计系统原语生成组合式UI模式(如卡片、列表、表单等),复用现有组件并遵循布局规范,避免重复造轮子。
需要生成复合UI结构
构建页面区块或交互模块
npx skills add bitjaru/styleseed --skill ss-pattern -g -y
将设计参考(截图、URL等)编译为项目本地的StyleSeed设计语法规则,包含证据、置信度及验证流程。
用户提供UI设计参考文件
需要将现有界面转化为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
应用单一美学风格配置文件,调整视觉参数如半径、密度和调色板,同时保持输出语法和品牌规范不变,并验证评分。
需要统一界面视觉风格
应用预设美学配置
npx skills add bitjaru/styleseed --skill ss-restyle -g -y
用于审查UI代码是否符合设计系统规范、无障碍标准及最佳实践。检查设计Token合规性、组件约定、可访问性、移动端适配、性能及排版一致性,确保前端界面质量。
需要审查UI组件代码
检查设计系统与代码的一致性
评估前端代码的可访问性和性能
npx skills add bitjaru/styleseed --skill ss-review -g -y
根据StyleSeed规则集对视觉界面实现质量进行0-100分评分,提供分类明细、证据及优先修复建议,用于追踪UI设计一致性。
需要评估UI/前端组件的设计合规性
获取界面质量的量化评分与改进优先级
npx skills add bitjaru/styleseed --skill ss-score -g -y
引导用户配置 StyleSeed 设计锁,通过多步向导确定输出语法、领域、页面类型及品牌约束,最终生成 STYLESEED.md 以规范前端 UI 脚手架。
初始化新项目设计系统
需要为特定页面选择设计语法
配置品牌视觉约束
npx skills add bitjaru/styleseed --skill ss-setup -g -y
用于在 StyleSeed 设计系统中查看、添加或修改设计令牌(颜色、字体等)。支持同步更新 JSON 源文件与 CSS 变量,确保多端一致性。
查询当前设计令牌
新增设计令牌
修改现有设计令牌
npx skills add bitjaru/styleseed --skill ss-tokens -g -y
自动检测并安全更新项目中的StyleSeed引擎文件,对比版本差异并指导用户增量添加新规则、组件和技能,确保操作可逆且不影响现有代码。
需要更新StyleSeed引擎到最新版本
检查当前项目与上游StyleSeed版本的差异
npx skills add bitjaru/styleseed --skill ss-update -g -y
通过渲染UI并截图,基于StyleSeed规则进行视觉验收。在代码审查通过后执行,检查像素级细节如字体、布局和可读性,确保最终视觉效果符合设计规范。
需要验证UI组件的实际视觉呈现效果
代码评分通过后需进行最终的视觉质量检查
npx skills add bitjaru/styleseed --skill ss-verify -g -y
基于StyleSeed引擎的UI/前端代码审查技能,针对React/Tailwind界面检测AI生成特征。通过74条规则对一致性、色彩、排版等维度评分,提供具体修复建议,帮助用户提升界面专业度与完成度。
用户询问为什么UI看起来像AI生成的
需要发布前的设计质量打分或预检
要求将界面修改得更专业、精致或去AI化
npx skills add bitjaru/styleseed --skill styleseed-design-review -g -y


