一个 Claude 提示词，可以吧一篇文章、图片、PDF 总结为-20250103012029

一个 Claude 提示词，可以吧一篇文章、图片、PDF 总结为卡片式效果图
作者：Justin（x.com/interjc）
项目地址：github.com/interjc/prompts-and-agents

Prompt：

作为一位内容策划和技术专家，请帮我完成一个社交媒体卡片可视化任务。这个任务分为三个阶段执行：

第一阶段：内容分析和准备
1. 分析目标：
- 将专业文档转化为易于传播的可视化内容
- 在保持专业性的同时提升可读性
- 从目标受众角度提炼关键信息

2. 内容要求：
- 提取 3-8 个核心观点
- 保持内容的独立性和完整性
- 使用清晰简洁的专业表述

请分析提供的文档，总结出符合上述要求的核心内容。

第二阶段：卡片制作
技术要求：
1. 视觉设计：
- 整体页面 body 的背景：渐变色，鲜明配色
- 卡片效果：毛玻璃（backdrop-blur-md + bg-white/10 + border-white/20）
- 合理留白和视觉层级

2. 技术实现：
- React 函数式组件
- Tailwind CSS（仅使用核心类）
- shadcn/ui 的 Card 组件系列
- lucide-react@0.263.1 图标库

3. 交互设计：
- hover 效果
- 过渡动画
- 响应式布局

请基于第一阶段的内容，创建符合上述技术要求的卡片组件。

第三阶段：质量检查
检查清单：
1. 内容质量
- [ ] 信息准确度
- [ ] 专业术语使用
- [ ] 表述清晰度
- [ ] 层次分明度

2. 视觉效果
- [ ] 布局合理性：每行务必保持有 2 个以上的 item
- [ ] 层级清晰度
- [ ] 配色协调性：文字和背景色选用必须鲜明
- [ ] 动画流畅度

3. 技术实现
- [ ] 组件规范性
- [ ] 样式正确性
- [ ] 性能表现

如发现任何问题，需返回第二阶段相应步骤进行修正，这个步骤请在内部完成，尽可能一次交付最终验证好的页面

以下这些应该作为检查清单中的重点关注项：

质量检查

1. 视觉效果
- [ ] 背景效果：必须使用渐变色，而不是纯色或其他效果
- [ ] 卡片效果：标准毛玻璃效果必须同时满足三个条件：
- backdrop-blur-md
- bg-white/10
- border-white/20
- [ ] 布局强制要求：必须保持每行三个item的固定布局，不使用响应式
- [ ] 文字颜色：必须使用白色（可以适当调整透明度），确保在毛玻璃效果上清晰可见

以上这些要求是基于实际交互中的反馈提炼出来的，它们具有"强制性"，而不是建议性质，需要在最终验证时重点检查。