foliko 1.1.3 → 1.1.4

package/skills/poster-guide/SKILL.md

@@ -1,1551 +1,794 @@
 ---
 name: poster-guide
-description: 海报设计技能 - 使用 poster 扩展生成海报和图片。使用 ext_call 调用 poster 插件。
-allowed-tools: ext_call
+description: 海报设计技能 - 收集优秀设计风格、配色方案和创意灵感,当用户询问"海报制作"、"卡片制作"、"配图制作"时立即调用。
+allowed-tools: create_poster_canvas, add_poster_background, add_poster_rectangle, add_poster_circle, add_poster_line, add_poster_polygon, add_poster_text, add_poster_art_text, add_poster_image, add_poster_svg, add_poster_image_frame, add_poster_columns, add_poster_grid, add_poster_card, add_poster_badge, add_poster_cta, add_poster_feature, add_poster_feature_grid, add_poster_divider, add_poster_avatar, add_poster_progress, add_poster_rating, add_poster_quote, add_poster_stat_card, add_poster_tag_cloud, add_poster_stepper, add_poster_timeline, add_poster_list_item, add_poster_notification, add_poster_star, add_poster_arrow, add_poster_progress_circle, add_poster_chip, add_poster_chart, add_poster_watermark, add_poster_table, compose_poster, generate_poster, export_poster_canvas, export_poster_svg, list_poster_components, list_poster_templates
 ---
 
 # 海报设计技能指南
 
-## 📡 调用方式
-
-poster 扩展使用 `ext_call` 工具调用：
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: '<工具名>',
-  args: {
-    /* 参数 */
-  },
-});
-```
+> 本技能收集了来自日本优秀设计网站（muuuuu.org、ics.media 等）和国际设计平台（Behance、Dribbble，Pinterest 等）的流行趋势和配色方案。
 
 ---
 
-## 🎨 配色方案
+## 📐 设计尺寸规范
 
-### 1. 流行配色来源
+### 社交媒体
 
-- [Color Hunt 流行配色](https://colorhunt.co/palettes/popular)
-- [Coolors Trending](https://coolors.co/palettes/trending)
-- [Tailwind CSS 官方配色](https://tailwindcss.com/docs/colors)
+| 尺寸      | 用途                    |
+| --------- | ----------------------- |
+| 1080×1080 | Instagram 正方形        |
+| 1080×1920 | Instagram Story / Reels |
+| 1200×630  | Facebook 封面           |
+| 1500×500  | Twitter 封面            |
+| 1200×627  | LinkedIn 封面           |
+| 2560×1440 | YouTube 封面            |
 
-### Color Hunt 流行配色（2026年热门）
+### 营销物料
 
-#### 优雅大地色系
+| 尺寸      | 用途             |
+| --------- | ---------------- |
+| 1920×1080 | 16:9 宣传海报    |
+| 1080×1920 | 9:16 竖版海报    |
+| 2480×3508 | A4 海报 (300dpi) |
+| 2000×2000 | 方形海报         |
 
-```
-#4B2E2B    #8C5A3C    #C08552    #FFF8F0
-```
-
-#### 梦幻紫罗兰
-
-```
-#9B8EC7    #BDA6CE    #B4D3D9    #F2EAE0
-```
-
-#### 森林绿系
-
-```
-#B0E4CC    #408A71    #285A48    #091413
-```
-
-#### 热情橙红色
-
-```
-#EED9B9    #D53E0F    #9B0F06    #5E0006
-```
+### Banner 广告
 
-#### 活力黄橙
-
-```
-#FCBF49    #F77F00    #D62828    #003049
-```
-
-#### 清新薄荷绿
-
-```
-#EDF7BD    #85C79A    #4E8D9C    #281C59
-```
-
-#### 自然米色系
-
-```
-#BABF94    #F3E4C9    #BFA28C    #A98B76
-```
-
-#### 梦幻粉色系
-
-```
-#FFEABB    #FBC3C1    #FAACBF    #FE81D4
-```
-
-#### 柔和新配色
-
-```
-#FBE8CE    #E4DFB5    #C3CC9B    #9AB17A
-```
-
-#### 海洋蓝调
-
-```
-#1A3263    #547792    #EFD2B0    #FFC570
-```
-
-#### 活力珊瑚粉
-
-```
-#2C687B    #8CC7C4    #FFF6F6    #DB1A1A
-```
-
-#### 清新薄荷粉
-
-```
-#FAFFCB    #F9D0CD    #F891BB    #F13E93
-```
-
-#### 自然绿茵
-
-```
-#F2EDC2    #9FCB98    #6B8E48    #4A7A32
-```
+| 尺寸     | 用途            |
+| -------- | --------------- |
+| 1920×500 | 网站全屏 Banner |
+| 1200×400 | 电商 Banner     |
+| 750×300  | 移动端 Banner   |
+| 728×90   | PC 端横幅       |
 
 ---
 
-### 3. 深色科技风（Dark Tech）
-
-适合：科技产品、AI、开发者工具
-
-```
-背景: #0f172a    深蓝黑
-主色: #3b82f6    蓝色
-强调: #10b981    绿色
-点缀: #ec4899    粉色
-文字: #e2e8f0    浅灰
-边框: #334155    深灰
-```
-
-### 4. 霓虹渐变（Neon Gradient）
-
-适合：现代应用、创意产品
-
-```
-背景: #0D0D1A    深黑
-主色: #00D9FF    青色
-强调: #00FF88    绿色
-点缀: #fbbf24    金色
-文字: #A0AEC0    灰色
-```
-
-### 3. 莫兰迪色系（Morandi）
-
-适合：高端设计、生活方式
-
-```
-背景: #f5f5f4    米白
-主色: #a8a29e    灰棕
-强调: #78716c    深灰
-点缀: #d6d3d1    浅灰
-文字: #44403c    墨色
-```
-
-### 4. 扁平化蓝（Flat Blue）
-
-适合：企业、软件、SaaS
-
-```
-背景: #ffffff    白色
-主色: #007aff    iOS蓝
-强调: #5856d6    紫色
-点缀: #ff9500    橙色
-文字: #1c1c1e    深灰
-```
-
-### 5. 赛博朋克（Cyberpunk）
-
-适合：游戏、科技、潮流
-
-```
-背景: #0a0a0f    纯黑
-主色: #ff006e    品红
-强调: #00f5d4    青色
-点缀: #fee440    黄色
-文字: #f0f0f0    浅白
-```
-
-### 6. 暖色调（Warm Pastel）
-
-适合：食品、咖啡、温馨场景
-
-```
-背景: #fef3e2    奶油白
-主色: #e07a5f    珊瑚红
-强调: #f4a261    杏色
-点缀: #81b29a    薄荷绿
-文字: #3d405b    深蓝灰
-```
-
-### 7. 冷色调（Cool Nordic）
-
-适合：金融、医疗、企业
-
-```
-背景: #f8fafc    冷白
-主色: #0f766e    深青
-强调: #0891b2    天蓝
-点缀: #6366f1    靛蓝
-文字: #0f172a    近黑
-```
-
-### 8. 日式和风（Japanese）
-
-适合：文化、艺术、极简
-
-```
-背景: #f5f0e8    米白
-主色: #1e4d7b    藏蓝
-强调: #c41e3a    朱红
-点缀: #d4a574    古铜金
-文字: #333333    墨色
-```
-
-### 9. 极简主义（Minimal）
-
-适合：奢侈品牌、高端产品
-
-```
-背景: #ffffff    纯白
-主色: #000000    纯黑
-强调: #6b7280    中灰
-点缀: #d1d5db    浅灰
-文字: #111827    近黑
-```
-
-### 10. 活力渐变（Vibrant Gradient）
-
-适合：社交媒体、移动应用
-
-```
-背景: #667eea    蓝紫
-主色: #764ba2    紫色
-强调: #f093fb    粉红
-点缀: #f5576c    玫红
-文字: #ffffff    白色
-```
-
-### 11. 森林自然（Forest Nature）
-
-适合：环保、自然、健康
-
-```
-背景: #f0fdf4    浅绿
-主色: #22c55e    翠绿
-强调: #16a34a    深绿
-点缀: #84cc16    草绿
-文字: #14532d    墨绿
-```
-
-### 12. 复古色调（Retro Vintage）
-
-适合：复古品牌、文艺风格
-
-```
-背景: #fdf6e3    暖白
-主色: #cb4b16    橙红
-强调: #b58900    琥珀
-点缀: #268bd2    钴蓝
-文字: #657b83    青灰
-```
-
----
-
-## 🎯 快速生成（模板方式）
-
-### 一键生成海报
-
-```javascript
-// 现代风格
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'modern' } });
-
-// 商务风格
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'business' } });
-
-// 科技风格
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'tech' } });
-
-// 渐变风格
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'gradient' } });
-
-// 社交媒体
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'social' } });
-
-// 简约风格
-ext_call({ plugin: 'poster', tool: 'generate_poster', args: { template: 'simple' } });
-```
+## 🧩 组件速查表（共 35 个组件）
+
+### 基础元素 (10)
+
+| 组件   | 工具名                   | 用途             |
+| ------ | ------------------------ | ---------------- |
+| 背景   | `add_poster_background`  | 纯色/渐变背景    |
+| 矩形   | `add_poster_rectangle`   | 矩形、圆角矩形   |
+| 圆形   | `add_poster_circle`      | 圆形、椭圆       |
+| 线条   | `add_poster_line`        | 直线、虚线       |
+| 多边形 | `add_poster_polygon`     | 三角形、六边形等 |
+| 文字   | `add_poster_text`        | 普通文字         |
+| 艺术字 | `add_poster_art_text`    | 渐变文字、描边   |
+| 图片   | `add_poster_image`       | 插入图片         |
+| SVG    | `add_poster_svg`         | SVG 矢量图       |
+| 图片框 | `add_poster_image_frame` | 带装饰边框的图片 |
+
+### 布局组件 (2)
+
+| 组件 | 工具名               | 用途               |
+| ---- | -------------------- | ------------------ |
+| 分栏 | `add_poster_columns` | 左右分栏、多栏布局 |
+| 网格 | `add_poster_grid`    | 任意行列网格       |
+
+### 装饰组件 (7) ⭐ 新增
+
+| 组件     | 工具名                       | 用途             |
+| -------- | ---------------------------- | ---------------- |
+| 星形     | `add_poster_star`            | 五角星、六角星等 |
+| 箭头     | `add_poster_arrow`           | 指示箭头         |
+| 环形进度 | `add_poster_progress_circle` | 圆环进度条       |
+| 标签     | `add_poster_chip`            | 小型信息标签     |
+| 图表     | `add_poster_chart`           | 柱状图、饼图     |
+| 水印     | `add_poster_watermark`       | 倾斜水印         |
+| 表格     | `add_poster_table`           | 数据表格         |
+
+### 高级组件 (16)
+
+| 组件     | 工具名                    | 用途         |
+| -------- | ------------------------- | ------------ |
+| 卡片     | `add_poster_card`         | 产品卡片     |
+| 徽章     | `add_poster_badge`        | 标签徽章     |
+| 按钮     | `add_poster_cta`          | 行动号召按钮 |
+| 特性     | `add_poster_feature`      | 功能特性展示 |
+| 特性网格 | `add_poster_feature_grid` | 特性网格布局 |
+| 分隔线   | `add_poster_divider`      | 水平分隔线   |
+| 头像     | `add_poster_avatar`       | 用户头像     |
+| 进度条   | `add_poster_progress`     | 线性进度条   |
+| 评分     | `add_poster_rating`       | 星级评分     |
+| 引用     | `add_poster_quote`        | 引用块       |
+| 统计卡   | `add_poster_stat_card`    | 数据统计卡片 |
+| 标签云   | `add_poster_tag_cloud`    | 标签集合     |
+| 步骤条   | `add_poster_stepper`      | 步骤指示器   |
+| 时间线   | `add_poster_timeline`     | 时间轴       |
+| 列表项   | `add_poster_list_item`    | 列表条目     |
+| 通知     | `add_poster_notification` | 提示消息     |
 
 ---
 
-## 🎯 组件化生成（推荐）
-
-### 步骤 1：创建画布
-
-```javascript
-// 使用预设尺寸
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { preset: 'poster_16_9', background: '#0f172a' },
-});
-
-// 或自定义尺寸
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { width: 1920, height: 1080, background: '#0f172a' },
-});
-```
+## 🆕 新增组件详解
 
-**预设尺寸：**
-
-| key                | 尺寸      | 用途            |
-| ------------------ | --------- | --------------- |
-| `poster_16_9`      | 1920×1080 | 16:9海报        |
-| `poster_square`    | 2000×2000 | 方形海报        |
-| `poster_9_16`      | 1080×1920 | 竖版海报        |
-| `poster_a4`        | 2480×3508 | A4海报          |
-| `social_instagram` | 1080×1080 | Instagram       |
-| `social_story`     | 1080×1920 | Instagram Story |
-| `banner_1920x500`  | 1920×500  | 网站Banner      |
-
-### 步骤 2：添加元素
-
-#### 艺术字标题
+### 星形 (star) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_art_text',
-  args: {
-    text: 'FOLIKO',
-    x: 960,
-    y: 300,
-    fontSize: 120,
-    gradient: { colors: ['#00D9FF', '#00FF88'] },
-    shadow: { color: '#00D9FF', blur: 40 },
-  },
+add_poster_star({
+  cx: 200, // 中心X坐标
+  cy: 200, // 中心Y坐标
+  points: 5, // 星形点数，默认5
+  outerRadius: 60, // 外半径
+  innerRadius: 25, // 内半径（可选，默认外半径*0.4）
+  fill: '#fbbf24', // 填充颜色
+  stroke: '#000000', // 边框颜色
+  strokeWidth: 2, // 边框宽度
+  opacity: 1, // 透明度
+  rotation: 0, // 旋转角度
 });
 ```
 
-#### 普通文字
+### 箭头 (arrow) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: {
-    text: '简约的插件化 Agent 框架',
-    x: 960,
-    y: 420,
-    fontSize: 36,
-    color: '#A0AEC0',
-    align: 'center',
-  },
+add_poster_arrow({
+  x1: 100, // 起点X
+  y1: 200, // 起点Y
+  x2: 300, // 终点X
+  y2: 200, // 终点Y
+  color: '#3b82f6', // 箭头颜色
+  strokeWidth: 3, // 线宽
+  headSize: 15, // 箭头头部大小
+  style: 'solid', // solid(实线) / dashed(虚线)
+  direction: 'end', // end(尾部) / start(头部) / both(双向)
 });
 ```
 
-#### 圆形装饰
+### 环形进度条 (progressCircle) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_circle',
-  args: { cx: 1600, cy: -100, rx: 500, fill: '#00D9FF', opacity: 0.1 },
+add_poster_progress_circle({
+  cx: 200, // 圆心X坐标
+  cy: 200, // 圆心Y坐标
+  radius: 60, // 圆环半径
+  value: 75, // 进度值 0-100
+  strokeWidth: 12, // 环宽度
+  trackColor: '#e5e7eb', // 轨道颜色
+  fillColor: '#3b82f6', // 进度颜色
+  backgroundColor: '#ffffff', // 背景填充色
+  showLabel: true, // 显示百分比标签
+  labelColor: '#3b82f6', // 标签颜色
 });
 ```
 
-#### 星形装饰
+### 标签 (chip) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_star',
-  args: { cx: 200, cy: 200, points: 5, outerRadius: 50, fill: '#fbbf24', opacity: 0.8 },
+add_poster_chip({
+  x: 200, // X坐标（居中）
+  y: 150, // Y坐标
+  text: 'NEW', // 标签文字
+  background: '#ef4444', // 背景色
+  color: '#ffffff', // 文字颜色
+  borderColor: '#dc2626', // 边框颜色
+  fontSize: 14, // 字体大小
+  padding: 12, // 内边距
+  radius: 16, // 圆角
+  icon: '⭐', // 前置图标（可选）
 });
 ```
 
-#### 分隔线
+### 图表 (chart) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_divider',
-  args: { x: 960, y: 480, width: 200, color: '#00D9FF' },
-});
-```
-
-#### 特性网格
+// 柱状图
+add_poster_chart({
+  type: 'bar', // 类型：bar / pie
+  x: 100,
+  y: 300,
+  width: 500,
+  height: 250,
+  data: [
+    { label: '一月', value: 120, color: '#3b82f6' },
+    { label: '二月', value: 90, color: '#10b981' },
+    { label: '三月', value: 150, color: '#f59e0b' },
+    { label: '四月', value: 110, color: '#ef4444' },
+  ],
+  showLabels: true, // 显示标签
+  showValues: true, // 显示数值
+});
+
+// 饼图
+add_poster_chart({
+  type: 'pie',
+  x: 650,
+  y: 300,
+  width: 250,
+  height: 250,
+  data: [
+    { label: '桌面端', value: 45, color: '#3b82f6' },
+    { label: '移动端', value: 35, color: '#10b981' },
+    { label: '平板', value: 20, color: '#f59e0b' },
+  ],
+  showLabels: true,
+});
+```
+
+### 水印 (watermark) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_feature_grid',
-  args: {
-    x: 90,
-    y: 280,
-    columns: 3,
-    itemWidth: 560,
-    itemHeight: 120,
-    items: [
-      { icon: '⚡', title: '插件化架构', description: '核心简单', color: '#3b82f6' },
-      { icon: '🤖', title: '多 AI 支持', description: '多种大模型', color: '#10b981' },
-      { icon: '📡', title: '流式输出', description: '实时响应', color: '#ec4899' },
-    ],
-    background: '#1e293b',
-    borderColor: '#3b82f6',
-  },
+add_poster_watermark({
+  text: 'VB-Agent', // 水印文字
+  cx: 960, // 中心X坐标
+  cy: 540, // 中心Y坐标
+  color: 'rgba(200,200,200,0.3)', // 水印颜色
+  fontSize: 120, // 字体大小
+  fontFamily: 'sans-serif',
+  opacity: 0.3, // 透明度
+  rotation: -30, // 旋转角度
+  align: 'center', // 对齐方式
 });
 ```
 
-#### 统计卡片
+### 表格 (table) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 90,
-    y: 580,
-    title: '27+',
-    subtitle: '内置插件',
-    icon: '📦',
-    color: '#3b82f6',
-    background: '#1e293b',
-    borderColor: '#3b82f6',
-  },
-});
-```
-
-#### 进度条
+add_poster_table({
+  x: 100,
+  y: 400,
+  width: 800,
+  columns: [
+    { title: '功能', width: 250, align: 'left' },
+    { title: '状态', width: 200 },
+    { title: '价格', width: 150 },
+  ],
+  rows: [
+    ['智能对话', '可用', '免费'],
+    ['图片生成', '可用', '$29'],
+    ['代码助手', 'Beta', '免费'],
+  ],
+  rowHeight: 45,
+  headerBg: '#1e293b', // 表头背景
+  headerColor: '#ffffff', // 表头文字色
+  borderColor: '#e0e0e0',
+  fontSize: 14,
+  striped: true, // 斑马纹
+});
+```
+
+### 分栏布局 (columns) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_progress',
-  args: {
-    x: 1450,
-    y: 640,
-    width: 380,
-    value: 95,
-    label: '响应速度 95%',
-    color: '#3b82f6',
-    background: '#334155',
-  },
+add_poster_columns({
+  x: 100,
+  y: 100,
+  width: 1720,
+  height: 400,
+  columns: 3, // 列数，默认2
+  gap: 30, // 列间距
+  background: '#fafafa',
+  borderColor: '#e0e0e0',
+  radius: 8,
+  align: 'top', // top / center / bottom
 });
 ```
 
-#### 环形进度
+### 网格布局 (grid) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_progress_circle',
-  args: {
-    cx: 540,
-    cy: 400,
-    radius: 80,
-    value: 85,
-    strokeWidth: 15,
-    fillColor: '#3b82f6',
-    trackColor: '#334155',
-    showLabel: true,
-  },
+add_poster_grid({
+  x: 100,
+  y: 550,
+  width: 1720,
+  height: 400,
+  columns: 4, // 列数，默认3
+  rows: 2, // 行数，默认2
+  gapX: 20, // 水平间距
+  gapY: 20, // 垂直间距
+  background: '#fafafa',
+  borderColor: '#d0d0d0',
+  radius: 0,
+  direction: 'row', // row(行优先) / column(列优先)
 });
 ```
 
-#### 标签
+### 图片框 (imageFrame) ⭐
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_chip',
-  args: {
-    x: 550,
-    y: 720,
-    text: 'v1.1.0',
-    background: '#3b82f6',
-    color: '#ffffff',
-    fontSize: 16,
-  },
-});
-```
-
-#### CTA 按钮
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_cta',
-  args: {
-    x: 960,
-    y: 850,
-    text: '立即体验 →',
-    background: '#00D9FF',
-    color: '#0D0D1A',
-    fontSize: 24,
-    radius: 30,
-  },
-});
-```
-
-#### 评分
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_rating',
-  args: {
-    x: 960,
-    y: 950,
-    value: 4.5,
-    count: 5,
-    color: '#fbbf24',
-    size: 24,
-    label: 'GitHub 4.2k Stars',
-  },
-});
-```
-
-#### 引用块
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_quote',
-  args: {
-    x: 100,
-    y: 780,
-    quote: '让 AI 助手开发更简单',
-    color: '#c4b5fd',
-    background: '#1e293b',
-  },
-});
-```
-
-#### 水印
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_watermark',
-  args: {
-    text: 'FOLIKO',
-    cx: 960,
-    cy: 600,
-    fontSize: 250,
-    color: 'rgba(255,255,255,0.02)',
-    rotation: -15,
-  },
-});
-```
-
-### 步骤 3：导出
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'export_poster_canvas',
-  args: {
-    filename: 'my-poster',
-    format: 'png',
-    outputDir: 'output',
-  },
+add_poster_image_frame({
+  src: 'image.png', // 图片路径或URL
+  x: 100,
+  y: 100,
+  width: 400,
+  height: 300,
+  borderColor: '#ffffff', // 边框颜色
+  borderWidth: 3, // 边框宽度
+  outerColor: '#1a1a2e', // 外边框颜色
+  outerWidth: 6, // 外边框宽度
+  radius: 8, // 圆角
+  fit: 'cover', // cover / contain / fill
 });
 ```
 
 ---
 
-## 📋 组件速查表
-
-### 画布管理
-
-| 工具                     | 说明         |
-| ------------------------ | ------------ |
-| `create_poster_canvas`   | 创建画布     |
-| `get_poster_canvas_info` | 获取画布信息 |
-| `clear_poster_canvas`    | 清除画布     |
-
-### 导出
-
-| 工具                   | 说明        |
-| ---------------------- | ----------- |
-| `export_poster_canvas` | 导出 PNG    |
-| `export_poster_svg`    | 导出 SVG    |
-| `export_poster_base64` | 导出 Base64 |
-
-### 基础元素
-
-| 工具                     | 说明   |
-| ------------------------ | ------ |
-| `add_poster_background`  | 背景   |
-| `add_poster_rectangle`   | 矩形   |
-| `add_poster_circle`      | 圆形   |
-| `add_poster_line`        | 线条   |
-| `add_poster_polygon`     | 多边形 |
-| `add_poster_text`        | 文字   |
-| `add_poster_art_text`    | 艺术字 |
-| `add_poster_image`       | 图片   |
-| `add_poster_svg`         | SVG    |
-| `add_poster_image_frame` | 图片框 |
-
-### 布局组件
-
-| 工具                 | 说明 |
-| -------------------- | ---- |
-| `add_poster_columns` | 分栏 |
-| `add_poster_grid`    | 网格 |
-
-### 装饰组件
-
-| 工具                         | 说明     |
-| ---------------------------- | -------- |
-| `add_poster_star`            | 星形     |
-| `add_poster_arrow`           | 箭头     |
-| `add_poster_progress_circle` | 环形进度 |
-| `add_poster_chip`            | 标签     |
-| `add_poster_chart`           | 图表     |
-| `add_poster_watermark`       | 水印     |
-| `add_poster_table`           | 表格     |
-
-### 高级组件
-
-| 工具                      | 说明     |
-| ------------------------- | -------- |
-| `add_poster_card`         | 卡片     |
-| `add_poster_badge`        | 徽章     |
-| `add_poster_cta`          | CTA按钮  |
-| `add_poster_feature`      | 特性     |
-| `add_poster_feature_grid` | 特性网格 |
-| `add_poster_divider`      | 分隔线   |
-| `add_poster_avatar`       | 头像     |
-| `add_poster_progress`     | 进度条   |
-| `add_poster_rating`       | 评分     |
-| `add_poster_quote`        | 引用     |
-| `add_poster_stat_card`    | 统计卡   |
-| `add_poster_tag_cloud`    | 标签云   |
-| `add_poster_stepper`      | 步骤条   |
-| `add_poster_timeline`     | 时间线   |
-| `add_poster_list_item`    | 列表项   |
-| `add_poster_notification` | 通知     |
-
-### 设计组件（新增）
-
-| 工具                        | 说明      |
-| --------------------------- | --------- |
-| `add_poster_button`         | 按钮      |
-| `add_poster_icon`           | 图标      |
-| `add_poster_qrcode`         | 二维码    |
-| `add_poster_frame`          | 装饰边框  |
-| `add_poster_bubble`         | 对话气泡  |
-| `add_poster_ribbon`         | 丝带/飘带 |
-| `add_poster_seal`           | 印章      |
-| `add_poster_highlight_text` | 高亮文字  |
-| `add_poster_barcode`        | 条形码    |
-
-### 模板
-
-| 工具                     | 说明         |
-| ------------------------ | ------------ |
-| `generate_poster`        | 一键生成     |
-| `list_poster_templates`  | 列出模板     |
-| `list_poster_components` | 列出组件     |
-| `list_poster_presets`    | 列出预设尺寸 |
-
----
+## 🎨 日本设计配色方案（来源：MUUUUU）
 
-## 🆕 新增设计组件详解
+### 1. 和風・禅意 (Japanese Zen)
 
-### 按钮 (button)
-
-支持图标、渐变、阴影的现代化按钮。
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_button',
-  args: {
-    x: 960,
-    y: 800,
-    width: 280,
-    height: 70,
-    text: '立即购买',
-    fontSize: 28,
-    color: '#ffffff',
-    backgroundColor: '#3b82f6',
-    borderColor: '#2563eb',
-    borderWidth: 2,
-    radius: 35,
-    shadow: { color: '#3b82f6', blur: 20, offsetX: 0, offsetY: 8 },
-    gradient: { colors: ['#3b82f6', '#8b5cf6'] },
-    icon: '🛒',
-    iconPosition: 'left',
-  },
-});
 ```
-
-### 图标 (icon)
-
-支持 emoji 和图片的图标组件。
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_icon',
-  args: {
-    x: 100,
-    y: 100,
-    size: 80,
-    icon: '⭐',
-    color: '#fbbf24',
-    backgroundColor: '#1e293b',
-    borderColor: '#fbbf24',
-    borderWidth: 2,
-    radius: 16,
-    shadow: { color: '#000000', blur: 10, offsetX: 2, offsetY: 4 },
-  },
-});
+主色: #1E4D7B (藏蓝 / 藍色)
+强调: #C41E3A (朱红 / 紅色)
+背景: #F5F0E8 (米白 / 白茶)
+文字: #333333 (墨色)
+点缀: #D4A574 (古铜金)
 ```
 
-### 二维码 (qrcode)
+### 2. モダン和風 (Modern Japanese)
 
-本地生成二维码，支持自定义颜色和 Logo。
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_qrcode',
-  args: {
-    x: 1600,
-    y: 700,
-    size: 200,
-    content: 'https://example.com',
-    color: '#0f172a',
-    backgroundColor: '#ffffff',
-    logo: 'https://example.com/logo.png',
-    logoSize: 40,
-  },
-});
 ```
-
-### 装饰边框 (frame)
-
-多种边框样式：simple、double、dashed、dotted、corner、vintage、modern、floral。
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_frame',
-  args: {
-    x: 100,
-    y: 100,
-    width: 500,
-    height: 400,
-    style: 'vintage', // 边框样式
-    color: '#c9a227',
-    borderWidth: 3,
-    radius: 8,
-    padding: 20,
-  },
-});
+主色: #2C3E50 (墨灰)
+强调: #C0392B (深红)
+背景: #ECE5D8 (浅麻)
+文字: #2C2C2C (浓墨)
+点缀: #D4AF37 (金色)
 ```
 
-**style 可选值：**
-
-- `simple` - 简单矩形
-- `double` - 双线边框
-- `dashed` - 虚线边框
-- `dotted` - 点线边框
-- `corner` - 四角装饰
-- `vintage` - 复古边框（双线+角装饰）
-- `modern` - 现代边框（粗细交替）
-- `floral` - 花纹边框
+---
 
-### 对话气泡 (bubble)
+## 🌸 日本特色设计风格（来源：MUUUUU 分类）
 
-带尾巴的对话气泡组件。
+### 1. 和風デザイン (Japanese Style)
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_bubble',
-  args: {
-    x: 200,
-    y: 500,
-    width: 400,
-    height: 120,
-    text: '你好！有什么可以帮助你的吗？',
-    fontSize: 24,
-    color: '#1e293b',
-    backgroundColor: '#ffffff',
-    borderColor: '#e2e8f0',
-    borderWidth: 1,
-    radius: 20,
-    tailDirection: 'bottom', // 尾巴方向: bottom, top, left, right
-    tailPosition: 'left', // 尾巴位置: left, center, right
-    shadow: { color: '#000000', blur: 10, offsetX: 3, offsetY: 3 },
-  },
-});
-```
-
-### 丝带/飘带 (ribbon)
-
-三种样式：fold（折叠）、diagonal（对角）、corner（角落）。
+compose_poster({
+  components: [
+    { type: 'background', color: '#F5F0E8' },
+    { type: 'rectangle', x: 80, y: 80, width: 920, height: 920, stroke: '#1E4D7B', strokeWidth: 1 },
+    { type: 'circle', cx: 540, cy: 300, rx: 6, fill: '#C41E3A' },
+    {
+      type: 'artText',
+      text: '花道',
+      x: 540,
+      y: 550,
+      fontSize: 100,
+      gradient: { colors: ['#1E4D7B', '#333333'] },
+    },
+    { type: 'divider', x: 540, y: 750, width: 100, color: '#C41E3A', thickness: 2 },
+    {
+      type: 'text',
+      text: 'Ikebana',
+      x: 540,
+      y: 820,
+      fontSize: 24,
+      color: '#666666',
+      align: 'center',
+    },
+  ],
+});
+```
+
+### 2. かわいい系 (Kawaii / Cute)
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_ribbon',
-  args: {
-    x: 100,
-    y: 50,
-    width: 200,
-    text: '限时特惠',
-    fontSize: 24,
-    color: '#ffffff',
-    backgroundColor: '#e74c3c',
-    borderColor: '#c0392b',
-    borderWidth: 2,
-    style: 'fold', // fold, diagonal, corner
-    position: 'top',
-    shadow: { color: '#000000', blur: 8, offsetX: 3, offsetY: 3 },
-  },
+compose_poster({
+  components: [
+    { type: 'background', color: '#FFF5E6' },
+    { type: 'circle', cx: 200, cy: 200, rx: 100, fill: '#FFB6C1', opacity: 0.6 },
+    { type: 'star', cx: 400, cy: 300, points: 5, outerRadius: 60, fill: '#FFB6C1' },
+    {
+      type: 'artText',
+      text: 'HELLO',
+      x: 540,
+      y: 450,
+      fontSize: 120,
+      gradient: { colors: ['#FF6B9D', '#C44569'] },
+    },
+    { type: 'chip', x: 540, y: 550, text: 'NEW', background: '#FF6B9D', color: '#ffffff' },
+    {
+      type: 'cta',
+      x: 540,
+      y: 700,
+      text: 'Learn More',
+      background: '#FF6B9D',
+      color: '#FFFFFF',
+      radius: 25,
+    },
+  ],
 });
 ```
 
-### 印章 (seal)
-
-印章效果组件，支持多种形状。
-
-```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_seal',
-  args: {
-    x: 1700,
-    y: 900,
-    size: 120,
-    text: '正品',
-    fontSize: 20,
-    color: '#e74c3c',
-    style: 'circle', // circle, square, star, hexagon
-    borderWidth: 4,
-  },
-});
-```
+---
 
-### 高亮文字 (highlightText)
+## 📊 实用数据可视化示例
 
-多种高亮效果：marker、underline、background、stroke、neon。
+### 仪表盘卡片
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_highlight_text',
-  args: {
-    x: 300,
-    y: 400,
-    text: '重要通知',
-    fontSize: 60,
-    fontFamily: 'sans-serif',
-    color: '#1e293b',
-    highlightColor: '#fbbf24',
-    highlightStyle: 'marker', // marker, underline, background, stroke, neon
-    highlightWidth: 20,
-    strokeWidth: 3,
-    shadow: { color: '#fbbf24', blur: 15, offsetX: 2, offsetY: 2 },
-  },
-});
-```
-
-**highlightStyle 可选值：**
-
-- `marker` - 荧光笔效果（倾斜半透明矩形）
-- `underline` - 下划线
-- `background` - 背景色块
-- `stroke` - 文字描边
-- `neon` - 霓虹发光效果
-
-### 条形码 (barcode)
-
-生成条形码，支持简单条形码和 API 条形码。
+compose_poster({
+  components: [
+    { type: 'background', color: '#0f172a' },
+    { type: 'text', text: '数据概览', x: 100, y: 80, fontSize: 32, color: '#ffffff' },
+
+    // 环形进度条
+    {
+      type: 'progressCircle',
+      cx: 200,
+      cy: 250,
+      radius: 80,
+      value: 75,
+      strokeWidth: 15,
+      fillColor: '#3b82f6',
+      trackColor: '#334155',
+      showLabel: true,
+    },
+    {
+      type: 'progressCircle',
+      cx: 450,
+      cy: 250,
+      radius: 80,
+      value: 60,
+      strokeWidth: 15,
+      fillColor: '#10b981',
+      trackColor: '#334155',
+      showLabel: true,
+    },
+    {
+      type: 'progressCircle',
+      cx: 700,
+      cy: 250,
+      radius: 80,
+      value: 45,
+      strokeWidth: 15,
+      fillColor: '#f59e0b',
+      trackColor: '#334155',
+      showLabel: true,
+    },
+
+    // 柱状图
+    {
+      type: 'chart',
+      type: 'bar',
+      x: 100,
+      y: 400,
+      width: 600,
+      height: 300,
+      data: [
+        { label: '周一', value: 120, color: '#3b82f6' },
+        { label: '周二', value: 90, color: '#10b981' },
+        { label: '周三', value: 150, color: '#f59e0b' },
+        { label: '周四', value: 110, color: '#ef4444' },
+        { label: '周五', value: 180, color: '#8b5cf6' },
+      ],
+      showLabels: true,
+      showValues: true,
+    },
+
+    // 数据表格
+    {
+      type: 'table',
+      x: 750,
+      y: 400,
+      width: 400,
+      columns: [
+        { title: '指标', width: 150 },
+        { title: '数值', width: 100 },
+      ],
+      rows: [
+        ['总用户', '10,000'],
+        ['活跃用户', '7,500'],
+        ['增长率', '+25%'],
+      ],
+      headerBg: '#1e293b',
+      headerColor: '#ffffff',
+    },
+  ],
+});
+```
+
+### 特性展示海报
 
 ```javascript
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_barcode',
-  args: {
-    x: 1500,
-    y: 900,
-    width: 300,
-    height: 100,
-    content: '123456789012',
-    showText: true,
-    textColor: '#1e293b',
-    fontSize: 16,
-  },
+compose_poster({
+  components: [
+    { type: 'background', color: '#ffffff' },
+    {
+      type: 'text',
+      text: '产品特性',
+      x: 960,
+      y: 80,
+      fontSize: 48,
+      color: '#1e293b',
+      align: 'center',
+    },
+
+    // 分栏布局
+    {
+      type: 'columns',
+      x: 100,
+      y: 150,
+      width: 1720,
+      height: 400,
+      columns: 3,
+      gap: 40,
+      borderColor: '#e2e8f0',
+    },
+
+    // 星星装饰
+    { type: 'star', cx: 200, cy: 200, points: 5, outerRadius: 40, fill: '#fbbf24' },
+    { type: 'star', cx: 600, cy: 200, points: 6, outerRadius: 35, fill: '#f472b6' },
+    { type: 'star', cx: 1000, cy: 200, points: 8, outerRadius: 38, fill: '#60a5fa' },
+
+    // 标签
+    { type: 'chip', x: 200, y: 350, text: 'AI驱动', background: '#dbeafe', color: '#2563eb' },
+    { type: 'chip', x: 600, y: 350, text: '实时响应', background: '#dcfce7', color: '#16a34a' },
+    { type: 'chip', x: 1000, y: 350, text: '安全可靠', background: '#fef3c7', color: '#d97706' },
+
+    // CTA按钮
+    {
+      type: 'cta',
+      x: 960,
+      y: 600,
+      text: '立即体验 →',
+      background: '#3b82f6',
+      color: '#ffffff',
+      radius: 30,
+    },
+  ],
 });
 ```
 
 ---
 
-## 📝 完整示例
-
-### 示例 1：Foliko 项目海报（深色科技风）
-
-```javascript
-// 1. 创建画布
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { width: 1920, height: 1080, background: '#0f172a' },
-});
-
-// 2. 装饰元素
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_circle',
-  args: { cx: 1700, cy: -100, rx: 400, fill: '#3b82f6', opacity: 0.1 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_star',
-  args: { cx: 180, cy: 180, points: 5, outerRadius: 40, fill: '#fbbf24', opacity: 0.9 },
-});
-
-// 3. 标题
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_art_text',
-  args: {
-    text: 'FOLIKO',
-    x: 960,
-    y: 120,
-    fontSize: 100,
-    gradient: { colors: ['#3b82f6', '#8b5cf6'] },
-    shadow: { color: '#3b82f6', blur: 50 },
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: {
-    text: '简约的插件化 Agent 框架',
-    x: 960,
-    y: 190,
-    fontSize: 28,
-    color: '#94a3b8',
-    align: 'center',
-  },
-});
-
-// 4. 特性网格
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_feature_grid',
-  args: {
-    x: 90,
-    y: 280,
-    columns: 3,
-    itemWidth: 560,
-    itemHeight: 120,
-    items: [
-      { icon: '⚡', title: '插件化架构', description: '核心简单', color: '#3b82f6' },
-      { icon: '🤖', title: '多 AI 支持', description: '多种大模型', color: '#10b981' },
-      { icon: '📡', title: '流式输出', description: '实时响应', color: '#ec4899' },
-      { icon: '🔧', title: '内置工具', description: '85+工具', color: '#f59e0b' },
-      { icon: '🧩', title: '技能系统', description: '可扩展', color: '#8b5cf6' },
-      { icon: '🎯', title: '子 Agent', description: '分工协作', color: '#06b6d4' },
-    ],
-    background: '#1e293b',
-    borderColor: '#3b82f6',
-  },
-});
-
-// 5. 统计卡片
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 90,
-    y: 580,
-    title: '27+',
-    subtitle: '内置插件',
-    icon: '📦',
-    color: '#3b82f6',
-    background: '#1e293b',
-    borderColor: '#3b82f6',
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 430,
-    y: 580,
-    title: '25+',
-    subtitle: '内置技能',
-    icon: '✨',
-    color: '#10b981',
-    background: '#1e293b',
-    borderColor: '#10b981',
-  },
-});
-
-// 6. 标签
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_chip',
-  args: { x: 550, y: 870, text: 'v1.1.0', background: '#3b82f6', color: '#ffffff', fontSize: 14 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_chip',
-  args: {
-    x: 680,
-    y: 870,
-    text: 'MIT License',
-    background: '#10b981',
-    color: '#ffffff',
-    fontSize: 14,
-  },
-});
-
-// 7. CTA
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_cta',
-  args: {
-    x: 960,
-    y: 940,
-    text: 'npm install -g foliko',
-    background: '#3b82f6',
-    color: '#ffffff',
-    fontSize: 22,
-    radius: 30,
-  },
-});
-
-// 8. 水印
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_watermark',
-  args: {
-    text: 'FOLIKO',
-    cx: 960,
-    cy: 600,
-    fontSize: 250,
-    color: 'rgba(255,255,255,0.02)',
-    rotation: -15,
-  },
-});
-
-// 9. 导出
-ext_call({
-  plugin: 'poster',
-  tool: 'export_poster_canvas',
-  args: { filename: 'foliko-poster', format: 'png', outputDir: 'output' },
-});
-```
-
-### 示例 2：赛博朋克风格海报
-
-```javascript
-// 使用赛博朋克配色
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { width: 1920, height: 1080, background: '#0a0a0f' },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_circle',
-  args: { cx: 1600, cy: 200, rx: 400, fill: '#ff006e', opacity: 0.15 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_circle',
-  args: { cx: 200, cy: 900, rx: 300, fill: '#00f5d4', opacity: 0.1 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_art_text',
-  args: {
-    text: 'CYBER',
-    x: 960,
-    y: 300,
-    fontSize: 140,
-    gradient: { colors: ['#ff006e', '#00f5d4'] },
-    shadow: { color: '#ff006e', blur: 50 },
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: { text: '未来已来', x: 960, y: 420, fontSize: 48, color: '#f0f0f0', align: 'center' },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_cta',
-  args: {
-    x: 960,
-    y: 600,
-    text: '探索未来 →',
-    background: '#ff006e',
-    color: '#ffffff',
-    fontSize: 24,
-    radius: 30,
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'export_poster_canvas',
-  args: { filename: 'cyber-poster', format: 'png', outputDir: 'output' },
-});
-```
+## 📋 完整海报示例
 
-### 示例 3：温暖风格海报
+### AI 产品发布海报
 
 ```javascript
-// 使用暖色调配色
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { width: 1080, height: 1080, background: '#fef3e2' },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_art_text',
-  args: {
-    text: 'COFFEE',
-    x: 540,
-    y: 350,
-    fontSize: 100,
-    gradient: { colors: ['#e07a5f', '#f4a261'] },
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: {
-    text: '慢下来，享受生活',
-    x: 540,
-    y: 450,
-    fontSize: 32,
-    color: '#3d405b',
-    align: 'center',
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_chip',
-  args: {
-    x: 450,
-    y: 600,
-    text: '☕ 手冲咖啡',
-    background: '#e07a5f',
-    color: '#ffffff',
-    fontSize: 18,
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_cta',
-  args: {
-    x: 540,
-    y: 750,
-    text: '了解更多',
-    background: '#81b29a',
-    color: '#ffffff',
-    fontSize: 20,
-    radius: 25,
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'export_poster_canvas',
-  args: { filename: 'coffee-poster', format: 'png', outputDir: 'output' },
-});
-```
-
-### 示例 4：产品宣传海报（使用新增组件）
-
-展示 button、icon、qrcode、frame、bubble、ribbon、seal、highlightText、barcode 等新组件。
+compose_poster({
+  components: [
+    { type: 'background', color: '#0D0D1A' },
+    { type: 'circle', cx: 900, cy: 100, rx: 200, fill: '#00D9FF', opacity: 0.1 },
+    { type: 'star', cx: 200, cy: 200, points: 5, outerRadius: 60, fill: '#fbbf24', opacity: 0.8 },
+    {
+      type: 'artText',
+      text: 'FOLIKO',
+      x: 540,
+      y: 320,
+      fontSize: 140,
+      gradient: { colors: ['#00D9FF', '#00FF88'] },
+      shadow: { color: '#00D9FF', blur: 40 },
+    },
+    {
+      type: 'text',
+      text: '简约的插件化 Agent 框架',
+      x: 540,
+      y: 420,
+      fontSize: 36,
+      color: '#A0AEC0',
+      align: 'center',
+    },
+    { type: 'divider', x: 540, y: 500, width: 200, color: '#00D9FF' },
+    {
+      type: 'featureGrid',
+      x: 90,
+      y: 560,
+      columns: 3,
+      itemWidth: 300,
+      itemHeight: 150,
+      items: [
+        { icon: '⚡', title: '插件化架构', description: '核心简单' },
+        { icon: '🤖', title: '多 AI 支持', description: '多种大模型' },
+        { icon: '📡', title: '流式输出', description: '实时响应' },
+      ],
+      background: '#1A1A2E',
+      borderColor: '#00D9FF',
+    },
+    {
+      type: 'cta',
+      x: 540,
+      y: 950,
+      text: 'npm install -g foliko',
+      background: '#00D9FF',
+      color: '#0D0D1A',
+      fontSize: 22,
+    },
+  ],
+});
+```
+
+### 数据仪表盘
 
 ```javascript
-// 1. 创建画布
-ext_call({
-  plugin: 'poster',
-  tool: 'create_poster_canvas',
-  args: { width: 1200, height: 1600, background: '#f8fafc' },
-});
-
-// 2. 装饰边框
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_frame',
-  args: {
-    x: 40,
-    y: 40,
-    width: 1120,
-    height: 1520,
-    style: 'vintage',
-    color: '#c9a227',
-    borderWidth: 4,
-    padding: 30,
-  },
-});
-
-// 3. 丝带标签
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_ribbon',
-  args: {
-    x: 800,
-    y: 80,
-    width: 200,
-    text: '新品上市',
-    fontSize: 22,
-    backgroundColor: '#e74c3c',
-    style: 'fold',
-  },
-});
-
-// 4. 主标题（高亮文字）
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_highlight_text',
-  args: {
-    x: 100,
-    y: 200,
-    text: '智能手表 Pro',
-    fontSize: 72,
-    fontFamily: 'sans-serif',
-    color: '#1e293b',
-    highlightColor: '#fbbf24',
-    highlightStyle: 'marker',
-  },
-});
-
-// 5. 图标装饰
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_icon',
-  args: { x: 100, y: 280, size: 60, icon: '⌚', backgroundColor: '#1e293b', radius: 12 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_icon',
-  args: { x: 180, y: 280, size: 60, icon: '🔋', backgroundColor: '#10b981', radius: 12 },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_icon',
-  args: { x: 260, y: 280, size: 60, icon: '💧', backgroundColor: '#3b82f6', radius: 12 },
-});
-
-// 6. 对话气泡
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_bubble',
-  args: {
-    x: 100,
-    y: 400,
-    width: 500,
-    height: 100,
-    text: '限时特惠，仅剩 3 天！',
-    fontSize: 24,
-    backgroundColor: '#fef3c7',
-    borderColor: '#fbbf24',
-    tailDirection: 'bottom',
-    tailPosition: 'left',
-  },
-});
-
-// 7. 产品介绍文字
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: {
-    x: 100,
-    y: 580,
-    text: '全新智能手表，支持心率监测、GPS定位、防水50米。',
-    fontSize: 28,
-    color: '#64748b',
-  },
-});
-
-// 8. 印章认证
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_seal',
-  args: {
-    x: 900,
-    y: 500,
-    size: 100,
-    text: '正品',
-    fontSize: 18,
-    color: '#e74c3c',
-    style: 'circle',
-  },
-});
-
-// 9. CTA 按钮
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_button',
-  args: {
-    x: 350,
-    y: 700,
-    width: 500,
-    height: 80,
-    text: '立即购买 →',
-    fontSize: 32,
-    backgroundColor: '#1e293b',
-    gradient: { colors: ['#1e293b', '#334155'] },
-    radius: 40,
-    shadow: { color: '#1e293b', blur: 20, offsetY: 8 },
-  },
-});
-
-// 10. 统计卡片
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 100,
-    y: 850,
-    title: '1999',
-    subtitle: '原价',
-    icon: '💰',
-    color: '#94a3b8',
-    background: '#f1f5f9',
-    borderColor: '#e2e8f0',
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 350,
-    y: 850,
-    title: '1499',
-    subtitle: '限时价',
-    icon: '🔥',
-    color: '#e74c3c',
-    background: '#fef2f2',
-    borderColor: '#fecaca',
-  },
-});
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_stat_card',
-  args: {
-    x: 600,
-    y: 850,
-    title: '4.9',
-    subtitle: '评分',
-    icon: '⭐',
-    color: '#f59e0b',
-    background: '#fffbeb',
-    borderColor: '#fde68a',
-  },
-});
-
-// 11. 分隔线
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_divider',
-  args: { x: 100, y: 1050, width: 1000, color: '#e2e8f0', style: 'dashed' },
-});
-
-// 12. 二维码
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_qrcode',
-  args: {
-    x: 150,
-    y: 1150,
-    size: 180,
-    content: 'https://example.com/shop/watch-pro',
-    color: '#1e293b',
-    backgroundColor: '#ffffff',
-  },
-});
-
-// 13. 条形码
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_barcode',
-  args: {
-    x: 700,
-    y: 1200,
-    width: 300,
-    height: 80,
-    content: '6923456789012',
-    showText: true,
-    textColor: '#1e293b',
-  },
-});
-
-// 14. 页脚文字
-ext_call({
-  plugin: 'poster',
-  tool: 'add_poster_text',
-  args: {
-    x: 600,
-    y: 1450,
-    text: '扫描二维码访问官网',
-    fontSize: 20,
-    color: '#94a3b8',
-    align: 'center',
-  },
-});
-
-// 15. 导出
-ext_call({
-  plugin: 'poster',
-  tool: 'export_poster_canvas',
-  args: { filename: 'product-poster', format: 'png', outputDir: 'output' },
+compose_poster({
+  components: [
+    { type: 'background', color: '#f8fafc' },
+    {
+      type: 'text',
+      text: '数据概览',
+      x: 960,
+      y: 60,
+      fontSize: 36,
+      color: '#1e293b',
+      align: 'center',
+    },
+
+    // 环形进度
+    {
+      type: 'progressCircle',
+      cx: 200,
+      cy: 200,
+      radius: 70,
+      value: 85,
+      strokeWidth: 12,
+      fillColor: '#3b82f6',
+      showLabel: true,
+    },
+    {
+      type: 'text',
+      text: '完成率',
+      x: 200,
+      y: 300,
+      fontSize: 14,
+      color: '#64748b',
+      align: 'center',
+    },
+
+    {
+      type: 'progressCircle',
+      cx: 450,
+      cy: 200,
+      radius: 70,
+      value: 60,
+      strokeWidth: 12,
+      fillColor: '#10b981',
+      showLabel: true,
+    },
+    {
+      type: 'text',
+      text: '增长率',
+      x: 450,
+      y: 300,
+      fontSize: 14,
+      color: '#64748b',
+      align: 'center',
+    },
+
+    // 柱状图
+    {
+      type: 'chart',
+      type: 'bar',
+      x: 700,
+      y: 100,
+      width: 500,
+      height: 250,
+      data: [
+        { label: 'Q1', value: 120, color: '#3b82f6' },
+        { label: 'Q2', value: 150, color: '#10b981' },
+        { label: 'Q3', value: 180, color: '#f59e0b' },
+        { label: 'Q4', value: 220, color: '#ef4444' },
+      ],
+      showLabels: true,
+      showValues: true,
+    },
+
+    // 表格
+    {
+      type: 'table',
+      x: 100,
+      y: 400,
+      width: 1720,
+      columns: [
+        { title: '产品', width: 400, align: 'left' },
+        { title: '销量', width: 200 },
+        { title: '增长率', width: 200 },
+      ],
+      rows: [
+        ['智能助手 Pro', '1,250', '+25%'],
+        ['图片生成器', '890', '+18%'],
+        ['代码助手', '2,100', '+42%'],
+      ],
+      headerBg: '#1e293b',
+      headerColor: '#ffffff',
+      fontSize: 14,
+    },
+
+    // 水印
+    {
+      type: 'watermark',
+      text: 'FOLIKO',
+      cx: 960,
+      cy: 700,
+      fontSize: 200,
+      color: 'rgba(0,0,0,0.03)',
+      rotation: -15,
+    },
+  ],
 });
 ```
 
 ---
 
-## 🔗 参考资源
+## 🛠️ 工具速查
 
-| 网站            | URL                     | 特点         |
-| --------------- | ----------------------- | ------------ |
-| Coolors         | https://coolors.co      | 智能配色生成 |
-| Color Hunt      | https://colorhunt.co    | 流行配色分享 |
-| Adobe Color     | https://color.adobe.com | 配色趋势     |
-| Material Design | https://m3.material.io  | 设计系统配色 |
+| 工具                     | 用途            |
+| ------------------------ | --------------- |
+| `list_poster_components` | 列出所有组件    |
+| `list_poster_templates`  | 列出所有模板    |
+| `generate_poster`        | 一键生成海报    |
+| `compose_poster`         | 组件化生成海报  |
+| `export_poster_canvas`   | 导出 PNG        |
+| `export_poster_svg`      | 导出 SVG (矢量) |
 
 ---
 
-## 🎨 设计理念与原则
+## 🔤 Emoji 字体说明
 
-### 核心设计原则（来自 Refactoring UI & Smashing Magazine）
+### 字体配置
 
-#### 1. 层次结构（Hierarchy）
+poster 插件会自动加载 `plugins/poster-plugin/fonts/` 目录下的 emoji 字体文件。
 
-- **不是所有元素都相等** - 使用大小、颜色、间距区分重要性
-- **尺寸不是一切** - 结合粗细、颜色、对比度
-- **去饱和以强调** - 在彩色背景上避免灰色文字
-- **分离视觉层次与文档层次** - 不要让 HTML 结构限制设计
+| 字体文件            | 说明                                   |
+| ------------------- | -------------------------------------- |
+| `SegoeUI Emoji.ttf` | Windows Emoji 字体（所有平台统一使用） |
 
-#### 2. 颜色系统
+### 注意事项
 
-- **使用 HSL 而非 HEX** - 更易理解和调整
-- **建立完整色阶** - 至少 5-10 个色阶（浅→深）
-- **灰度不一定是灰色** - 可以偏蓝、偏紫、偏绿
-- **考虑可访问性** - 对比度至少 4.5:1
-- **颜色仅用于强调** - 不要依赖颜色传达所有信息
+⚠️ **node-canvas 限制**：由于 node-canvas 渲染引擎的限制，emoji 会显示为**黑白轮廓**，不支持彩色渲染。如需彩色 emoji，请使用 `add_poster_image()` 插入 PNG 图片。
 
-#### 3. 间距系统
+### 推荐的 Emoji 使用方式
 
-- **从过多留白开始** - 更容易后期收紧
-- **建立间距和尺寸系统** - 使用 4px/8px 基础网格
-- **避免歧义间距** - 间距应该有明显的倍数关系
-- **留白不是浪费** - 呼吸感提升可读性
-
-#### 4. 排版
-
-- **建立类型比例** - 使用固定比例（如 1.25、1.333）
-- **选择优质字体** - 无衬线字体适合屏幕
-- **控制行长度** - 理想 60-75 字符
-- **调高行高** - 正文 1.5-1.75，标题可更低
-- **有效使用字间距** - 全大写时增加间距
-
-#### 5. 深度与阴影
-
-- **模拟统一光源方向** - 所有阴影方向一致
-- **阴影可有两个部分** - 近景阴影 + 远景阴影
-- **扁平设计也可以有深度** - 使用微妙渐变
-- **重叠元素创造层次** - 使用 z-index 和叠加
-
-#### 6. 边框与分隔
-
-- **使用更少的边框** - 过多的边框让设计杂乱
-- **使用对比背景色** - 分隔元素的好方法
-- **用阴影代替边框** - 更现代的感觉
-- **box-shadow 替代 border** - 视觉更柔和
-
-#### 7. 组件设计
+```javascript
+// 方式一：使用 emoji 文字（黑白轮廓）
+add_poster_text({
+  text: '🚀 ⚡ ✨ 🤖 💫',
+  x: 540,
+  y: 300,
+  fontSize: 48,
+  color: '#ffffff',
+  align: 'center',
+});
+
+// 方式二：使用组件绘制装饰形状（彩色）
+add_poster_star({
+  cx: 200,
+  cy: 200,
+  points: 5,
+  outerRadius: 60,
+  fill: '#fbbf24', // 金色五角星
+  opacity: 0.8,
+});
+```
+
+### 常用 Emoji 分类
+
+| 分类 | Emoji                |
+| ---- | -------------------- |
+| 笑脸 | 😀 😃 😄 😁 🤣 😂 😊 |
+| 爱心 | ❤️ 🧡 💛 💚 💙 💜 🖤 |
+| 星星 | 🌟 ⭐ 💫 ✨ ⚡       |
+| 派对 | 🎉 🎊 🥳 🎈 🎁       |
+| 科技 | 🤖 🚀 💻 📡 🔌       |
+| 动物 | 🐱 🐶 🐰 🦊 🐻 🐼    |
 
-- **从功能开始，而非布局** - 先确定组件用途
-- **细节稍后添加** - 先完成结构再美化
-- **不要设计过多** - 专注于当前需要
-- **选择一种个性** - 设计语言保持一致
-- **限制选择** - 减少颜色、字体、间距选项
+---
 
-### 设计灵感来源
+## 📚 参考资源
 
-#### 国际设计资源
+### 日本设计灵感
 
-| 网站                | URL                              | 特点                 |
-| ------------------- | -------------------------------- | -------------------- |
-| Smashing Magazine   | https://www.smashingmagazine.com | 顶级设计文章与指南   |
-| Google Design       | https://design.google            | Material Design 系统 |
-| Refactoring UI      | https://refactoringui.com        | 开发者设计指南       |
-| Refactoring UI Book | https://refactoringui.com/book   | 50+ 设计技巧         |
+| 网站       | URL                       | 特点               |
+| ---------- | ------------------------- | ------------------ |
+| MUUUUU     | https://muuuuu.org        | 卓越Web设计精选    |
+| ICS MEDIA  | https://ics.media         | 前端技术 + CSS设计 |
+| Lifehacker | https://www.lifehacker.jp | 生活设计科技       |
 
-#### 设计灵感网站
+### 国际设计平台
 
-| 网站      | URL                   | 用途           |
+| 网站      | URL                   | 特点           |
 | --------- | --------------------- | -------------- |
-| Dribbble  | https://dribbble.com  | UI/UX 设计展示 |
-| Behance   | https://behance.net   | 创意设计作品   |
-| Awwwards  | https://awwwards.com  | 优秀网页设计   |
-| Pinterest | https://pinterest.com | 设计灵感收藏   |
-
-#### 配色灵感网站
-
-| 网站            | URL                                   | 特点              |
-| --------------- | ------------------------------------- | ----------------- |
-| Color Hunt      | https://colorhunt.co/palettes/popular | 流行配色分享      |
-| Coolors         | https://coolors.co/palettes/trending  | 智能配色生成      |
-| Adobe Color     | https://color.adobe.com               | 配色趋势与提取    |
-| Tailwind Colors | https://tailwindcss.com/docs/colors   | 完整色彩系统      |
-| Material Color  | https://m3.material.io/color          | Material 配色工具 |
-
-### 实用设计技巧
-
-#### 快速提升设计感的技巧
-
-1. **增加对比度** - 标题和正文对比更明显
-2. **使用渐变** - 纯色 + 渐变增加层次
-3. **添加微妙阴影** - 让元素"浮"起来
-4. **统一图标风格** - 使用同一套图标库
-5. **控制留白** - 不要让元素太拥挤
-6. **一致的圆角** - 全部使用相同的圆角值
-7. **对齐边缘** - 使用网格系统对齐
-8. **限制颜色数量** - 主色 + 强调色 + 中性色
-
-#### 常见设计反模式
-
-- ❌ 使用太多字体
-- ❌ 所有元素都有边框
-- ❌ 灰色文字在彩色背景
-- ❌ 不一致的间距
-- ❌ 忽视可访问性
-- ❌ 设计过于复杂
-- ❌ 纯色背景无层次
-
-#### 设计检查清单
-
-- [ ] 视觉层次清晰？
-- [ ] 颜色对比度足够？
-- [ ] 间距系统一致？
-- [ ] 字体比例协调？
-- [ ] 阴影方向统一？
-- [ ] 移动端适配良好？
-- [ ] 无障碍访问达标？
+| Behance   | https://behance.net   | 专业设计作品集 |
+| Dribbble  | https://dribbble.com  | 设计师社区     |
+| Pinterest | https://pinterest.com | 视觉灵感收藏   |
+| Awwwards  | https://awwwards.com  | 最佳网页设计   |
+
+### 配色灵感
+
+| 网站        | URL                     | 特点         |
+| ----------- | ----------------------- | ------------ |
+| Coolors     | https://coolors.co      | 智能配色生成 |
+| Color Hunt  | https://colorhunt.co    | 配色方案分享 |
+| Adobe Color | https://color.adobe.com | 配色趋势     |