九程序员/照片图形设计师

专业照片图形设计师与艺术总监技能

此技能将原始照片转化为工作室级别的社交媒体图形、明信片和纪念海报。不同于使用AI图像生成覆盖照片（这会扭曲人脸、改变天空并弄乱泰语排版），本工作流使用HTML5 + CSS3 + 自定义SVG矢量艺术 + Google Fonts，通过Headless Chrome渲染至4K Retina分辨率（--force-device-scale-factor=2），并使用Python Pillow（subsampling=0）合成。

---

核心工作流程（6个阶段）

阶段1：照片检查与自动视觉分析

1. 查看目标照片：始终先调用read_file查看目标图像，以视觉方式理解主体、氛围、光照和障碍物（例如人脸、帐篷杆、拉绳、地平线、树木）。
2. 运行照片分析脚本： 在目标图像上执行analyze_photo.py以提取：
   • 精确的像素尺寸、纵横比和EXIF元数据。
   • 3×3网格亮度与负空间地图（识别哪些区域是暗、中调或亮调，以及哪些区域细节较少，适合放置文字）。
   • 提取的色彩调色板（主要背景十六进制颜色 + 推荐的高对比强调十六进制颜色）。

   python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<image_path>"
   

---

阶段2：互动风格与方向探索

在生成图形之前，查阅style_catalog.md并使用ask_question让用户根据其照片从精心策划的设计方向中选择：

1. 设计风格选择（从style_catalog.md中的12+种风格中选出3–5种最合适的，并提供生成多种风格以作比较的选项）：
   • 天体与星空浪漫（奢华金色衬线字体、星座线条、闪闪星光、星盘边框）
   • 极简编辑/杂志明信片（Kinfolk / GO OUT / NatGeo 布局、发丝网格、元数据标题、地点印章）
   • 温馨可爱手绘涂鸦（舒适仙女灯、草图虚线边框、漂浮爱心、弯曲线索箭头、手写字体）
   • 复古胶片与模拟柯达克罗姆（光晕辉光、胶片边框、日期印章、复古衬线字体）
   • 现代玻璃态与浮动UI（磨砂玻璃卡片、音乐播放器/记忆条、流畅无衬线字体）
   • 户外探险与复古徽章（国家公园/露营徽章、等高线、指南针与松树矢量图）
   • 日式极简海报（杂货 / 无印良品风格）（垂直/不对称排版、大量留白、精致线条画）
   • 电影宽银幕与故事字幕（变形宽银幕黑条、电影片名字幕块、诗意双语字幕）
2. 纵横比与输出格式：
   • 原始纵横比（例如3:2横屏 3600×2400）
   • 社交媒体竖版（4:5 2400×3000）
   • 正方形（1:1 2800×2800）或快拍/卷轴（9:16 2160×3840）

---

阶段3：多语调文案撰写工作坊（至关重要！）

通用或过于俗气的引用常常感觉不自然（"ไม่ใช่ตัวเอง"）。在最终确定文字之前——或者当用户想要措辞建议时——阅读copywriting_tones.md并使用ask_question让用户按部分和个性语气选择或混合搭配措辞：

• 将文字分解为模块化插槽：
  1. 顶部徽章/眉题（例如英文标题或场合标签）
  2. 主标题（主要泰语/英语问候）
  3. 副标题/核心锚点（温暖的关键短语）
  4. 正文/引用框（2行温馨信息——或选择省略以保持更简洁的外观）
  5. 对象标注/指针备注（在指向人物/对象的手绘箭头旁放置的简短可爱标签——或选择省略）
• 为每个插槽提供5–6种不同的个性语气：
  • สายลุย-ชิลล์ๆ（户外/休闲伴侣）：自然、放松、冒险伙伴的感觉。
  • แมนๆ จริงใจ ไม่เลี่ยน（真诚接地气）：诚实、温暖、零尴尬。
  • อบอุ่น-เรียบง่าย（温馨经典）：温柔、欣赏、永恒。
  • กวนนิดๆ กันเอง（调皮亲密）：真实情侣间的玩闹和爱意。
  • โรแมนติก-ลึกซึ้ง（诗意浪漫）：星光、命运、深情。
  • สั้นกระชับ-มินิมอล（简短有力）：极简主义的冲击力。

---

阶段4：构图、视觉引导与色彩理论规则

在编写HTML/CSS/SVG叠加层时，查阅composition_and_color.md。始终强制执行以下黄金法则：

1. 主体与障碍物保护区域：
   • 精确映射人脸、身体和结构线条（如帐篷杆或对角线拉绳）的边界坐标(x, y)。
   • 绝不允许文字、漂浮爱心、星星或箭头跨越人脸或尴尬地交叉拉绳。将标注元素整齐地移动到绳索/线条的某一侧。
2. 视线引导（视觉矢量化）：
   • 引导观看者的视线从主要排版块（位于开阔负空间内）->沿着次要装饰/标注箭头->直接到达主体人物的面部/微笑。
   • 使用弯曲的SVG路径（<path d="M ... Q ...">）、新月方向或流星角度指向主体或框住文字向内，绝不将视线引向画布边缘。
3. 色彩和谐与自适应可读性：
   • 60-30-10色彩规则：
     • 60% 基础照片环境色调（例如深午夜蓝 #0A1530 或森林绿）。
     • 30% 主要排版颜色（高对比度暖象牙白 #FFFAF0 或纯白 #FFFFFF）。
     • 10% 从场景中采样或协调的强调色（例如暖仙女灯金 #FFE299、香槟色 #F0CA86 或柔和珊瑚心 #FF7B93）。
   • 始终在正文后面放置一个微妙的、边缘不可见的径向/线性渐变（rgba(8, 16, 38, 0.38)）或磨砂玻璃容器（backdrop-filter: blur(4px)），以便文字在星空、云彩或树叶上100%清晰可读。
4. 泰语排版完美：
   • 对多句泰语引用行使用white-space: nowrap，或在自然短语边界使用明确的<br>换行，以便泰语单词（如*"ฉัน"或"วัน"*）绝不单独成为孤行。
   • 在大型泰语展示文本（具有高元音/声调标记如ั ิ ี ึ ื ่ ้ ๊ ๋ ์和低元音ุ ู）与周围的SVG星星、月亮或边框之间，至少保留35px–50px的清晰内边距。

---

阶段5：4K Retina渲染管道

使用render_graphic.py以4K分辨率将任何HTML/CSS/SVG模板渲染到目标照片上：

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "path/to/design.html" `
  --output "DSC03461_Output.jpg" `
  --width 1800 --height 1200 --scale 2

• 为什么--scale 2和--virtual-time-budget=3000很重要：
  • 以1800×1200 CSS像素设计并配合--force-device-scale-factor=2，可以生成超清晰的3600×2400 Retina输出。
  • --virtual-time-budget=3000确保Google Fonts在Chrome捕获帧之前完成下载和应用（防止系统字体回退）。
  • 使用quality=96, subsampling=0保存可100%保持彩色文字和细矢量线条的边缘清晰度。

---

阶段6：强制视觉质量验证

在渲染每张图像后，您必须使用read_file检查生成的.jpg文件，并验证此清单后再展示给用户：

• 字体验证：预期的Google Fonts是否已正确加载（没有回退到Tahoma/Arial）？
• 无孤词换行：所有泰语句子是否在预期的<br>点处干净地分割，没有单个尾随词？
• 零碰撞检查：是否有任何星星、月亮、爱心、边框或箭头接触或覆盖了泰语元音/声调标记、人脸或帐篷绳？
• 视觉平衡与对比度：每一行文字是否在缩略图视图和全屏视图下都轻松可读？

如果在read_file检查中发现任何问题，立即调整CSS/SVG坐标并重新渲染，然后再呈现结果。

---

参考模板与文档

• 风格目录与字体配对：references/style_catalog.md
• 构图、视觉引导与色彩指南：references/composition_and_color.md
• 泰语与英语文案矩阵：references/copywriting_tones.md
• 即用型HTML/SVG参考模板：
  • examples/style_starry_romantic.html
  • examples/style_minimal_magazine.html
  • examples/style_warm_cute_doodle.html