<div class="section-card">
    <h3>🗣️ 沟通风格</h3>
    <div class="form-group">
      <label for="tone">语调</label>
      <select id="tone" onchange="updatePrompt()">
        <option value="">选择语调...</option>
        <option value="professional">专业正式</option>
        <option value="friendly">友好亲切</option>
        <option value="casual">轻松随意</option>
        <option value="enthusiastic">热情积极</option>
        <option value="analytical">分析理性</option>
        <option value="supportive">支持鼓励</option>
      </select>
    </div>

    <div class="form-group">
      <label for="communication-style">沟通特点</label>
      <div class="checkbox-group">
        <label><input type="checkbox" value="concise" onchange="updatePrompt()"> 简洁明了</label>
        <label><input type="checkbox" value="detailed" onchange="updatePrompt()"> 详细全面</label>
        <label><input type="checkbox" value="examples" onchange="updatePrompt()"> 提供实例</label>
        <label><input type="checkbox" value="stepbystep" onchange="updatePrompt()"> 分步指导</label>
        <label><input type="checkbox" value="questions" onchange="updatePrompt()"> 主动提问</label>
      </div>
    </div>
  </div>

}

📋 输出格式

    <div class="form-group">
      <label for="constraints">约束条件</label>
      <textarea id="constraints" placeholder="例如：字数限制、特定要求、避免的内容..." onchange="updatePrompt()"></textarea>
    </div>
  </div>

}

🔧 高级设置

    <div class="form-group">
      <label for="examples">示例交互</label>
      <textarea id="examples" placeholder="提供期望的对话示例..." onchange="updatePrompt()"></textarea>
    </div>
  </div>
</div>

<div class="preview-panel">
  <div class="preview-header">
    <h3>📝 生成的提示词</h3>
    <div class="preview-actions">
      <button onclick="copyPrompt()" class="copy-btn">📋 复制</button>
      <button onclick="downloadPrompt()" class="download-btn">💾 下载</button>
      <button onclick="sharePrompt()" class="share-btn">🔗 分享</button>
    </div>
  </div>

  <div class="prompt-preview" id="prompt-preview">
    <div class="placeholder">
      👈 请在左侧填写信息，系统将自动生成优化的提示词
    </div>
  </div>

  <div class="preview-stats">
    <span id="word-count">字数: 0</span>
    <span id="char-count">字符: 0</span>
    <span class="quality-score">质量评分: <span id="quality-score">-</span></span>
  </div>
</div>

margin-bottom: 3rem;

🎨 预设模板

📊 商业分析师

专业的数据分析和商业洞察助手

👨‍💻 代码审查员

专业的代码质量评估和优化建议

✍️ 内容创作者

专业的文案写作和内容策划助手

📋 项目经理

高效的项目管理和团队协调助手

border: 2px solid #e0e0e0;

💡 提示词优化技巧

🎯 明确角色定位

清晰定义AI的角色和专业领域，这是构建有效提示词的基础。

📝 具体化任务

将抽象的目标分解为具体的、可执行的任务清单。

🎨 设定沟通风格

明确指定语调、详细程度和输出格式，确保一致性。

🔄 迭代优化

根据实际使用效果不断调整和优化提示词内容。

margin: 0; color: #666; font-size: 14px; } --- @media (max-width: 768px) { .prompt-builder-container { grid-template-columns: 1fr; } .preview-actions { flex-direction: column; } .templates-grid, .tips-grid { grid-template-columns: 1fr; } } title: AI提示词构建器 - 打造完美的AI助手 description: 使用我们的交互式工具构建强大的主提示词，为您的AI提供持久的上下文、个性和一致的结果。 keywords: AI提示词, 提示工程, AI助手, 人工智能, 提示优化 --- # 🤖 AI提示词构建器

🎯 打造完美的AI助手

使用交互式工具构建强大的主提示词，为您的AI提供持久的上下文、个性和一致的结果

🎭 角色定义

🎯 目标与任务

    📋 输出格式

    🔧 高级设置

    📝 生成的提示词

    👈 请在左侧填写信息，系统将自动生成优化的提示词
    字数: 0 字符: 0 质量评分: -

    🎨 预设模板

    📊 商业分析师

    专业的数据分析和商业洞察助手

    👨‍💻 代码审查员

    专业的代码质量评估和优化建议

    ✍️ 内容创作者

    专业的文案写作和内容策划助手

    📋 项目经理

    高效的项目管理和团队协调助手

    💡 提示词优化技巧

    🎯 明确角色定位

    清晰定义AI的角色和专业领域，这是构建有效提示词的基础。

    📝 具体化任务

    将抽象的目标分解为具体的、可执行的任务清单。

    🎨 设定沟通风格

    明确指定语调、详细程度和输出格式，确保一致性。

    🔄 迭代优化

    根据实际使用效果不断调整和优化提示词内容。