SuperAPI AI 工具集

rails-design-system

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

这是社区维护的 Ruby on Rails 设计系统指南,面向自动化重构与代码生成,共 51 条规则,分 9 类并按影响优先级排列。覆盖 Rails 前端全栈:Turbo(Drive、Frames、Streams)、Stimulus、ERB partial、设计令牌、表单构建器与视图辅助方法。它与 rails-dev(控制器、模型、查询)和 tailwind(CSS 模式)互补,负责系统化的 UI 组件架构层。

用途:在决定是否抽取 partial、组件或 helper,定义 Tailwind CSS @theme 设计令牌,创建或重构带显式 locals 的 ERB partial,把页面拆成 Turbo Frames 做定向更新,用 Turbo Streams 处理多元素 CRUD,协调 Turbo 导航与 Stimulus 控制器,构建 ViewComponent 或 Phlex 组件,实现自定义 FormBuilder,编写徽章、图标和条件类 helper,添加 Stimulus 控制器,用 Import Maps 管理 JS 依赖,以及审计 UI 重复和命名漂移时参考。

分类与优先级:设计决策(CRITICAL,decide-)、设计令牌(CRITICAL,token-)、Turbo 集成(HIGH,turbo-)、Partial 模式(HIGH,partial-)、组件架构(HIGH,comp-)、表单系统(MEDIUM-HIGH,form-)、Helper 模式(MEDIUM,helper-)、Stimulus 行为(MEDIUM,stim-)、一致性组织(LOW-MEDIUM,org-)。

要点示例:抽取前先在生产验证,同一模式出现 3 次以上再抽象;简单复用用 partial,复杂逻辑用组件;颜色按用途而非外观命名;Turbo Frame 用 dom_id 约定命名;partial 始终显式传 locals;组件定义显式类型参数并用渲染输出断言测试;自定义 FormBuilder 设为应用默认;用 class_names 处理条件类;Stimulus 控制器保持小而单一职责;用 Import Maps 实现零构建 JS;用 Lookbook 预览组件;用 ADR 记录设计决策。

限制:资料未提供安装命令、具体代码示例、版本要求或定价信息。详细解释与代码需查阅各 reference 文件(如 references/_sections.md、assets/templates/_template.md、metadata.json)。