foliko 1.0.86 → 1.1.0

package/skills/poster-guide/SKILL.md

@@ -0,0 +1,743 @@
+---
+name: poster-guide
+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
+---
+
+# 海报设计技能指南
+
+> 本技能收集了来自日本优秀设计网站（muuuuu.org、ics.media 等）和国际设计平台（Behance、Dribbble，Pinterest 等）的流行趋势和配色方案。
+
+---
+
+## 📐 设计尺寸规范
+
+### 社交媒体
+
+| 尺寸      | 用途                    |
+| --------- | ----------------------- |
+| 1080×1080 | Instagram 正方形        |
+| 1080×1920 | Instagram Story / Reels |
+| 1200×630  | Facebook 封面           |
+| 1500×500  | Twitter 封面            |
+| 1200×627  | LinkedIn 封面           |
+| 2560×1440 | YouTube 封面            |
+
+### 营销物料
+
+| 尺寸      | 用途             |
+| --------- | ---------------- |
+| 1920×1080 | 16:9 宣传海报    |
+| 1080×1920 | 9:16 竖版海报    |
+| 2480×3508 | A4 海报 (300dpi) |
+| 2000×2000 | 方形海报         |
+
+### Banner 广告
+
+| 尺寸     | 用途            |
+| -------- | --------------- |
+| 1920×500 | 网站全屏 Banner |
+| 1200×400 | 电商 Banner     |
+| 750×300  | 移动端 Banner   |
+| 728×90   | PC 端横幅       |
+
+---
+
+## 🧩 组件速查表（共 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` | 提示消息     |
+
+---
+
+## 🆕 新增组件详解
+
+### 星形 (star) ⭐
+
+```javascript
+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
+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
+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
+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
+// 柱状图
+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
+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
+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
+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
+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
+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
+});
+```
+
+---
+
+## 🎨 日本设计配色方案（来源：MUUUUU）
+
+### 1. 和風・禅意 (Japanese Zen)
+
+```
+主色: #1E4D7B (藏蓝 / 藍色)
+强调: #C41E3A (朱红 / 紅色)
+背景: #F5F0E8 (米白 / 白茶)
+文字: #333333 (墨色)
+点缀: #D4A574 (古铜金)
+```
+
+### 2. モダン和風 (Modern Japanese)
+
+```
+主色: #2C3E50 (墨灰)
+强调: #C0392B (深红)
+背景: #ECE5D8 (浅麻)
+文字: #2C2C2C (浓墨)
+点缀: #D4AF37 (金色)
+```
+
+---
+
+## 🌸 日本特色设计风格（来源：MUUUUU 分类）
+
+### 1. 和風デザイン (Japanese Style)
+
+```javascript
+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
+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,
+    },
+  ],
+});
+```
+
+---
+
+## 📊 实用数据可视化示例
+
+### 仪表盘卡片
+
+```javascript
+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
+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,
+    },
+  ],
+});
+```
+
+---
+
+## 📋 完整海报示例
+
+### AI 产品发布海报
+
+```javascript
+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
+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,
+    },
+  ],
+});
+```
+
+---
+
+## 🛠️ 工具速查
+
+| 工具                     | 用途            |
+| ------------------------ | --------------- |
+| `list_poster_components` | 列出所有组件    |
+| `list_poster_templates`  | 列出所有模板    |
+| `generate_poster`        | 一键生成海报    |
+| `compose_poster`         | 组件化生成海报  |
+| `export_poster_canvas`   | 导出 PNG        |
+| `export_poster_svg`      | 导出 SVG (矢量) |
+
+---
+
+## 📚 参考资源
+
+### 日本设计灵感
+
+| 网站       | URL                       | 特点               |
+| ---------- | ------------------------- | ------------------ |
+| MUUUUU     | https://muuuuu.org        | 卓越Web设计精选    |
+| ICS MEDIA  | https://ics.media         | 前端技术 + CSS设计 |
+| Lifehacker | https://www.lifehacker.jp | 生活设计科技       |
+
+### 国际设计平台
+
+| 网站      | URL                   | 特点           |
+| --------- | --------------------- | -------------- |
+| 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 | 配色趋势     |