用 Claude 与 Tailwind 快速制作 OG 图和缩略图

是什么 这是一条面向非设计师的 AI 辅助视觉生产经验：让 Claude 用 TailwindCSS 编写缩略图、YouTube 封面或 OG 图片的 HTML/CSS，再用 Playwright 在浏览器中按平台推荐尺寸截图。作者以 Directify.app 的 OG 图和视频缩略图作为实际案例，说明代码可以成为轻量、可复现的设计画布。

核心设计 示例采用黑色粗体标题、橙色强调色、圆角卡片和流程箭头，建立了清晰的品牌识别与信息层级。输入提示词、等待时间、生成结果三段式结构，也把“AI 建站”和“快速变现”的产品叙事压缩进一张可读的视觉海报。

关键洞察 Tailwind 的价值不只是写样式，而是让设计参数可直接通过自然语言迭代，并能稳定复用布局、字体和配色。Playwright 则补上了最终导出环节，使浏览器渲染结果成为图片源文件。

边界与风险 方法依赖字体加载、浏览器渲染和截图尺寸控制；复杂插画、原创图像和精细品牌规范仍可能需要专业设计工具与人工审核。