From BYD Next
BYDFi Nex 设计系统样式生成工作流。用于在 Next.js + styled-jsx 项目中生成符合设计约束的页面和组件样式。 当用户需要编写页面样式、组件样式、使用颜色变量、排版变量、间距、主题适配时,必须触发此 skill。
How this skill is triggered — by the user, by Claude, or both
Slash command
/byd-next:design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
本 skill 描述“如何按 BYDFi Nex 设计系统生成 UI / 样式”。CSS 变量、字体、颜色、styled-jsx、响应式、RTL 等硬性规范已迁移到 `.claude/rules` 中维护。
本 skill 描述“如何按 BYDFi Nex 设计系统生成 UI / 样式”。CSS 变量、字体、颜色、styled-jsx、响应式、RTL 等硬性规范已迁移到 .claude/rules 中维护。
.claude/rules/theme.md:--spec-* / --skin-* / --nex-* 变量、颜色、字体、涨跌色、主题与 skin。.claude/rules/styled-jsx.md:<style jsx>、:global()、样式嵌套、动态样式、RTL、响应式。.claude/rules/language.md:用户可见文案与 LANG。.claude/rules/react-tsx.md:组件结构、封装组件、状态与代码质量。.claude/rules/nextjs.md:页面级样式组织、SSR/SSG 边界。.claude/rules/verification.md:验证与汇报。理解 UI 目标
--spec-* / --skin-*,还是 Nex 风格 --nex-*。确定布局结构
应用设计 token
theme.md 选择变量。--nex-font-size-* / --nex-font-height-* 按 theme.md 使用 calc(var(...) * 1px)。补齐响应式与 RTL
MediaInfo 断点。postcss-rtlcss 可转换。处理多语言与可访问性
LANG。验证矩阵
变量详情以 .claude/rules/theme.md 为准,常用类别:
--nex-color-bg-normal-bg1--nex-color-bg-normal-bg2--nex-color-iconfont-primary--nex-color-iconfont-secondary--nex-color-border-1--nex-color-theme-primary--nex-color-function-up--nex-color-function-down--nex-font-family-en--nex-font-size-*--nex-font-height-*--nex-font-weight-*样式检查:
- [ ] 是否遵守 theme.md 的 CSS 变量规则?
- [ ] 是否遵守 styled-jsx.md 的局部样式、:global、嵌套和 RTL 规则?
- [ ] 是否没有硬编码颜色、字体大小、行高、字重?
- [ ] 是否覆盖 PC / Tablet / Mobile?
- [ ] 是否考虑深浅主题、黄蓝 skin、RTL?
- [ ] 用户可见文案是否走 LANG?
交付 UI / 样式改动时,必须说明:
:global() / RTL / 响应式。npx claudepluginhub hawx1993/nextjs-ai-workflow --plugin byd-nextGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.