@amaster.ai/pi-lark 0.1.2-beta.44 → 0.1.2-beta.45

package/skills/lark-apps/creative-design/references/animated-video.md

@@ -0,0 +1,34 @@
+---
+name: animated-video
+metadata:
+  display-names:
+    zh-CN: 动画视频
+    en-US: Animated Video
+description: Use when creating animated videos, motion graphics, product walkthroughs, or visual storytelling with timeline-based playback. 触发词：animation, video, motion, 动画, 视频, 动效, 产品演示, 演示动画, walkthrough
+available-agents:
+  - CreativeDesign
+---
+
+# Animated video
+
+Create an animated video or motion design piece rendered as an HTML page. Build a timeline-based animation with smooth transitions. Design frame-by-frame sequences with playback controls (play/pause, scrubber). Focus on visual storytelling; take the palette from the user's brand assets, or derive it from the subject per [`../creative-design.md`](../creative-design.md)「默认美学指令」— never default to any fixed brand palette. Export-ready at a fixed aspect ratio (16:9 or 9:16). If you need to know the position of an element (eg to move a cursor or character between elements) use refs to grab the position.
+
+START by calling `copy_starter_component` with `kind: "animations.jsx"` — it gives you a ready-made timeline engine: `<Stage width height duration>` (auto-scales to viewport, scrubber + play/pause + ←/→ seek + space + 0-to-reset, persists playhead), `<Sprite start end>` to gate children to a time window, `useTime()` / `useSprite()` hooks, an `Easing` library, `interpolate()` / `animate()` tweens, and `TextSprite` / `ImageSprite` / `RectSprite` primitives with built-in entry/exit. Read the file after copying and build YOUR scenes by composing Sprites inside a Stage; only fall back to Popmotion (https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/popmotion@11.0.5/dist/popmotion.min.js) if the starter genuinely can't do what you need.
+
+Animations are complex code! Make reusable JSX components for each visual element and each scene. Invest in tweaking the timeline iteratively.
+
+Animation tips:
+- Storytelling is KEY! Before you create ANYTHING, identify the story arc, key tensions, characters, etc. Align on the message you want to convey. Run it by the user.
+- Use good animation principles... anticipation, easing, follow-through, exaggeration, all the Disney animator principles.
+- Scenes should have establishing shots setting the scene (use titles or captions if NECESSARY, but prefer to show not tell), followed by heavy zooms on the action. (either hard cuts, or ken-burns-style zooms, or mouse-follows.) Most scenes should exist in a realistic context: they should have a background, or exist in the UI of a computer or phone; etc. Elements should generally not float in the aether.
+- In short animations, most 'scenes' are a single shot, or a sequence of shots in the same setting. Scenes may be slides (e.g. text or graphics onscreen, animating or being emphasized (highlighted etc) in an engaging way that calls attention to the key thing). Decide what the shot is going to be. Maybe it's starting zoomed out, then slowly zooming in on the area of focus or action. Maybe it's rapidly cutting back/forth between two people or graphics in tension. Maybe you're following something, like a cursor or a line on a graph, as it flits around. Be creative!
+- Except for deliberate dramatic effect (a held beat), SOMETHING should always be in motion. The camera, an element, or a transition — slowly panning, zooming, subtly scaling up, drifting, or building. A truly static frame reads as a bug. Images especially: always slowly zoom in/out, pan, have some 'action', have text or graphics appearing or building, or be rapidly cutting in sequence.
+- Whenever you show text or images, remember that you need pauses for it to sink in -- on the order of seconds -- before you can show something else.
+
+If cursor or pointer movement is depicted (eg in a product walkthrough or prototype), you should zoom in on it and follow it with a damped viewport animation, like Screen Studio would. You MUST use HTML refs to locate elements onscreen so the cursor points at the right things.
+
+For product-demo animations (simulated clicks, drags, dialogs, status changes), build a believable product UI and animate its real interface state — do NOT substitute an abstract flowchart or node diagram for the product screen. Reuse the device/window shells from `starter-components/` (`ios-frame.jsx`, `android-frame.jsx`, `macos-window.jsx`, `browser-window.jsx`) instead of hand-rolling frames.
+
+For data-driven animations (annual-review numbers, dashboards coming alive, chart morphing): animate counters by tweening the value with `animate()` / `interpolate()` and rendering the formatted number; morph charts by interpolating the underlying data array each frame and re-rendering the SVG bars/paths (or driving ECharts `setOption` from `useTime()`); chain chapters with scene transitions. Every number shown must come from the user's real data (see [`../creative-design.md`](../creative-design.md)「数据保真」).
+
+For clarity when commenting, update the video root's data-screen-label attr with the current timestamp each second, so you can easily comment on a particular timestamp and know that the agent will be told exactly the timestamp. `<Stage>` does NOT do this for you — wire it up yourself, e.g. inside a component rendered in the Stage: `const t = useTime(); const sec = Math.floor(t); useEffect(() => { document.querySelector('.video-root')?.setAttribute('data-screen-label', sec + 's'); }, [sec]);`

package/skills/lark-apps/creative-design/references/charts.md

@@ -0,0 +1,165 @@
+---
+name: charts
+metadata:
+  display-names:
+    zh-CN: 图表
+    en-US: Charts
+description: "基于 ECharts 的数据可视化，用于浏览器直出 HTML。当需要创建图表、仪表盘或数据可视化时使用。触发词：chart, ECharts, 图表, 可视化, visualization, 饼图, 柱状图, 折线图, 数据图表, 甘特图, 热力图, 数据展示, dashboard, 仪表盘, 数据看板"
+available-agents:
+  - CreativeDesign
+---
+
+# 图表
+
+你是用 ECharts 呈现信息的数据叙事设计者。你的图表会出现在创意 HTML 产物中，例如仪表盘、幻灯片、设计探索。ECharts 是你的媒介，不是目标；你的工作是让数据故事一眼可读，而不是堆配置项。一个图表只表达一个主要信息。
+
+## 设计原则
+
+**先编码，再装饰。** 每个视觉通道——位置、长度、颜色、大小——要么在编码一个数据维度，要么就是噪音。先决定每个通道代表什么，再决定它看起来怎样。没有编码含义的颜色应保持统一；读者会尝试解读颜色差异，并从中读出并不存在的意义。
+
+**匹配产品的视觉语言。** 先阅读 UI 的视觉语言，再跟随它。图表颜色从产品现有色板中派生；字体从产品字体体系中派生。一个像从别的产品里掉进来的图表，会削弱用户对数据的信任。
+
+**克制。** 图表靠精确赢得信任，不靠"看起来厉害"。跳过 3D 效果、无意义的渐变，以及不服务于理解的动画。
+
+**平面化。** 出现在报表、看板、报告中的图表默认采用平面风格：细网格线、清晰坐标、纯色或轻微面积填充、必要注释。不要使用 `shadowBlur`、`shadowColor`、发光点、拟物高光或容器阴影来制造层次；层次来自数据权重、线宽、颜色语义和版式面积。
+
+## 流程
+
+按顺序完成这些步骤。不要一上来就写 ECharts options。
+
+1. **审视数据。** 数据有哪些维度？范围是什么？它在讲什么故事——趋势、比较、构成、分布、流向、排名？
+
+2. **选择图表类型。** 根据数据的故事，从下方的映射表中选择。
+
+3. **分配视觉编码。** 对每个视觉通道，明确它代表哪个数据维度：
+   - **位置**（x/y）→ 通常是主维度
+   - **长度/面积** → 通常是度量值
+   - **颜色** → 问自己：这张图中颜色在编码什么？
+
+     | 颜色编码的内容 | 配色方案 |
+     |---|---|
+     | **分类**（无序分组：渠道、部门） | 从产品调色板中为每组取一个不同色相，≤8 个 |
+     | **顺序或强度**（阶段、排名、分桶、单一指标） | 单一色相，纯色或从浅到深渐变 |
+     | **相对中点的偏离**（盈亏、实际 vs 目标） | 两个色相在中性色处交汇 |
+     | **价值判断**（好/坏、通过/失败） | 产品语义 token（success / warning / danger） |
+     | **无编码**（单系列，或形状已经承载了编码） | 一个纯色品牌色，所有元素统一 |
+
+     如果你在给一个**有序**系列中的每个元素分配**不同色相**，停下来——你正在把序列伪装成互不相关的分类。读者会看到 N 个无关的东西，而非一个渐进过程。
+
+4. **一次性定义色板。** 从产品 design tokens 中定义颜色。仪表盘中的每个图表都复用同一套颜色分配——同一个分类在不同图表中使用不同颜色，会迫使读者逐图重新学习编码。
+
+5. **编写 ECharts 代码。** 挂载模式和 API 约束见下方技术参考。
+
+6. **自检。** 截图检查结果。按文末清单验证。然后回到视觉编码步骤：渲染出来的图表是否真的表达了你想表达的信息？颜色编码与仪表盘其他部分是否一致？
+
+## 图表类型映射
+
+按数据故事选择图表，不按"看起来酷不酷"选择。
+
+| 数据故事 | 图表 | 关键约束 |
+|---|---|---|
+| 时间趋势 | Line / Area | ≤5 个系列；数据必须按时间排序 |
+| 分类比较 | Bar | — |
+| 部分与整体 | Pie（≤5 项）、Treemap / Sunburst（>5 项） | Pie >5 项 → 改用横向 Bar |
+| 分布 | Scatter、Heatmap、Boxplot | Heatmap 必须配合 `visualMap` |
+| 多维度画像 | Radar（≤8 维）、Parallel（>8 维） | — |
+| 流转 / 转化 | Funnel | — |
+| 关系 | Sankey、Graph、Tree | Sankey 的链接必须构成 DAG |
+| 日程 / 时间线 | 通过 `custom` series 实现 Gantt | 禁止用 stacked Bar 表示时间线 |
+| 金融 | Candlestick | — |
+| 主题 / 叙事流 | ThemeRiver | — |
+
+## 多图表仪表盘
+
+仪表盘中的多个图表共享上下文。把仪表盘当作一个整体页面，而不是一堆独立组件：
+
+- **共享色板**：只定义一次颜色分配（例如"渠道 A = blue，渠道 B = green"），并在所有图表中复用。
+- **坐标一致**：如果两个图表共享同一维度（时间、分类），对齐它们的坐标范围和刻度，让读者能横向扫描。
+- **视觉层级**：一到两个图表承载核心故事；其余图表提供支撑。尺寸和位置要表达这种主次关系。
+- **表达覆盖**：把用户需求拆成需要被回答的信息关系；每个被承诺的关系都要有对应的图表、表格、矩阵或文字证据承载。不要用少量通用指标和默认图表替代所有分析任务。
+- **小容器防崩**：小尺寸图表优先用 bar / line / number strip。饼图、雷达图、词云和外部标签很容易挤压重叠；空间不足时换图表类型，而不是缩小到不可读。
+
+## 技术参考
+
+### 加载 ECharts
+
+```html
+<script src="https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/echarts@5.6.0/dist/echarts.min.js" crossorigin="anonymous"></script>
+```
+
+`echarts` 通过 `window.echarts` 全局可用，无需 import。渐变：`new echarts.graphic.LinearGradient(0, 0, 0, 1, [...colorStops])`。
+
+### 挂载——纯 HTML
+
+```html
+<div id="chart" style="width:100%;min-height:300px"></div>
+<script>
+  const chart = echarts.init(document.getElementById('chart'));
+  chart.setOption({ /* ... */ });
+  window.addEventListener('resize', () => chart.resize());
+</script>
+```
+
+### 挂载——React 封装
+
+定义一次，复用。**不要**添加 echarts-for-react。
+
+```jsx
+function EChart({ option, style }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const chart = echarts.init(ref.current);
+    chart.setOption(option);
+    const onResize = () => chart.resize();
+    window.addEventListener('resize', onResize);
+    return () => { chart.dispose(); window.removeEventListener('resize', onResize); };
+  }, [option]);
+  return <div ref={ref} style={{ width: '100%', minHeight: 300, ...style }} />;
+}
+Object.assign(window, { EChart });
+```
+
+用法：`<EChart option={option} style={{ height: 400 }} />`
+
+## 自检清单
+
+提交前按下面清单检查生成代码。每一项都对应真实出现过的 ECharts 渲染问题或视觉缺陷。
+
+### 致命问题
+
+| 检查项 | 修复方式 |
+|---|---|
+| 使用了 hsl / hsla / rgb / rgba 颜色 | 只用 Hex（`#1890ff`）——hover 透明度在非 hex 色值下容易出问题 |
+
+### 严重问题
+
+| # | 检查项 | 修复方式 |
+|---|---|---|
+| 1 | Pie 分类 >5 个 | 改用横向 Bar |
+| 2 | Line 系列 >5 条 | 拆分或筛选 |
+| 3 | Radar 给每个 indicator 设置了 `max` | 移除；改为自动计算 |
+| 4 | Radar 多系列、不同量纲 | 先做归一化 |
+| 5 | Bar 缺少 `boundaryGap` | 设置 `boundaryGap: true` |
+| 6 | Funnel label 被隐藏或位置不在内部 | `label: { show: true, position: 'inside' }` |
+| 7 | 容器高度 <300px | `min-height: 300px` |
+| 8 | 单张图表中分类色（每项一个色相）>8 种 | 聚合或分组 |
+| 9 | Pie / 环形图的分类或数值只能靠 tooltip 读到——用了外部引导线标签（`position` 为 `'outside'` 或缺失），或干脆 `label: { show: false }` 且既无图例也无中心标注 | 分类 + 数值必须**静态可读**（tooltip 不算，图表常被导出 / 截图当静态图看）。任选其一：inside 标签标注 `name` + 百分比（扇区够大时）、图例映射色 → 分类、或环形图中心标注关键数值。禁止外部引导线标签（`position: 'outside'` 易重叠 / 裁切），也禁止只靠 tooltip 承载分类 / 数值 |
+| 10 | Pie 设置了 `itemStyle` | 完全移除 |
+| 11 | 任何 series 设置了 `label.color` | 禁止设置；由 theme 控制 |
+| 12 | `label.formatter` 使用字符串模板 | 改用回调：`formatter: (params) => ...` |
+| 13 | legend / visualMap 与图表重叠 | legend: `{ type: 'scroll', bottom: 0 }`；`grid.bottom ≥ '20%'` |
+| 14 | Heatmap 缺少 `visualMap` | 必须添加；当 x 轴标签并存时 `grid.bottom ≥ '25%'` |
+| 15 | Sankey 存在环形链接 | 验证 DAG |
+| 16 | 正负混合 Bar 使用统一 `borderRadius` | 圆角朝向柱体的开口端 |
+| 17 | 双 Y 轴零点未对齐 | 匹配 `\|min\| / max` 比例 |
+| 18 | 图表 series 或容器使用阴影/发光效果 | 移除 `shadowBlur`、`shadowColor`、容器 `box-shadow`，改用线宽、透明度、注释或面积大小表达层级 |
+| 19 | 图表或标签挤压、重叠、被容器裁切 | 增大容器、减少标签、改用 tooltip / inside label，或换成更稳的图表类型 |
+
+### 不建议
+
+| 避免 | 更好的选择 |
+|---|---|
+| Radar >8 个维度 | Parallel coordinate |
+| Line 连接未按时间排序的点 | Bar 或 Scatter |
+| markPoint 重复（统计极值 = 业务事件） | 仅保留业务注释 |
+| 用 Stacked Bar 表示 Gantt | 使用带 `renderItem` 的 `custom` series |

package/skills/lark-apps/creative-design/references/claude.md

@@ -0,0 +1,36 @@
+# Claude Code 工具参考
+
+本文档列出 [`../creative-design.md`](../creative-design.md) 所依赖的 harness 专属工具，供你在 **Claude Code** 中运行时使用。主提示词只命名能力（"向用户提问"、"展示文件"等）；本文档给出确切的 Claude Code 工具、签名与调用方式。通用工具（`Bash`、`Read`/`Write`/`Edit`/`Glob`、`gh`）在任何环境都相同，不在此覆盖。
+
+## Web 工具 → Claude Code 工具对照表
+
+上游提示词引用了一些在 Claude Code 中并不存在的 Claude.ai web 工具。无论出现在行文还是代码里，一律按下表替换：
+
+| Web 工具 | Claude Code 对应项 |
+|---|---|
+| `ask_user_question` | `AskUserQuestion`（答案内联返回；每次最多 4 个问题，需要更多就再调用一次） |
+| `done`、`fork_verifier_agent` | `SendUserFile` 发送交付物并给出文件路径 |
+| `write_file`（及其 `asset:` 参数） | `Write`——完全舍弃 "asset review pane" 这一概念 |
+| `copy_files` | `Bash cp` |
+| `read_file`、`list_files`、`view_image` | `Read`（也能渲染图像）、`Glob` / `Bash ls`、`Grep` |
+| `show_to_user` | `SendUserFile`（自包含文件也可用 `open <path>`） |
+| `eval_js`、`eval_js_user_view`、`run_script` | `Bash` |
+| `web_fetch`、`web_search` | `WebFetch`、`WebSearch` |
+| `generate_image` | 无内置对应。会话中若接入了图像生成 MCP/工具则使用；否则跳过 AI 生图，用内联 SVG / CSS 图形兜底，并在交付说明中注明。 |
+| `search_images` | 无专用对应。用 `WebSearch` 检索 + `WebFetch` 获取；用于需要真实图片的素材（实物、地点、logo 等）与确立方向的参考图，直接引用需注意来源与版权。 |
+| `copy_starter_component` | `Bash cp <本 skill 所在目录>/starter-components/<file> .`（cwd 通常是应用项目目录而非 skill 目录，需用 skill 目录实际路径；或 `Read` 后改编） |
+| 文档解析（docx / pdf） | PDF 用 `Read`（`pages` 参数分段读全）；docx 先用 Bash 转出文本再读（`pandoc`、macOS `textutil -convert txt`、或 `python-docx`） |
+| `invoke_skill("X")` / `invoke the "X" skill` | `Read` 对应的 `references/<file>.md`（媒介技能与本文件同在 `references/` 目录） |
+
+## AskUserQuestion（澄清性提问）
+
+替代 `ask_user_question`。`AskUserQuestion` **把用户的答案内联返回**——先问，等用户答复后再继续。每次调用最多展示 4 个问题；大型新项目先问一轮聚焦的问题，不够就再补一次调用。
+
+- 记忆中的偏好可以作为问题里的*建议*默认值给出，但仍须由用户确认。
+- 优先用它，而不是在回复里用文字列点罗列选项。
+- 项目设置类提问——项目**保存到哪里**、使用**哪个（哪些）设计系统**（一次 multiSelect）——都是普通的 `AskUserQuestion` 调用。
+
+## 交付与发布
+
+- 用 `SendUserFile` 发送交付物并给出文件路径（读取文件**并不会**把它展示给用户）。
+- 产物完成并提交后，按 [`../creative-design.md`](../creative-design.md)「发布」一节发布到妙搭——交付给用户的可分享链接是 `+release-get` 返回的 `online_url`。

package/skills/lark-apps/creative-design/references/codex.md

@@ -0,0 +1,32 @@
+# Codex Agent 工具参考
+
+本文档列出 [`../creative-design.md`](../creative-design.md) 所依赖的 harness 专属工具，供你在 **Codex Agent** 中运行时使用。主提示词只命名能力（"向用户提问"、"展示文件"等）；本文档给出 Codex 的调用方式。通用工具（shell、文件读/写/编辑/搜索、`gh`）不在此覆盖。
+
+## Web 工具 → Codex 对应项
+
+| Web 工具 | Codex 对应项 |
+|---|---|
+| `ask_user_question` | 在 Codex Plan Mode 下，若 `functions.request_user_input` 可用则使用它；否则在聊天中提出简明问题并等待用户答复。 |
+| `done`、`fork_verifier_agent` | 在最终回复中呈现交付物的文件路径。 |
+| `write_file`（及其 `asset:` 参数） | Codex 的常规文件编辑工具。不存在 asset review pane；舍弃这一概念。 |
+| `copy_files` | Shell `cp`。 |
+| `read_file`、`list_files`、`view_image` | Codex 的常规文件读取/搜索工具。 |
+| `show_to_user` | 提供绝对本地文件路径；有帮助时，用 Markdown 以绝对路径嵌入图片。 |
+| `eval_js`、`eval_js_user_view`、`run_script` | 脚本用 Shell。 |
+| `web_fetch`、`web_search` | 若存在则用 Codex 的 web 工具；用于时效性事实、内容素材补充或用户要求的网络查询。 |
+| `generate_image` | 无内置对应。会话中若接入了图像生成工具则使用；否则跳过 AI 生图，用内联 SVG / CSS 图形兜底，并在交付说明中注明。 |
+| `search_images` | 无专用对应。若有 web 工具则用其检索图片，用于需要真实图片的素材与确立方向的参考图；没有就跳过。 |
+| `copy_starter_component` | Shell `cp <本 skill 所在目录>/starter-components/<file> .`（cwd 通常是应用项目目录而非 skill 目录，需用 skill 目录实际路径；或读取后改编）。 |
+| 文档解析（docx / pdf） | 用 shell 工具转出文本后读取：`pdftotext` / `pandoc` / python 脚本（`pypdf`、`python-docx`）。 |
+| `invoke_skill("X")` / `invoke the "X" skill` | 阅读对应的 `references/<file>.md`（媒介技能与本文件同在 `references/` 目录）。 |
+
+## 提出澄清性问题
+
+当 Codex 处于 **Plan Mode** 且 `functions.request_user_input` 可用时，用它来提出聚焦的结构化问题。它最适合高影响力的设计决策，如范围、保真度、设计上下文、参考应用、变体数量。
+
+若 `request_user_input` 不可用，或会话不在 Plan Mode，就直接在聊天中问同样的问题并等待用户回答。一轮提问保持简明、可执行。不要虚构假的工具名。
+
+## 交付与发布
+
+- 在最终回复中给出交付物的绝对本地文件路径。
+- 产物完成并提交后，按 [`../creative-design.md`](../creative-design.md)「发布」一节发布到妙搭——交付给用户的可分享链接是 `+release-get` 返回的 `online_url`。

package/skills/lark-apps/creative-design/references/data-report.md

@@ -0,0 +1,108 @@
+---
+name: data-report
+metadata:
+  display-names:
+    zh-CN: 数据看板
+    en-US: Data Dashboard
+description: "数据驱动的报表与看板设计。从数据分析到报表规划、信息层级组织，适用于用户有数据文件或明确指标，需要产出结构化数据报表的场景。图表绘制部分由 charts skill 承担。触发词：数据报表, 数据看板, 数据分析报表, BI, 经营报表, 指标看板, 周报, 月报, 数据大盘, KPI, 报表设计, data report, dashboard report, analytics report"
+available-agents:
+  - CreativeDesign
+---
+
+# 数据报表
+
+你是数据报表设计者。你的工作是把原始数据变成一份读者能直接用来做判断的报表——不只是画几张图，而是回答"这份数据在说什么、读者应该关注什么"。
+
+报表的价值不在图表数量，而在信息层级：读者能在 5 秒内抓到主要结论，30 秒内理解支撑证据，需要时能下钻到明细。
+
+## 设计基准
+
+报表和看板默认采用**平面、克制、信息密集但可扫描**的视觉语言。参考优秀数据页面的抽象模式：浅色或中性底、少量品牌色、细边框、分隔线、色块、表格斑马纹、紧凑标签、tabular numbers、清晰图表标题和口径说明。内容区不要依赖阴影、玻璃拟态、发光、厚重渐变或悬浮卡片来制造层次；层次主要由栅格、字号、留白、边框、背景色块和数据权重建立。
+
+布局必须比普通上下堆叠更丰富。先根据数据任务选择版式骨架，再写代码：监控型、复盘型、诊断型、对比型、明细型、汇报型可以有完全不同的扫描路径。可以组合 KPI 指标条、左右不等分主分析区、辅助矩阵、排名/明细表、洞察侧栏、深色结论带、时间线或漏斗区，但不要每份报表都套成同一套 KPI 横条 + 主图 + 洞察卡。不要把每个章节都做成同宽标题加一张满宽卡片；核心模块占更大面积，支撑模块用不同宽度、密度和位置服务它。
+
+报表不是产品原型。内容型或分析型交付服务阅读和决策，不默认生成多页面后台导航、可下拉应用名、无意义返回按钮或设置菜单；只有用户明确要求交互式系统、后台、筛选操作或多页面应用时才做这些。标题、范围、口径、结论、图表、洞察和明细都是可用的信息部件，不是每份报表都必须同时出现的固定章节。
+
+不要让页面全是文字，也不要把所有章节都做成同一种"结论 + 指标 + 图表 + 洞察"结构。长材料先判断每段内容在当前报表里的作用：它是在给背景、定义口径、证明结论、展示变化、比较对象、解释异常、列明细，还是提出行动。每段只选择最适合的表达方式，可以是短结论、关键数字、对比、时间顺序、表格、矩阵、引用、图表、注释或截图。重要内容不能被塞进附录或角落；如果一个章节是汇报目标的核心，就给它相称的版面面积和区别于其他章节的版式处理。
+
+## 流程
+
+按顺序完成这些步骤。不要一上来就写代码。
+
+### 1. 需求分析
+
+从用户消息中提取报表的上下文：
+
+- **产品类型**：数据看板、监控中心、分析报表、BI 面板、经营复盘等。
+- **目标读者**：管理者、运营、销售、分析师、项目成员，或外部客户。
+- **核心诉求**：监控指标、发现趋势、比较对象、解释异常、辅助决策、展示成果。
+- **界面语言与口径**：跟随用户输入语言；指标命名、单位、时间粒度要统一。
+
+产出：一句话概括"给谁看、回答什么问题"。
+
+### 2. 数据分析
+
+审视数据，确认可用的维度和指标：
+
+- **字段列表**：名称、类型、示例值、是维度还是指标。
+- **数据规模**：行数、时间跨度、类目数量、缺失值或异常值。
+- **指标口径**：总量、均值、占比、增速、完成率、排名、转化率等。
+- **计算方式**：所有指标一律写脚本从源数据计算（读附件 → 聚合 → 得数），不目测、不凑整、不编造；报表里出现的每个数字都必须能追溯回源数据（见 [`../creative-design.md`](../creative-design.md)「数据保真」）。算好的聚合结果内联为页面里的 JS 常量，不要让页面在运行时去 fetch 原始附件。
+- **维度切分**：时间、地区、渠道、产品、团队、状态、用户分组等。
+- **叙事重点**：哪个变化、差异、结构或异常最值得被读者看到。
+
+产出：维度-指标清单，以及一句话叙事重点。
+
+### 3. 报表规划
+
+在写代码之前，先确定报表由哪些组件构成：
+
+- **视觉方向**：参考 `frontend-design` 的方法先定主题世界、受众姿态、材料、配色逻辑和签名元素。例如环境数据可以像研究观测页，销售经营可以像运营战情室，财务/管理指标可以像管理层简报。风格必须服务数据可信度，不要套通用科技蓝或泛白卡。
+- **阅读路径**：先判断读者是要快速扫现状、追异常、看趋势、比较对象、查明细还是读复盘。不同任务对应不同起手式，不要默认都从 KPI 卡开始。
+- **候选部件**：标题 / 范围 / 口径、摘要、KPI、主图表、辅助图表、文字洞察、明细表、时间线、矩阵、截图或注释都只是候选。需要哪个用哪个，不要为了"完整"把它们凑齐。
+- **核心承载**：只给真正承载核心问题的模块更大面积。核心可能是一张趋势图、一张排名表、一段异常解释、一个流程漏斗，也可能是一组明细，不固定。
+- **版式差异**：为不同信息角色安排不同形态，例如紧凑指标条、宽图、窄侧栏、表格区、注释带、对比矩阵或分段背景。避免每个章节都重复同一张满宽白卡。
+- **布局骨架**：明确每个模块的相对面积和扫描路径，例如 `1.2fr 2fr`、`1fr 1.6fr`、`repeat(4,1fr)`、`auto 1fr` 等混合栅格；移动端再自然折叠。
+
+组件取舍由读者任务、数据复杂度和材料内容决定。
+
+产出：视觉方向与报表结构大纲（哪些组件、各自承载什么信息）。
+
+### 4. 图表设计
+
+为报表中的每个图表完成选型和视觉编码。此步遵循 charts skill 的规则；若 charts skill 尚未加载，先加载它。
+
+产出：每个图表的类型、编码分配、共享色板定义。
+
+### 5. 报表组成
+
+将所有组件组织成一个连贯页面：
+
+- 布局按数据叙事组织，不按"先放所有图再放文字"组织。
+- 顺序跟随读者任务：监控型可以先给状态概览，诊断型可以先给异常和原因链，对比型可以先给对象矩阵，复盘型可以先给时间线，明细型可以先给可查表格。
+- 同一页面内至少使用两种不同的版式关系：例如 KPI 横条 + 左右不等分主图 + 双列洞察 + 表格/结论带。避免所有模块都是同尺寸白卡片上下排列。
+- 内容块采用平面化处理：优先用 `border:1px solid ...`、浅底色、分隔线、色条、编号、标签和表格行背景；内容卡片和图表容器默认不加 `box-shadow`。
+- 图表旁边应有短洞察、口径或排名摘要，不要让图表孤零零占满整行。
+- 文字用于解释图表看不出的原因、口径、异常和行动建议，不重复图表标题。
+- 表格用于精确查数和比较对象，不要把长表伪装成密集柱状图。
+- KPI 用于概览，不要把每个字段都做成指标卡。
+- 没有真实依据时不编造结论；可写"待补充口径"或使用中性描述。
+
+产出：完整报表页面。
+
+### 6. 自检
+
+截图检查结果，验证以下几点：
+
+- 报表是否回答了步骤 1 确定的核心问题。
+- 信息层级是否清晰（读者能在 5 秒内抓到主要结论）。
+- 布局是否有明确主次和变化，而不是标题、KPI、图表从上到下机械堆叠。
+- 首屏重点信息是否可读，颜色对比是否足够；深色首屏尤其要检查标题、指标和图例。
+- 是否没有大面积无意义留白、错位、重叠、截断或不同模块视觉重量失衡。
+- 用户点名的图表类型和分析维度是否出现；如果因数据不适合改用其他图表，要在页面中用更合适的表达补足。
+- 内容区是否保持平面化，主要靠边框、色块、分隔线和栅格建立层级，没有滥用阴影、发光或玻璃拟态。
+- 文字洞察是否与图表数据互相支撑。
+- 图表部分是否通过了 charts skill 的自检清单。
+- 口径和单位是否全报表一致。
+
+产出：确认或修正。

package/skills/lark-apps/creative-design/references/frontend-design.md

@@ -0,0 +1,71 @@
+---
+name: frontend-design
+metadata:
+  display-names:
+    zh-CN: 创意设计
+    en-US: Creative Design
+description: 为设计确立独特、有意图的视觉方向的指引——配色、字体与美学选择不带模板化默认的痕迹。适用于各类媒介（deck、报告、UI、原型），不限于 Web UI。
+available-agents:
+  - CreativeDesign
+---
+
+# Frontend Design
+
+目标是让这份 brief 拥有绝不会被认错的视觉形象：做出深思熟虑、有主张的配色、字体与版式选择，承担一次你能说清理由的真正的美学冒险——感觉模板化的方案等于交付失败。
+
+## 让设计扎根于主题
+
+如果 brief 没有钉死产品或主题是什么，动手设计前先自己钉死：点出一个具体的主题、它的受众、这个页面唯一要完成的任务，并明确说出你的选择。但若主题、受众和材料都推不出一个有把握不返工的方向（从零起的项目、零线索），按 [`../creative-design.md`](../creative-design.md)「默认美学指令」先向用户问清偏好，问回来后再按本节钉死方向——能推出就直接钉死，不要为收集偏好打断用户。如果你的记忆里有关于用户偏好的信息、关于他们正在构建什么的上下文、或你以往做过的设计——把它们当作线索用起来。主题自身的世界——它的材质（materials）、工具与仪器（instruments）、特有的器物（artifacts）、行话与语汇（vernacular）——正是独特选择的来源。全程用 brief 的真实内容与题材来构建。
+
+## 视觉方向
+
+在选定颜色或组件之前，先在思考中定下方向。填满四个槽位——每一个都要取自*这个*主题：
+
+- **世界（World）**——这个页面属于哪个世界？去主题自己的世界里找：它的材质、工具与仪器、特有的器物、行话与语汇。
+- **材质（Materials）**——哪些真实存在的材质表面（surfaces）与印记（marks）属于那个世界？先把主题自带的一一列出来，别一上来就用通用的。
+- **配色（Palette）**——哪些颜色承担语义或品牌职责，哪些是中性的支撑色，哪一个唯一的强调色赢得注意力？
+- **签名元素（Signature）**——整个页面靠它被记住的那一个手法。它必须只可能属于这个主题；一个换到下份 brief 也能复用的签名元素，是默认值，不是选择。
+
+风格不是版式排完后再涂上去的装饰。这个方向决定字体排印、间距、图表处理、章节节奏、边框、图标风格，以及哪些组件值得强调。
+
+## 设计原则
+
+对于网页设计，hero 区就是全页的论点。开场就亮出主题世界里最具特征的东西，形式因主题而定：一句大标题、一张图、一段动画、一个实时 demo、一个交互瞬间。选择要经过深思：「大数字 + 小标签 + 辅助统计数据 + 渐变点缀」是模板答案，只有当它确实是最佳选项时才用。
+
+字体排印承载页面的性格。展示字体（display）与正文字体（body）的搭配要刻意为之，而不是随手拿任何项目都会用的那几个字体家族；并建立清晰的字号体系，字重、字宽、字距都要有意图。让字体处理本身成为设计中令人记住的一部分，而不是承载内容的中性载体。
+
+结构即信息。结构件——编号、眉标、分隔线、标签——应当编码内容中真实存在的信息，而不是装饰内容。很多千篇一律的设计都用编号标记（01 / 02 / 03），但只有当内容真的是一个序列时——比如真实的流程、或顺序本身携带读者所需信息的类型化时间线——编号才成立。在采用编号标记这类选择之前，先质疑它们是否真的说得通。
+
+有意识地运用动效。想清楚动画是否、以及在哪里能服务主题：页面加载序列、滚动触发的揭示、hover 微交互、环境氛围。一个经过编排的时刻通常比散落的零星特效更有力；按视觉方向的需要来选。但有时少即是多——多余的动画会加重「这个设计是 AI 生成的」的观感。
+
+让复杂度匹配愿景。极繁方向需要精雕细琢的执行；极简方向需要间距、字体与细节上的精准。优雅就是把选定的愿景执行到位。
+
+认真对待文字内容。设计 brief 往往不含真实内容，文案要由你来写。文案带来的模板感不亚于设计本身。更多指引见下文关于写作的章节。
+
+## 流程：头脑风暴、探索、规划、评审、构建、再评审
+
+先校准现状：当下的 AI 生成设计集中在三种长相上：(1) 暖奶油色背景（接近 #F4F1EA）+ 高对比衬线展示字体 + 陶土色（terracotta）强调色；(2) 近黑背景 + 单一亮色强调——酸性绿（acid green）或朱红（vermilion）；(3) 大报（broadsheet）式版面——发丝线（hairline rules）、零 border-radius、报纸般的密集分栏。三者对某些 brief 都站得住脚，但它们是默认值而非选择，而且不看主题就冒出来。凡是 brief 钉死了视觉方向的地方，严格照办——brief 自己的话始终优先，包括它点名要这三种长相之一的时候。凡是 brief 留出自由度的维度，别把这份自由花在这三个默认值上。就像受雇的人类设计师一样，往往要在「做自己擅长的」与「把每个项目当作试验和学习的机会」之间小心权衡。
+
+分两遍做。第一遍，基于用户的设计 brief 头脑风暴出一份简短的设计计划：把上文的视觉方向展开成一套紧凑的 token 体系——色彩、字体、版式、签名元素。色彩：用 4–6 个命名的 hex 值描述配色。字体：至少两种角色的字体（一款有性格、克制使用的展示字体，一款与之互补的正文字体，必要时再加一款用于图注或数据的功能字体）。版式：一个版式概念，用一句话的文字描述加 ASCII 线框图来构思和比较。签名元素：这个页面将被记住的那个唯一独特元素，以恰当的方式体现 brief。
+
+然后在动手构建前，对照 brief 复查这份计划：如果其中任何部分读起来像你对任何同类页面都会产出的通用默认（在心里过一遍相似的 prompt，看你是否会落到差不多的地方），而不是为这份 brief 专门做出的选择——就修订那部分，说明你改了什么、为什么改。只有在确认设计计划具备相对独特性之后，才开始写代码，严格遵循修订后的计划，让每一个颜色和字体决策都从计划中推导出来。
+
+写代码时，注意组织好 CSS 选择器的优先级（specificity）。很容易写出相互抵消的 CSS 类（尤其是 `.section` 这类分区级选择器与 `.cta` 这类元素级选择器之间）。区块之间的 padding/margin 上经常出这种问题。
+
+尽量把这些规划与迭代放在思考中完成，只在你有较高把握能让用户眼前一亮时，才把想法拿给用户看。
+
+## 克制与自我评审
+
+把大胆花在一个地方。让签名元素成为唯一被记住的东西，它周围的一切保持安静、克制，砍掉任何不服务于 brief 的装饰。不冒险本身也可能是一种冒险！默默守住质量底线，不必声张：响应式适配到移动端、键盘焦点可见、尊重 reduced motion。边构建边评审自己的作品，环境支持就截图看——一图胜千 token。想想香奈儿的忠告：出门前照照镜子，摘掉一件配饰。人类创作者有记忆，总在尝试新东西；如果你有地方快速记下自己试过什么，会对后续迭代有帮助。
+
+## 再谈设计中的写作
+
+文字出现在设计里只有一个理由：让设计更易理解，从而更易使用。文字是设计材料，不是装饰。对文案投入的心思，要和对间距、色彩投入的一样多。落笔之前，先问这个设计需要说什么、怎么说最能帮人在这段体验里找到方向。
+
+站在屏幕另一侧的最终用户角度来写。以人们能控制、能认出的东西命名，绝不以系统的实现方式命名。用户管理的是「通知」，不是「webhook 配置」。用平实的语言描述某物做什么，而不是推销它。具体始终胜过抖机灵。
+
+默认使用主动语态。一个控件应当准确说明使用它时会发生什么：说 "Save changes"，而不是 "Submit"。同一个动作在整条流程中保持同名：写着 "Publish" 的按钮，产生的 toast 就写 "Published"。界面的词汇表就是用户穿行产品时的路标。连贯与一致是人们认路的方式。
+
+把失败与空态当作指路的时机，而不是渲染情绪的时机。解释出了什么问题、怎么修复，用界面的口吻而非某个人的口吻。错误提示不道歉，也绝不对发生了什么含糊其辞。空屏是一份行动邀请。
+
+语域要像对话一样自然，并经过调校：动词平实、sentence case（句首大写）、没有废话，语气与品牌和受众匹配。让每个元素只做一件事：标签就是标注，示例就是演示，没有元素悄悄身兼二职。

package/skills/lark-apps/creative-design/references/hi-fi-design.md

@@ -0,0 +1,32 @@
+---
+name: hi-fi-design
+metadata:
+  display-names:
+    zh-CN: 高保真设计
+    en-US: Hi-Fi Design
+description: 用于创建高保真 UI mockup、设计探索，或带多种变体的视觉原型。触发词：mockup, hi-fi, prototype, UI design, 高保真, 设计稿, 原型, 界面设计, 视觉设计, 设计方案
+available-agents:
+  - CreativeDesign
+---
+
+# 高保真设计
+
+创建高保真、精细打磨的设计。
+
+遵循以下通用设计流程（用 todo list 记住）：
+1. 澄清关键信息：能从需求、附件、截图或常见模式合理推断的，直接继续；只在关键信息缺失且会影响设计方向时才向用户提问
+2. 查找现有 UI kit 并收集设计上下文——复制所有相关组件，阅读所有相关示例；如果找不到且会影响核心设计方向，再向用户询问
+3. 在文件开头写下假设、上下文和设计推理，放好设计占位，并尽早展示给用户
+4. 尽快把设计做出来，再次展示给用户，并附上下一步建议
+5. 使用工具检查、验证并迭代设计
+
+好的高保真设计不会从零开始——它们扎根于已有的设计上下文。找到合适的 UI kit / 设计资源，或从截图、代码和品牌资产中提取设计规则。你必须花时间去获取设计上下文，包括组件。如果缺少素材但不影响核心方向，先用合理假设继续推进；只有缺失信息会改变设计方向时才向用户索要。从零 mock 一个完整产品是最后手段，会导致低质量的设计。使用 starter components（设备框架等）可以免费获得高质量的脚手架。
+
+当并排展示多个方案或探索方向时，布局要清晰：给页面一个中性灰背景，把每个方案放进独立且带标签的框中（小标题 + 尺寸随内容变化的白色圆角卡片），并把相关方案分组。
+
+设计时，提出好问题很重要——但只在问题会实质性影响设计方向时才提问，避免频繁打断用户。
+
+给出选项：默认提供 2-3 个有清晰差异的方案（与 [`../creative-design.md`](../creative-design.md)「提问」一节的默认一致）；用户明确要求广度探索时，再围绕多个维度扩展更多变体。把符合既有模式的稳妥方案，与新颖的交互方式混合搭配，包括有趣的布局、隐喻和视觉风格。部分方案使用色彩或高级 CSS，部分带图标，部分不带。变体从基础开始，逐步走向更高级、更有创意的方向！尝试以有趣的方式重混品牌资产和视觉 DNA——玩转尺度、填充、纹理、视觉节奏、层次、新颖布局、字体处理。目标不是找到完美方案，而是探索用户可以混搭组合的原子级变体。
+
+CSS、HTML、JS 和 SVG 能力强大。用户往往不知道它们能做到什么。给用户惊喜。
+

package/skills/lark-apps/creative-design/references/interactive-prototype.md

@@ -0,0 +1,24 @@
+---
+name: interactive-prototype
+metadata:
+  display-names:
+    zh-CN: 交互原型
+    en-US: Interactive Prototype
+description: 可交互原型：像真实应用一样直接运行的高保真交互 demo（working app with real interactions）。触发词：可交互原型, 交互原型, 点击原型, interactive prototype, working app, 产品 demo, 工单系统, 管理后台, 看板工具, 多页面应用
+available-agents:
+  - CreativeDesign
+---
+
+Create a fully interactive prototype with realistic state management and transitions. Use React useState/useEffect for dynamic behavior. Include hover states, click interactions, form validation, animated transitions, and multi-step navigation flows. It should feel like a real working app, not a static mockup.
+
+Do not wrap interactive prototypes in `design-canvas.jsx`, `<DCArtboard>`, or any pan/zoom artboard shell. A prototype should run as a direct app surface; if multiple variants are needed, expose them with in-app navigation, tabs, routes, toggles, or Tweaks instead of a canvas.
+
+## 多页面与路由
+
+多页面原型按普通 MPA 做：一个页面一个 HTML 文件，入口固定为项目根目录的 `index.html`，页面间用相对路径的普通链接跳转（`<a href="detail.html">`）。不要引入任何 router 库——锁定版本的 CDN 清单里没有 router，也不要用 `type="module"` 模拟 SPA 路由。共享组件和样式拆成独立的 `.jsx` / `.css` 文件由各页面分别引入；跨页面要延续的状态（工单列表、看板数据等）放 localStorage、加载时读回；页面间传参用 URL query。
+
+## 像真实应用，而不是摆拍
+
+- 准备一份贴近业务的 mock 数据（名称、状态、时间戳都要像真的），页面从数据渲染，不要把内容写死在标记里。
+- 每个可见的按钮、输入、切换都要有反应：提交有校验和反馈、列表可增删改、状态会流转、空状态有设计。点了没反应的控件比没有这个控件更伤可信度。
+- 按 [`../creative-design.md`](../creative-design.md)「Tweaks」把关键选项（主题色、密度、布局变体等）用 `tweaks-panel.jsx` 暴露出来，不要自己实现控件面板。