foliko 1.0.87 → 1.1.1

package/skills/poster-guide/SKILL.md

@@ -0,0 +1,1059 @@
+---
+name: poster-guide
+description: 海报设计技能 - 使用 poster 扩展生成海报和图片。使用 ext_call 调用 poster 插件。
+allowed-tools: ext_call
+---
+
+# 海报设计技能指南
+
+## 📡 调用方式
+
+poster 扩展使用 `ext_call` 工具调用：
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: '<工具名>',
+  args: {
+    /* 参数 */
+  },
+});
+```
+
+---
+
+## 🎨 配色方案
+
+### 1. 流行配色来源
+
+- [Color Hunt 流行配色](https://colorhunt.co/palettes/popular)
+- [Coolors Trending](https://coolors.co/palettes/trending)
+- [Tailwind CSS 官方配色](https://tailwindcss.com/docs/colors)
+
+### Color Hunt 流行配色（2026年热门）
+
+#### 优雅大地色系
+
+```
+#4B2E2B    #8C5A3C    #C08552    #FFF8F0
+```
+
+#### 梦幻紫罗兰
+
+```
+#9B8EC7    #BDA6CE    #B4D3D9    #F2EAE0
+```
+
+#### 森林绿系
+
+```
+#B0E4CC    #408A71    #285A48    #091413
+```
+
+#### 热情橙红色
+
+```
+#EED9B9    #D53E0F    #9B0F06    #5E0006
+```
+
+#### 活力黄橙
+
+```
+#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
+```
+
+---
+
+### 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' } });
+```
+
+---
+
+## 🎯 组件化生成（推荐）
+
+### 步骤 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：添加元素
+
+#### 艺术字标题
+
+```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 },
+  },
+});
+```
+
+#### 普通文字
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_text',
+  args: {
+    text: '简约的插件化 Agent 框架',
+    x: 960,
+    y: 420,
+    fontSize: 36,
+    color: '#A0AEC0',
+    align: 'center',
+  },
+});
+```
+
+#### 圆形装饰
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_circle',
+  args: { cx: 1600, cy: -100, rx: 500, fill: '#00D9FF', opacity: 0.1 },
+});
+```
+
+#### 星形装饰
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_star',
+  args: { cx: 200, cy: 200, points: 5, outerRadius: 50, fill: '#fbbf24', opacity: 0.8 },
+});
+```
+
+#### 分隔线
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_divider',
+  args: { x: 960, y: 480, width: 200, color: '#00D9FF' },
+});
+```
+
+#### 特性网格
+
+```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',
+  },
+});
+```
+
+#### 统计卡片
+
+```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',
+  },
+});
+```
+
+#### 进度条
+
+```javascript
+ext_call({
+  plugin: 'poster',
+  tool: 'add_poster_progress',
+  args: {
+    x: 1450,
+    y: 640,
+    width: 380,
+    value: 95,
+    label: '响应速度 95%',
+    color: '#3b82f6',
+    background: '#334155',
+  },
+});
+```
+
+#### 环形进度
+
+```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,
+  },
+});
+```
+
+#### 标签
+
+```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',
+  },
+});
+```
+
+---
+
+## 📋 组件速查表
+
+### 画布管理
+
+| 工具                     | 说明         |
+| ------------------------ | ------------ |
+| `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` | 通知     |
+
+### 模板
+
+| 工具                     | 说明     |
+| ------------------------ | -------- |
+| `generate_poster`        | 一键生成 |
+| `list_poster_templates`  | 列出模板 |
+| `list_poster_components` | 列出组件 |
+
+---
+
+## 📝 完整示例
+
+### 示例 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：温暖风格海报
+
+```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' },
+});
+```
+
+---
+
+## 🔗 参考资源
+
+| 网站            | URL                     | 特点         |
+| --------------- | ----------------------- | ------------ |
+| Coolors         | https://coolors.co      | 智能配色生成 |
+| Color Hunt      | https://colorhunt.co    | 流行配色分享 |
+| Adobe Color     | https://color.adobe.com | 配色趋势     |
+| Material Design | https://m3.material.io  | 设计系统配色 |
+
+---
+
+## 🎨 设计理念与原则
+
+### 核心设计原则（来自 Refactoring UI & Smashing Magazine）
+
+#### 1. 层次结构（Hierarchy）
+
+- **不是所有元素都相等** - 使用大小、颜色、间距区分重要性
+- **尺寸不是一切** - 结合粗细、颜色、对比度
+- **去饱和以强调** - 在彩色背景上避免灰色文字
+- **分离视觉层次与文档层次** - 不要让 HTML 结构限制设计
+
+#### 2. 颜色系统
+
+- **使用 HSL 而非 HEX** - 更易理解和调整
+- **建立完整色阶** - 至少 5-10 个色阶（浅→深）
+- **灰度不一定是灰色** - 可以偏蓝、偏紫、偏绿
+- **考虑可访问性** - 对比度至少 4.5:1
+- **颜色仅用于强调** - 不要依赖颜色传达所有信息
+
+#### 3. 间距系统
+
+- **从过多留白开始** - 更容易后期收紧
+- **建立间距和尺寸系统** - 使用 4px/8px 基础网格
+- **避免歧义间距** - 间距应该有明显的倍数关系
+- **留白不是浪费** - 呼吸感提升可读性
+
+#### 4. 排版
+
+- **建立类型比例** - 使用固定比例（如 1.25、1.333）
+- **选择优质字体** - 无衬线字体适合屏幕
+- **控制行长度** - 理想 60-75 字符
+- **调高行高** - 正文 1.5-1.75，标题可更低
+- **有效使用字间距** - 全大写时增加间距
+
+#### 5. 深度与阴影
+
+- **模拟统一光源方向** - 所有阴影方向一致
+- **阴影可有两个部分** - 近景阴影 + 远景阴影
+- **扁平设计也可以有深度** - 使用微妙渐变
+- **重叠元素创造层次** - 使用 z-index 和叠加
+
+#### 6. 边框与分隔
+
+- **使用更少的边框** - 过多的边框让设计杂乱
+- **使用对比背景色** - 分隔元素的好方法
+- **用阴影代替边框** - 更现代的感觉
+- **box-shadow 替代 border** - 视觉更柔和
+
+#### 7. 组件设计
+
+- **从功能开始，而非布局** - 先确定组件用途
+- **细节稍后添加** - 先完成结构再美化
+- **不要设计过多** - 专注于当前需要
+- **选择一种个性** - 设计语言保持一致
+- **限制选择** - 减少颜色、字体、间距选项
+
+### 设计灵感来源
+
+#### 国际设计资源
+
+| 网站                | 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                   | 用途           |
+| --------- | --------------------- | -------------- |
+| 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. **限制颜色数量** - 主色 + 强调色 + 中性色
+
+#### 常见设计反模式
+
+- ❌ 使用太多字体
+- ❌ 所有元素都有边框
+- ❌ 灰色文字在彩色背景
+- ❌ 不一致的间距
+- ❌ 忽视可访问性
+- ❌ 设计过于复杂
+- ❌ 纯色背景无层次
+
+#### 设计检查清单
+
+- [ ] 视觉层次清晰？
+- [ ] 颜色对比度足够？
+- [ ] 间距系统一致？
+- [ ] 字体比例协调？
+- [ ] 阴影方向统一？
+- [ ] 移动端适配良好？
+- [ ] 无障碍访问达标？