dot-canvas-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dot Canvas Designer

Dot Canvas 设计器

Use this skill when the user wants to design or revise a Dot. Canvas API card, dashboard, status panel, or

windowData

layout.

Do not use this skill merely to send an existing payload to a device. For device operations, use

dot-device-openapi

当用户想要设计或修改Dot. Canvas API卡片、仪表盘、状态面板或

windowData

布局时，使用此技能。

请勿仅使用此技能向设备发送现有负载。设备操作请使用

dot-device-openapi

。

Output Boundary

输出范围

Produce a Canvas payload or a

windowData

object. Do not handle API keys, device IDs, or device sending here.

When the user asks to design and send a Canvas card:

Use this skill to build the Canvas payload.
Use
```
dot-device-openapi
```
to send it.

生成Canvas负载或

windowData

对象。此处不处理API密钥、设备ID或设备发送操作。

当用户要求设计并发送Canvas卡片时：

使用此技能构建Canvas负载。
使用
```
dot-device-openapi
```
发送负载。

Composition Model

组合模型

Build

windowData

as JSON, not JSX, JavaScript, raw HTML, external CSS, or an image.

Root shape:

json

{
  "default": [
    {
      "type": "div",
      "props": {
        "tw": "flex flex-col flex-1 bg-white text-black",
        "children": "Hello Dot."
      }
    }
  ]
}

Element shape:

```
type
```
:
```
div
```
,
```
span
```
, or
```
img
```
```
props
```
: render props
```
props.tw
```
: Tailwind-like utility classes
```
props.style
```
: explicit inline style object
```
props.children
```
: a string, one element object, or an array of element objects

Dynamic values should read Canvas

data

through simple

get

expressions such as

{{get inputData "title" default="-"}}

以JSON格式构建

windowData

，而非JSX、JavaScript、原始HTML、外部CSS或图片。

根结构：

json

{
  "default": [
    {
      "type": "div",
      "props": {
        "tw": "flex flex-col flex-1 bg-white text-black",
        "children": "Hello Dot."
      }
    }
  ]
}

元素结构：

```
type
```
:
```
div
```
,
```
span
```
, or
```
img
```
```
props
```
: 渲染属性
```
props.tw
```
: 类Tailwind的工具类
```
props.style
```
: 显式内联样式对象
```
props.children
```
: 字符串、单个元素对象或元素对象数组

动态值应通过简单的

get

表达式读取Canvas

data

，例如

{{get inputData "title" default="-"}}

。

Supported Template Logic

支持的模板逻辑

Use stable display-layer helpers only:

```
$for
```
/
```
$empty
```
: list structures
```
$ifAny
```
/
```
$then
```
/
```
$else
```
: structural conditions
```
if
```
/
```
else
```
: short content branches based on whether a value has content
```
compare
```
: short text branches
```
formatDate
```
: date display
```
formatCompactNumber
```
: number display
```
get
```
: read JSON paths

Avoid internal cleaning or transformation helpers such as

imageSrc

stripHtml

math

, or

regexMatch

in public Canvas payloads. Do data cleanup and heavy computation before building the JSON payload.

仅使用稳定的显示层辅助工具：

```
$for
```
/
```
$empty
```
: 列表结构
```
$ifAny
```
/
```
$then
```
/
```
$else
```
: 结构化条件判断
```
if
```
/
```
else
```
: 基于值是否有内容的短内容分支
```
compare
```
: 短文本分支
```
formatDate
```
: 日期显示
```
formatCompactNumber
```
: 数字显示
```
get
```
: 读取JSON路径

在公开的Canvas负载中，避免使用

imageSrc

、

stripHtml

、

math

或

regexMatch

等内部清理或转换辅助工具。在构建JSON负载前完成数据清理和大量计算。

Layout Guidance

布局指南

Prefer one bounded root container with
```
flex
```
,
```
w-full
```
,
```
h-full
```
, and explicit background/text colors.

Use

min-w-0

min-h-0

, fixed heights,

overflow-hidden

lineClamp

textOverflow

, and

whiteSpace

when text could overflow.

The outermost Canvas element usually should not add padding; device layout spacing comes from
```
layoutFull
```
.
Use
```
layoutFull.tw
```
or
```
layoutFull.style
```
for full-bleed rendering, background, or padding overrides.
Keep element count and nesting low. Compose clear sections instead of deeply nested decoration.

优先使用带有
```
flex
```
、
```
w-full
```
、
```
h-full
```
以及明确背景/文本颜色的单个有界根容器。
当文本可能溢出时，使用
```
min-w-0
```
、
```
min-h-0
```
、固定高度、
```
overflow-hidden
```
、
```
lineClamp
```
、
```
textOverflow
```
和
```
whiteSpace
```
。
最外层Canvas元素通常不应添加内边距；设备布局间距来自
```
layoutFull
```
。
使用
```
layoutFull.tw
```
或
```
layoutFull.style
```
实现全屏渲染、背景或内边距覆盖。
保持元素数量和嵌套层级较低。组合清晰的区块，而非深度嵌套的装饰元素。

References

参考资料

```
references/windowdata.md
```
```
references/examples.md
```

```
references/windowdata.md
```
```
references/examples.md
```