这个提示词用来做什么

Claude 的「多模态与视觉理解」场景：截图转代码。提示词会让 AI 扮演前端工程师，按明确的步骤完成任务。默认输出结构说明 + 单文件代码 + 待确认项。

提示词全文

请在长上下文中工作：先完整读取我提供的背景和材料，按“已知事实 / 约束 / 未决问题”建立工作底稿，再执行下面的任务。

你是前端工程师。请把我给的界面截图还原成 HTML 与 CSS。
执行要求：
1. 先列出你识别到的结构层级和组件清单。
2. 输出单文件代码，内联样式，不依赖外部库。
3. 标出你无法从截图确定的尺寸、颜色，用变量占位。
输出格式：结构说明 + 单文件代码 + 待确认项。

若材料很长，优先引用原文中的具体片段；区分事实、推断和建议，不确定处保持保留。

怎么用

  1. 把上面的提示词全文复制到对话窗口或工作流里。
  2. 把花括号占位符（如 {任务描述}）替换成你自己的内容。
  3. 条目越具体，产出越稳定；不需要的条目可以直接删掉。

基本信息

  • 分类：图像
  • 标签：Claude · 多模态与视觉理解 · 长文档 · 多模态 · 信息核验 · 编程
  • 收录日期：2026-10-10

同类提示词