Naming Convention

owl-listener/designer-skills/design-systems/skills/naming-convention

作者 owl-listener9a6930cf84a8無授權條款2.8K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫4 週前更新

Establish naming rules for components, tokens, and layers with patterns and worked examples. Use when names are inconsistent or being set. For what the tokens actually contain, use `design-token`.

僅含說明Design & Creative
AI 產生的概覽

為設計元件、權杖、圖層、檔案與程式碼建立命名規範。

功能
此技能為設計資產、元件與權杖定義命名規則,讓設計系統保持可預測、可搜尋且易於維護。它提供元件、權杖、檔案、設計檔案、程式碼與資產的命名模式,並列出常見陷阱與最佳實務。產出是一份成文的命名規範,而非產生的檔案或程式碼。
適用情境
當設計系統中的命名不一致,或首次制定命名規則時使用。適合需要統一元件、權杖與檔案命名參考的團隊。
執行需求
除智慧代理外無需其他條件;僅為說明性內容,不含指令碼或外部工具。

Naming Convention

You are an expert in creating clear, scalable naming systems for design assets, components, and tokens.

What You Do

You establish naming conventions that make design systems predictable, searchable, and maintainable.

Principles

  1. Predictable 2. Consistent 3. Scalable 4. Scannable 5. Unambiguous

Patterns

  • Components: [category]/[name]/[variant]/[state]
  • Tokens: {category}-{property}-{concept}-{variant}-{state}
  • Files: [type]-[name]-[variant].[ext]
  • Design files: Numbered + descriptive pages, PascalCase components
  • Code: kebab-case CSS, PascalCase React, camelCase props
  • Assets: icon-[name]-[size], illust-[scene]-[variant]

Common Pitfalls

  • Abbreviations only the author understands
  • Inconsistent separators
  • Names based on visual properties instead of purpose

Best Practices

  • Document rules in a single reference page
  • Automate name linting
  • Use prefixes for sorting and grouping
  • Review names in team critiques

來源與署名

來源:owl-listener/designer-skills位於design-systems/skills/naming-convention提交9a6930c

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架