mcpField
H
HA Dashboard Design

HA Dashboard Design

github.com/tonylofgren设计与 UI10954 次安装6 天前更新
代码仓库

关于 HA Dashboard Design

为配置 Home Assistant 仪表板的用户提供可直接复制的主题样式和 YAML 卡片区块。涵盖多种视觉风格与常见卡片，并说明如何替换实体 ID。

主要功能

  1. 01九种仪表板视觉风格
  2. 02主题 YAML 与卡片区块
  3. 03传感器、气候和媒体卡片
  4. 04安防、能源和灯光卡片
  5. 05图像生成提示词参考
  6. 06Home Assistant 仪表板配置指南

适用场景

  1. 01创建主题化 Home Assistant 仪表板
  2. 02添加传感器或气候显示
  3. 03构建房间和设备快捷卡片网格
  4. 04生成风格匹配的仪表板背景

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tonylofgren/aurora-smart-home --skill ha-dashboard-design

安装后在 Claude Code 中输入/ha-dashboard-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
dark-minimal.md
glassmorphism.md
image-prompts.md
luxury-gold.md
material-you.md
neon-cyberpunk.md
nordic.md
retro-terminal.md
soft-pastel.md
warm-home.md

详细介绍

HA 仪表盘设计

适用于 Home Assistant 的即贴即用仪表盘设计。选择一种风格，复制所需区块。

前置条件（通过 HACS 安装）

  • card-mod - 为任意卡片设置 CSS 样式
  • button-card - 可完全自定义的按钮卡片
  • mini-graph-card - 精美的图表（可选）
  • mushroom - 现代化卡片套件（可选，部分风格会用到）

可选风格

风格观感适用场景
glassmorphism磨砂玻璃、层次感、模糊效果深色壁纸背景
dark-minimal纯黑、简洁排版专注、提升效率
material-youGoogle Material 3、动态配色现代、熟悉
nordic明亮、通透、斯堪的纳维亚风格明亮房间、白天使用
neon-cyberpunk发光效果、鲜艳霓虹夜间模式、吸睛效果
warm-home琥珀色／橙色、温馨客厅、夜晚
soft-pastel柔和的粉色、淡紫色、薄荷绿友好、适合家庭
luxury-gold深海军蓝 + 金色点缀高端、精致
retro-terminal绿色荧光、等宽字体极客美学

使用方法

  1. 阅读所选风格的参考文件
  2. 复制 Theme YAML → 粘贴到 config/themes/your-style.yaml
  3. 复制 card-mod 全局样式 → 粘贴到仪表盘资源中
  4. 复制单个 卡片区块 → 直接粘贴到仪表盘 YAML 中
  5. 调整实体 ID，使其匹配你的设置

快速开始 - 任意风格

# configuration.yaml - enable themes folder
frontend:
  themes: !include_dir_merge_named themes/

# Activate theme in dashboard
theme: your-theme-name

图像生成

如需生成与任意风格相匹配的背景图像或仪表盘样机可视化图， 请阅读 references/image-prompts.md - 其中包含适用于每种风格的即贴即用提示词，可用于 Midjourney、 DALL-E 3、Stable Diffusion 和 Flux。

参考文件

仅阅读与所请求风格对应的文件：

  • references/glassmorphism.md
  • references/dark-minimal.md
  • references/material-you.md
  • references/nordic.md
  • references/neon-cyberpunk.md
  • references/warm-home.md
  • references/soft-pastel.md
  • references/luxury-gold.md
  • references/retro-terminal.md
  • references/image-prompts.md - 用于背景图和样机的图像生成提示词

每种风格都涵盖的卡片类型

每个参考文件都包含以下卡片的即贴即用区块：

  • 传感器显示 - 温度、湿度、功率读数
  • 媒体播放器 - Spotify、电视、扬声器控制
  • 空调 / 恒温器 - 带有可视化反馈的温度控制
  • 安防 / 警报 - 布防／撤防、门窗传感器
  • 摄像头 - 带叠加层的实时画面
  • 按钮网格 - 场景／灯光／设备快捷方式
  • 天气 - 当前天气 + 预报显示
  • 能源 - 功耗、太阳能、电网
  • 灯光控制 - 开／关、亮度、色温滑块
  • 人员状态 - 人员／设备追踪器卡片
  • 日历 / 日程 - 即将到来的事件
  • 统计 / 图表 - 传感器历史记录、迷你图表
  • 页眉 / 导航 - 页面标题、房间导航
  • 警报横幅 - 通知、警告、状态

仪表盘类型

始终默认使用 masonry - 它适用于所有 HA 版本，无需设置。

# Safe default - works everywhere
views:
  - title: Home
    type: masonry   # ← default, always works
    cards:
      - ...

type: sections（HA 2024.6+ 网格布局）可能会显示空白页，原因可能是用户的 HA 版本不支持该类型，也可能是视图结构有误。只有在用户明确提出要求，或确认其使用的是 HA 2024.6+ 时，才建议使用。

输出前检查清单

  • 仪表盘使用 type: masonry，除非用户明确要求使用 Sections
  • 包含 Theme YAML，并使用正确的文件名
  • card-mod 样式已用正确的 YAML 结构包裹
  • 所有实体 ID 均标记为占位符（例如，sensor.YOUR_TEMPERATURE）
  • 在输出顶部列出 HACS 依赖项
  • 未将凭据／机密信息硬编码

集成

配合使用：

  • ha-yaml 技能 - 用于响应仪表盘交互的自动化
  • api-catalog 技能 - 用于显示在仪表盘上的传感器数据

评论

支持 Markdown