SuperAPI AI 工具集

phoenix-duskmoon-design

设计与创作

查看项目

更新于 10-15 21:56

技能介绍

用途:为使用 DuskMoon UI 的 Phoenix 项目提供设计约定与视觉质量指南,指导页面与视图在统一设计系统内做出有意图的美学选择,包括目的、密度、强调与深度四个思考维度。

主要能力:规定主题设置(CSS 入口需 @import "tailwindcss"; @plugin "@duskmoon-dev/core/plugin"; @import "phoenix_duskmoon/components";,HTML 根节点使用 data-theme,主题为 sunshine 浅色与 moonlight 深色,body 使用 bg-surface text-on-surface,appbar 中需包含 <.dm_theme_switcher />);给出各组件默认颜色,如 appbar 用 primary、侧边栏与抽屉用 secondary、页脚用 surface-container-high、卡片用 surface-container、模态框用 surface-container-highest;列出颜色规则,包括禁止硬编码颜色与 Tailwind 调色板类、背景与文字令牌必须成对使用、表面层级由低到高嵌套、语义色仅用于状态、primary 代表品牌、每视图仅一个主操作、图标继承 currentcolor、容器色用于柔和强调;还涵盖排版(字体策略与字号层级)、布局组合、背景与深度、边框分隔、动效与过渡以及反模式清单。

使用方式:在 Phoenix LiveView 项目中按上述 CSS 与 HTML 要求接入 DuskMoon,使用 dm_* 组件与设计令牌类名构建页面,遵循颜色、层级与排版规则。

适用场景:Phoenix 项目的仪表盘、表单、营销页、管理后台与内容页等视图的设计与实现。

限制:资料未提供安装命令、版本要求、收费与价格信息,也未说明具体平台支持范围;字体需项目自行选择,DuskMoon 不指定字体。