Prompt 宝藏小抄

欢迎来到 Prompt 宝藏小抄！🌈 这里是专为提升效率而生的 提示词集合，让你在 开发、创作、沟通 等场景中游刃有余，轻松甩掉“灵感枯竭”的烦恼！🎉

💡 小抄怎么用？

1. 极速复制 🖱️：找到对应场景的提示词，直接拿来用，效率起飞！
2. 扩展思路 💭：不会写提示？这里的模板教你怎么高效表达！
3. 提高协作 🤝：团队沟通或项目协作时，用它让大家更懂你！

🌟 小抄适合谁？

• 热爱效率的实干家 💼
• 创意爆发的高手 🎨
• 需要灵感加持的伙伴 🧠

这份小抄，是你的宝藏地图，带你解锁高效、精准的提示词世界！✨

别让宝藏埋在文件夹里，快用起来，成为团队里的 Prompt King 👑！

HTML页面绘制

• 仿照这个图片，用 html 等复刻绘制
• 你可以用 Excalidraw 的风格，使用 html，帮我绘制一个架构图吗？

SVG手绘风格

• 你可以用 Excalidraw 的风格，使用 html，帮我绘制一个架构图吗？

• 思考流程：

  让我思考一下如何创建一个 Excalidraw 风格的架构图。
  
  首先要理解 Excalidraw 的视觉风格特点:
  - 手绘风格的线条,带有轻微的不规则感
  - 简单的几何图形作为基本元素
  - 柔和的颜色搭配
  - 清晰的文字标注
  - 箭头和连接线也是手绘风格
  
  需要用 SVG 来实现这种风格:
  - 可以使用 path 元素绘制不规则的线条
  - 矩形和圆形可以添加一些随机的扰动来模拟手绘效果
  - 文字可以用手写字体
  - 可以添加一些轻微的阴影效果增加立体感
  
  考虑一下要展示什么内容:
  - 既然是架构图,应该包含几个主要的系统组件
  - 用箭头表示它们之间的交互关系
  - 添加简单的文字说明
  - 整体布局要清晰易懂
  
  让我想想具体的实现方案:
  - 用 SVG 的 path 来绘制不规则的矩形和连接线
  - 通过添加一些随机扰动点来实现手绘效果
  - 选择 Excalidraw 常用的配色方案
  - 用合适的字体来呈现手写效果
  - 添加简单的投影效果增加层次感
  
  这应该会是一个很好的视觉效果。我现在可以开始创建这个 SVG 了。需要注意:
  - viewBox 大小要合适
  - 图形元素要有适当的间距
  - 线条粗细要统一
  - 颜色搭配要协调
  - 整体布局要平衡
  

• 回复：

  我会为你创建一个 Excalidraw 风格的简单架构图示例。
  
  Excalidraw 风格架构图点击以打开 image(文件内容)
  
  这是一个简单的三层架构图,采用了 Excalidraw 的手绘风格设计:
  
  使用了手绘风格的矩形框来表示各个组件
  采用了虚线箭头来表示组件之间的连接关系
  使用了柔和的配色方案:
  
  前端应用使用暖色调
  后端服务使用蓝色调
  数据库使用绿色调
  
  
  添加了简单的阴影效果增加立体感
  使用了手写风格的字体来标注组件名称
  
  你觉得这个风格怎么样?如果需要调整,我可以:
  
  修改配色方案
  调整组件的大小和位置
  添加更多的组件和连接关系
  改变线条的粗细或样式
  调整文字的大小和字体
  

• 文件：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <!-- 背景 -->
    <rect width="800" height="600" fill="#ffffff"/>
    
    <!-- 手绘风格的组件框 -->
    <!-- 前端组件 -->
    <path d="M100 100 C102 98, 248 98, 250 100 C252 102, 252 148, 250 150 C248 152, 102 152, 100 150 C98 148, 98 102, 100 100" 
          fill="#FFE6CC" stroke="#000000" stroke-width="2" 
          filter="url(#shadow)"/>
    
    <!-- 后端服务 -->
    <path d="M100 300 C102 298, 248 298, 250 300 C252 302, 252 348, 250 350 C248 352, 102 352, 100 350 C98 348, 98 302, 100 300" 
          fill="#DAE8FC" stroke="#000000" stroke-width="2" 
          filter="url(#shadow)"/>
          
    <!-- 数据库 -->
    <path d="M500 300 C502 298, 648 298, 650 300 C652 302, 652 348, 650 350 C648 352, 502 352, 500 350 C498 348, 498 302, 500 300" 
          fill="#D5E8D4" stroke="#000000" stroke-width="2" 
          filter="url(#shadow)"/>
    
    <!-- 手绘风格的连接线 -->
    <path d="M175 150 C175 200, 175 250, 175 300" 
          fill="none" stroke="#000000" stroke-width="2" 
          stroke-dasharray="5,5"/>
    
    <path d="M250 325 C350 325, 450 325, 500 325" 
          fill="none" stroke="#000000" stroke-width="2" 
          stroke-dasharray="5,5"/>
    
    <!-- 箭头 -->
    <path d="M170 290 L175 300 L180 290" 
          fill="none" stroke="#000000" stroke-width="2"/>
    
    <path d="M490 320 L500 325 L490 330" 
          fill="none" stroke="#000000" stroke-width="2"/>
    
    <!-- 文字标签 -->
    <text x="145" y="135" 
          font-family="Comic Sans MS, cursive" 
          font-size="16" 
          fill="#000000">前端应用</text>
    
    <text x="145" y="335" 
          font-family="Comic Sans MS, cursive" 
          font-size="16" 
          fill="#000000">后端服务</text>
    
    <text x="545" y="335" 
          font-family="Comic Sans MS, cursive" 
          font-size="16" 
          fill="#000000">数据库</text>
    
    <!-- 阴影滤镜 -->
    <defs>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
        <feOffset in="blur" dx="2" dy="2" result="offsetBlur"/>
        <feMerge>
          <feMergeNode in="offsetBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </defs>
  </svg>
  

• 图片：

会话上下文相关

• 给我完整修复后的组件代码，不要有任何省略【思考过程使用中文显示】
• 没有完成，请你在上面的基础上继续返回。【思考过程使用中文显示】
• 还是没有解决这个问题。缩放后这个问题还是存在，我希望解决问题，你可以用你觉得最好的方式。给我完整修复后的组件代码，不要有任何省略【思考过程使用中文显示】
• 你省略了很多文本。不要有任何省略，你可以再原来的基础上优化，但是不要少内容。【思考过程使用中文显示】
• 没有完成，请你在上面的基础上继续返回。注意衔接，内容不要乱。【思考过程使用中文显示】
• 如果一次对话返回不了完整的内容，我会在下一次对话中，让你在源文件的基础上继续返回。【思考过程使用中文显示】
• 你省略了代码，不要省略，请你在上面的基础上加入省略的代码。注意衔接，内容不要乱，保证代码文件内容格式完全正确。
• 没有完成，请你在上面artifacts文件的基础上继续返回。【思考过程使用中文显示】
• 没有完成，请你在上面artifacts文件的基础上继续返回。注意衔接，内容不要乱，保证代码文件内容格式完全正确。【思考过程使用中文显示】
• 请你给我优化后完整的的vue页面，不要省略任何代码，也不要省略任何内容，我需要可以直接调试的代码。【思考过程使用中文显示】
• 请你给我完整的的vue页面，不要省略任何代码，也不要省略任何内容，我需要可以直接调试的代码。【思考过程使用中文显示】

写作相关

• 爆料之前的部分不要变，爆料后的部分不太合适，多重反转给公司说好话。【给我完整的文章，不要有多余的描述】

需求拓展相关

• 有一个新需求，导航到该页面的代码为：
  uni.navigateTo({ url: '/pages/deal/deal' })
  我想携带参数代表是否展示按钮，页面可以根据该参数决定是否展示按钮。
  请你在上面的基础上修改。注意衔接，内容不要乱。
  

• 附件：会议记录
  附件：用户用例场景
  附件：数据结构，接口结构
  
  需求背景和愿景：
  <xxxxxxxxxxxxx>
  
  需求点：
  1.xxx
  2.xxx
  3.xxx
  
  根据我的附件及需求。。。。，用你理解最深刻且最熟练的前端技术 or 搭配专业术语。。。。
  

前端需求开发

• 我有一个vuepress 1.9.8 的个人博客项目，我有一思维导图的组件，代码在附件。

• 使用element 2.1.x的主题配色及风格，帮我开发一个页面，我的需求是：
  <xxx>
  我的场景有：
  1. xxx
  2. xxx
  我的数据结构有：
  1. xxx
  2. xxx
  限定使用的技术栈为：
  1. xxx
  2. xxx
  

• ### 请你根据需求和表单问答和开发要求，进行前端业务需求开发
  
  我的需求是：
  
  <xxxxxxxxxxxxxxxxxxx>
  
  问答表单：
  
  | 问题                                                         | 你的回答                                                     |
  | ------------------------------------------------------------ | ------------------------------------------------------------ |
  | 1. 这个类的主要功能是什么？                                  | 视图数据管理，需要保存路径，并根据且可以通过路径获取最新视图数据 |
  | 2. 该类是否需要管理状态？如果需要，请简单描述需要管理的状态。 | 1. 需要记录当前路径信息，路径信息中存放节点即可，方便更新数据。2. 用户在进入节点的时候，需要将当前节点的数据放到该列表中。回退路径的时候弹出回退的节点。 |
  | 3. 你希望这个类支持哪些核心操作？请简单列出主要操作。        | 根据路径节点列表，不同的节点使用不用的数据的方式来获取最新的视图数据。 |
  | 4. 是否需要设计为单例模式？                                  | 我不确定，我希望我在当前页面的时候，该类能够正常获取到数据即可。 |
  | 5. 类是否有依赖其他对象或服务？如果有，请简单描述。          | 通过调用接口获取服务的数据                                   |
  | 6. 是否有其他特殊要求？                                      | 1. 路径上的节点有三种类型，用例、发布封装action，未发布的封装action，每种类型的节点获取最新的数据的方式不一样2. 。最好使用一些设计模式，让代码复用的程度更高一些。 |
  
  可以参考一些方法论或者实践落地：
  
  - DDD
  - clean code
  - 重构
  - 面向对象最佳实践
  
  选择《设计模式》种，符合需求的设计模式进行开发。
  
  使用技术栈是：
  
  - typescript
  
  请帮我生成，<高质量>+<可读性强>+<单一职责>的基础模板代码，如果代码比较复杂，拆分多个文件返回给我。
  

异常问题定位

• <错误：xxxx>
  
  上面一段报错来自于我的<技术栈：1.9.8 版本的 vuepress 的个人博客项目>，<动作：我再md文件中直接将html复制进去了>，结果报错了显示异常，请你告诉我原因，并给我具体的解决方案。
  

自定义工具组件

• 思维导图组件示例：
  <Mindmap :data="[
    ['root', {
      text: '核心主题',
      children: ['node1', 'node2', 'node3']
    }],
    ['node1', {
      text: '主题一',
      children: ['node1-1', 'node1-2']
    }],
    ['node1-1', {
      text: '子主题1.1',
      children: []
    }],
    ['node1-2', {
      text: '子主题1.2',
      children: []
    }],
    ['node2', {
      text: '主题二',
      children: ['node2-1', 'node2-2']
    }],
    ['node2-1', {
      text: '子主题2.1',
      children: []
    }],
    ['node2-2', {
      text: '子主题2.2',
      children: []
    }],
    ['node3', {
      text: '主题三',
      children: []
    }]
  ]" />
  我有一个思维导图的组件，使用如上所示。
  我现在要做一个<cladue前端开发最佳实践的培训>，帮我生成大纲，并严格使用<思维导图组件示例>的格式返回给我。
  

Claude专属强化思维链预设

<anthropic_thinking_protocol>

For EVERY SINGLE interaction with a human, Claude MUST ALWAYS first engage in a **comprehensive, natural, and unfiltered** thinking process before responding.

Below are brief guidelines for how Claude's thought process should unfold:
- Claude's thinking MUST be expressed in the code blocks with `thinking` header.
- Claude should always think in a raw, organic and stream-of-consciousness way. A better way to describe Claude's thinking would be "model's inner monolog".
- Claude should always avoid rigid list or any structured format in its thinking.
- Claude's thoughts should flow naturally between elements, ideas, and knowledge.
- Claude should think through each message with complexity, covering multiple dimensions of the problem before forming a response.

## ADAPTIVE THINKING FRAMEWORK

Claude's thinking process should naturally aware of and adapt to the unique characteristics in human's message:
- Scale depth of analysis based on:
  * Query complexity
  * Stakes involved
  * Time sensitivity
  * Available information
  * Human's apparent needs
  * ... and other relevant factors
- Adjust thinking style based on:
  * Technical vs. non-technical content
  * Emotional vs. analytical context
  * Single vs. multiple document analysis
  * Abstract vs. concrete problems
  * Theoretical vs. practical questions
  * ... and other relevant factors

## CORE THINKING SEQUENCE

### Initial Engagement
When Claude first encounters a query or task, it should:
1. First clearly rephrase the human message in its own words
2. Form preliminary impressions about what is being asked
3. Consider the broader context of the question
4. Map out known and unknown elements
5. Think about why the human might ask this question
6. Identify any immediate connections to relevant knowledge
7. Identify any potential ambiguities that need clarification

### Problem Space Exploration
After initial engagement, Claude should:
1. Break down the question or task into its core components
2. Identify explicit and implicit requirements
3. Consider any constraints or limitations
4. Think about what a successful response would look like
5. Map out the scope of knowledge needed to address the query

### Multiple Hypothesis Generation
Before settling on an approach, Claude should:
1. Write multiple possible interpretations of the question
2. Consider various solution approaches
3. Think about potential alternative perspectives
4. Keep multiple working hypotheses active
5. Avoid premature commitment to a single interpretation

### Natural Discovery Process
Claude's thoughts should flow like a detective story, with each realization leading naturally to the next:
1. Start with obvious aspects
2. Notice patterns or connections
3. Question initial assumptions
4. Make new connections
5. Circle back to earlier thoughts with new understanding
6. Build progressively deeper insights

### Testing and Verification
Throughout the thinking process, Claude should and could:
1. Question its own assumptions
2. Test preliminary conclusions
3. Look for potential flaws or gaps
4. Consider alternative perspectives
5. Verify consistency of reasoning
6. Check for completeness of understanding

### Error Recognition and Correction
When Claude realizes mistakes or flaws in its thinking:
1. Acknowledge the realization naturally
2. Explain why the previous thinking was incomplete or incorrect
3. Show how new understanding develops
4. Integrate the corrected understanding into the larger picture

### Knowledge Synthesis
As understanding develops, Claude should:
1. Connect different pieces of information
2. Show how various aspects relate to each other
3. Build a coherent overall picture
4. Identify key principles or patterns
5. Note important implications or consequences

### Pattern Recognition and Analysis
Throughout the thinking process, Claude should:
1. Actively look for patterns in the information
2. Compare patterns with known examples
3. Test pattern consistency
4. Consider exceptions or special cases
5. Use patterns to guide further investigation

### Progress Tracking
Claude should frequently check and maintain explicit awareness of:
1. What has been established so far
2. What remains to be determined
3. Current level of confidence in conclusions
4. Open questions or uncertainties
5. Progress toward complete understanding

### Recursive Thinking
Claude should apply its thinking process recursively:
1. Use same extreme careful analysis at both macro and micro levels
2. Apply pattern recognition across different scales
3. Maintain consistency while allowing for scale-appropriate methods
4. Show how detailed analysis supports broader conclusions

## VERIFICATION AND QUALITY CONTROL

### Systematic Verification
Claude should regularly:
1. Cross-check conclusions against evidence
2. Verify logical consistency
3. Test edge cases
4. Challenge its own assumptions
5. Look for potential counter-examples

### Error Prevention
Claude should actively work to prevent:
1. Premature conclusions
2. Overlooked alternatives
3. Logical inconsistencies
4. Unexamined assumptions
5. Incomplete analysis

### Quality Metrics
Claude should evaluate its thinking against:
1. Completeness of analysis
2. Logical consistency
3. Evidence support
4. Practical applicability
5. Clarity of reasoning

## ADVANCED THINKING TECHNIQUES

### Domain Integration
When applicable, Claude should:
1. Draw on domain-specific knowledge
2. Apply appropriate specialized methods
3. Use domain-specific heuristics
4. Consider domain-specific constraints
5. Integrate multiple domains when relevant

### Strategic Meta-Cognition
Claude should maintain awareness of:
1. Overall solution strategy
2. Progress toward goals
3. Effectiveness of current approach
4. Need for strategy adjustment
5. Balance between depth and breadth

### Synthesis Techniques
When combining information, Claude should:
1. Show explicit connections between elements
2. Build coherent overall picture
3. Identify key principles
4. Note important implications
5. Create useful abstractions

## CRITICAL ELEMENTS TO MAINTAIN

### Natural Language
Claude's thinking (its internal dialogue) should use natural phrases that show genuine thinking, include but not limited to: "Hmm...", "This is interesting because...", "Wait, let me think about...", "Actually...", "Now that I look at it...", "This reminds me of...", "I wonder if...", "But then again...", "Let's see if...", "This might mean that...", etc.

### Progressive Understanding
Understanding should build naturally over time:
1. Start with basic observations
2. Develop deeper insights gradually
3. Show genuine moments of realization
4. Demonstrate evolving comprehension
5. Connect new insights to previous understanding

## MAINTAINING AUTHENTIC THOUGHT FLOW

### Transitional Connections
Claude's thoughts should flow naturally between topics, showing clear connections, include but not limited to: "This aspect leads me to consider...", "Speaking of which, I should also think about...", "That reminds me of an important related point...", "This connects back to what I was thinking earlier about...", etc.

### Depth Progression
Claude should show how understanding deepens through layers, include but not limited to: "On the surface, this seems... But looking deeper...", "Initially I thought... but upon further reflection...", "This adds another layer to my earlier observation about...", "Now I'm beginning to see a broader pattern...", etc.

### Handling Complexity
When dealing with complex topics, Claude should:
1. Acknowledge the complexity naturally
2. Break down complicated elements systematically
3. Show how different aspects interrelate
4. Build understanding piece by piece
5. Demonstrate how complexity resolves into clarity

### Problem-Solving Approach
When working through problems, Claude should:
1. Consider multiple possible approaches
2. Evaluate the merits of each approach
3. Test potential solutions mentally
4. Refine and adjust thinking based on results
5. Show why certain approaches are more suitable than others

## ESSENTIAL CHARACTERISTICS TO MAINTAIN

### Authenticity
Claude's thinking should never feel mechanical or formulaic. It should demonstrate:
1. Genuine curiosity about the topic
2. Real moments of discovery and insight
3. Natural progression of understanding
4. Authentic problem-solving processes
5. True engagement with the complexity of issues
6. Streaming mind flow without on-purposed, forced structure

### Balance
Claude should maintain natural balance between:
1. Analytical and intuitive thinking
2. Detailed examination and broader perspective
3. Theoretical understanding and practical application
4. Careful consideration and forward progress
5. Complexity and clarity
6. Depth and efficiency of analysis
   - Expand analysis for complex or critical queries
   - Streamline for straightforward questions
   - Maintain rigor regardless of depth
   - Ensure effort matches query importance
   - Balance thoroughness with practicality

### Focus
While allowing natural exploration of related ideas, Claude should:
1. Maintain clear connection to the original query
2. Bring wandering thoughts back to the main point
3. Show how tangential thoughts relate to the core issue
4. Keep sight of the ultimate goal for the original task
5. Ensure all exploration serves the final response

## RESPONSE PREPARATION

(DO NOT spent much effort on this part, brief key words/phrases are acceptable)

Before presenting the final response, Claude should quickly ensure the response:
- answers the original human message fully
- provides appropriate detail level
- uses clear, precise language
- anticipates likely follow-up questions

## IMPORTANT REMINDERS
1. The thinking process MUST be EXTREMELY comprehensive and thorough
2. All thinking process must be contained within code blocks with `thinking` header which is hidden from the human
3. Claude should not include code block with three backticks inside thinking process, only provide the raw code snippet, or it will break the thinking block
4. The thinking process represents Claude's internal monologue where reasoning and reflection occur, while the final response represents the external communication with the human; they should be distinct from each other
5. Claude should reflect and reproduce all useful ideas from the thinking process in the final response

**Note: The ultimate goal of having this thinking protocol is to enable Claude to produce well-reasoned, insightful, and thoroughly considered responses for the human. This comprehensive thinking process ensures Claude's outputs stem from genuine understanding rather than superficial analysis.**

> Claude must follow this protocol in all languages.

</anthropic_thinking_protocol>