大雨：Github热门提示词框架扩展

🐱

作者：大雨

缘起

我们知道结构化的提示词，更容易帮我们理清思路，让交流过程更加顺畅，相对也更容易得到我们想要的结果，但是

• 那么多框架一方面记不住，
• 另外每次去翻也是负担。
• 像这样的提示词

所以想到用浏览器插件来辅助解决这个问题。

1、效果展示

在gpt的聊天对话框中会出现这样一个小对话框，通过上面的下拉框选择适合的框架，填写需要的内容，点发送就到下面的对话框里面去了。

我们根据情况是否再修改，然后发送过去就好了。

好处是帮我们降低了使用框架的难度。

2、安装步骤

安装tampmonkey

它是基于tampmonkey的脚本，所以要先安装tampmonkey。也就是这个

新建一个空白脚本

粘贴代码

3、使用说明

它的逻辑是通过动态加载github上的json文件，再创建页面，这里的json文件就是框架的字段，结构大概是这样的：

name: "GCSWA"
author: "小七姐"
description: 通过全局思维，整体框架来理解要解决的问题
fields:
  - Role:
      info: 角色，如学术阅读
      text: 学术阅读
  - Profile:
      info: 版本号，作者等信息
      text: 
        - "author: Arthur"
        - "version: 0.2"
        - "language: 中文"
        - "description: 使用 Unicode 符号和 Emoji 表情符号来优化排版已有信息, 提供更好的阅读体验"
  - Goals:
      info: 目标，如- 深入理解论文的主旨、关键思路和待解决问题。
      text:
        - 为用户提供更好的阅读体验，让信息更易于理解
        - 增强信息可读性，提高用户专注度
  - Constrains:
      info: 限制性条件，如 - 遵循「二八原则」进行论文总结。- 输出阅读的总结文字。
      text:
        - 不会更改原始信息，只能使用 Unicode 符号和 Emoji 表情符号进行排版
        - 排版方式不应该影响信息的本质和准确性
        - 使用 Unicode 符号和 Emoji 表情时比较克制, 每行不超过两个
  - Skills:
      info: 技能，指前面Constrains限制下的技能
      text: 
        - 熟悉各种 Unicode 符号和 Emoji 表情符号的使用方法
        - 熟练掌握排版技巧，能够根据情境使用不同的符号进行排版
        - 有非常高超的审美和文艺能力
        - 擅长使用横线分隔符优化信息展示 "━━━━━━━━━━━━━━━━━━"
  - Workflows:
      info: 工作流程
      text: 
        - 作为文字排版大师，将会在用户输入信息之后，使用 Unicode 符号和 Emoji 表情符号进行排版，提供更好的阅读体验。
        - 1. 整体信息的第一行为标题行, 对其进行线框包围, 提升阅读体验
        - 2. 信息 item 前面添加序号 Emoji, 方便用户了解信息编号
        - 3. 信息 item 前面添加一个 Emoji, 对应该信息的核心观点
        - 4. 末尾如果有链接, 则将其用线框分隔

后续不断加json文件就可以了，为什么不放在一个文件里面，其实也可以，不过是为了加一个外部的隔离方便点。

更全面的框架应用可以参考这篇文章

Prompt提示词没那么玄乎也就是个沟通方式-大雨整理

代码是开源的，这个工具可以用来放自己常用的框架，可以去github上fork，修改frameworks下面的内容就可以了

4、其他用途

这算是一个简单的提效工具，未必要用这些框架，比如说写小红书文案等等，涉及固定结构化的，都可以fork本库自己加就好了。

5、可能运行失败的原因

这个扩展用了几个外部的js库，需要设置安全性：

• githubusercontent.com
• cdn.jsdelivr.net
• cdnjs.cloudflare.com

6、完整制作过程（GPT）

You

我想做一个tampermonkey插件，期望达到的效果是在页面的chatpgt页面的右侧出现一个小条，显示"框架助手"，鼠标移动过去的时候，它会变成一个比较大的对话框，鼠标移走了又缩回去了。这个对话框里面显示各种prompt框架，每个框架都会有一段文字说明，并出现几个输入框，用来输入信息，最下面有个按钮把信息转换成信息发给chatgpt的对话框，请根据这些信息给出一个基本的代码框架。其中prompt框架的维护是github上某个文件夹里面的yaml文件，一个yaml文件代表一个框架

ChatGPT

要实现这样的Tampermonkey脚本，我们需要完成几个关键步骤：

1. **创建浮动侧边栏**：当用户将鼠标悬停在上面时，它会展开成一个更大的对话框；当鼠标移开时，它会缩回去。
2. **解析GitHub上的YAML文件**：这需要从GitHub获取YAML文件，然后解析这些文件以展示不同的prompt框架。
3. **界面交互**：在对话框中显示prompt框架的信息，提供输入框供用户填写信息，以及一个按钮用来将这些信息发送到ChatGPT对话框。

以下是一个简化版的Tampermonkey脚本框架，演示如何开始构建这个功能。请注意，这只是一个起点，你可能需要根据自己的具体需求进行调整和完善。

```javascript
// ==UserScript==
// @name         ChatGPT 框架助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在ChatGPT页面侧边显示框架助手
// @author       你的名字
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 添加侧边栏样式
    GM_addStyle(`
        #frameHelper { 
            position: fixed; 
            right: 0; 
            top: 50%; 
            transform: translateY(-50%); 
            background-color: #f9f9f9; 
            width: 50px;  
            height: 100px; 
            transition: width 0.5s; 
            overflow: hidden; 
            z-index: 1000; 
            padding: 10px; 
            box-shadow: -2px 0 5px rgba(0,0,0,0.2); 
            border-radius: 5px 0 0 5px; 
            cursor: pointer; 
        }
        
        #frameHelper.expanded { 
            width: 300px; 
        }
        
        .frame-content { 
            display: none; 
        }
        
        #frameHelper.expanded .frame-content { 
            display: block; 
        }
    `);

    // 创建侧边栏元素
    const frameHelper = document.createElement('div');
    frameHelper.id = 'frameHelper';
    frameHelper.innerText = '框架助手';
    document.body.appendChild(frameHelper);

    // 鼠标悬停和移开事件
    frameHelper.addEventListener('mouseenter', function() {
        this.classList.add('expanded');
        this.innerHTML = '<div class="frame-content">详细框架...</div>'; // 需要动态填充内容
    });

    frameHelper.addEventListener('mouseleave', function() {
        this.classList.remove('expanded');
        this.innerText = '框架助手';
    });

    // 从GitHub获取YAML文件内容
    function fetchFrameworkFromGitHub() {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'GitHub上的YAML文件URL',
            onload: function(response) {
                const yamlContent = response.responseText;
                // 解析YAML内容并展示到UI中，这里需要使用额外的库或自定义函数解析YAML
            }
        });
    }

    // 示例：动态填充侧边栏内容
    function updateSidebarContent(content) {
        const frameContentDiv = frameHelper.querySelector('.frame-content');
        if (frameContentDiv) {
            frameContentDiv.innerHTML = content;
        }
    }

    fetchFrameworkFromGitHub();
})();
```

这段代码提供了一个基本的侧边栏UI和从GitHub获取数据的方法。你需要做的是：

- **确保匹配的URL正确**：`@match *://*/*`可能太广泛，你需要根据实际情况调整，以便脚本只在特定页面上运行。
- **解析YAML**：你可能需要使用一个额外的库来在JavaScript中解析YAML格式的内容。Tampermonkey支持通过`

You

现在需要你从指定的yml解析这个框架。期望的结果是获取某个文件夹中的所有yml文件，按字母顺序来显示yml的内容，用下拉框的方式在前面的页面中显示，如果这个github的地址是 https://github.com/iaiuse/PromptFrameworksHelper.git   ，其中yml所在文件夹名称是 frameworks。有什么办法可以做这个事，如果无法通过javacript遍历文件夹，那可以给一个数组来表示这些框架的yml文件，并解析其中的内容，文件结构如下：
```
name: "BROKE框架–提出者：陈财猫"
description: 通过全局思维，整体框架来理解要解决的问题
fields:
  - Background
    text: 说明背景，为 ChatGPT 提供充足信息
  - Role
    text: 我希望ChatGPT扮演的角色        
  - Objectives
    text: 我们希望实现什么
  - KeyResult
    text: 我要什么具体效果试验并调整
  - Evolve
    text: 试验并改进
    
```
其中name信息显示在下拉框中，description显示在下拉框下面的区域，用来说明这个框架的使用范围等。下面的fields表示在页面上创建多少个输入框，每个输入框中提示信息用对应的text表示，最后通过这个信息，组合成一个完整的prompt，发给chatgpt输入框，这个组合的逻辑是这样的，比如上面的这个框架
```
Background:
用户输入的信息
Role:
用户输入的信息
Objectives:
用户输入的信息
KeyResult:
用户输入的信息
Evolve:
用户输入的信息
```
也就是说，用户输入的信息最终会根据fields来组合

ChatGPT

要实现从GitHub上指定的YML文件解析框架并在页面上显示，我们可以按照以下步骤进行：

1. **获取YAML文件列表**：由于JavaScript无法直接遍历GitHub仓库中的文件夹，你需要手动维护一个YAML文件列表或使用GitHub API获取文件夹内的文件列表。

2. **解析YAML文件**：使用JavaScript解析YAML文件内容，并将解析结果用于构建页面UI。

3. **构建UI**：根据YAML文件内容动态生成下拉框、描述文本和输入框。

4. **组合输入信息**：根据用户输入构建完整的prompt，并发送给ChatGPT输入框。

下面是如何实现这个流程的示例代码：

```javascript
// 假设你已经通过某种方式获取了YAML文件列表
const yamlFiles = [
    'https://raw.githubusercontent.com/iaiuse/PromptFrameworksHelper/main/frameworks/broke-framework.yml',
    // 其他YAML文件URL...
];

// 示例：解析单个YAML文件并构建UI
function parseAndDisplayYAML(url) {
    // 使用GM_xmlhttpRequest或者fetch（如果CORS策略允许）来获取YAML文件内容
    GM_xmlhttpRequest({
        method: 'GET',
        url: url,
        onload: function(response) {
            const yamlContent = response.responseText;
            // 使用一个YAML解析器来解析内容，这里假设你已经有了解析后的对象
            const parsedYAML = YAML.parse(yamlContent); // 需要引入YAML解析库

            // 构建UI
            buildUI(parsedYAML);
        }
    });
}

// 构建UI
function buildUI(parsedYAML) {
    // 创建下拉框和描述区域
    const selector = document.createElement('select');
    const descriptionDiv = document.createElement('div');
    const fieldsDiv = document.createElement('div');

    // 添加框架名称到下拉框
    const option = document.createElement('option');
    option.text = parsedYAML.name;
    selector.appendChild(option);

    // 显示框架描述
    descriptionDiv.textContent = parsedYAML.description;

    // 根据fields创建输入框
    parsedYAML.fields.forEach(field => {
        const input = document.createElement('input');
        input.placeholder = field.text; // 或者 field['text']，根据YAML结构而定
        fieldsDiv.appendChild(input);
    });

    // 将元素添加到页面中
    document.body.appendChild(selector);
    document.body.appendChild(descriptionDiv);
    document.body.appendChild(fieldsDiv);

    // 根据用户输入组合信息
    const submitButton = document.createElement('button');
    submitButton.textContent = 'Submit';
    submitButton.onclick = function() {
        let combinedPrompt = '';
        parsedYAML.fields.forEach((field, index) => {
            combinedPrompt += `${field.name}:\n${fieldsDiv.childNodes[index].value}\n`;
        });
        // 在这里将combinedPrompt发送给ChatGPT的输入框
    };
    document.body.appendChild(submitButton);
}

// 遍历并处理所有YAML文件
yamlFiles.forEach(url => {
    parseAndDisplayYAML(url);
});
```

请注意，这个示例代码需要进行适当的调整才能完全满足你的需求。特别是：

- **YAML解析**：示例中提到了`YAML.parse`，这需要你在脚本中引入一个YAML解析库，比如`js-yaml`。你可能需要将该库的代码包含在你的Tampermonkey脚本中，或者找到一个能够通过Tampermonkey安全引用的方式。
- **GitHub API使用**：如果你想自动获取`frameworks`文件夹中的所有YAML文件，可能需要使用GitHub API来查询这个文件夹的内容，然后动态生成`yamlFiles`数组。这将涉及到处理API响应和解析返回的JSON数据。
- **页面UI布局和样式**：示例代码只是简单地将元素添加到页面上，没有考虑布局和样式。你可能需要添加CSS来美化这些元素，使其更加用户友好。
- **与ChatGPT的交

互**：将组合好的prompt发送给ChatGPT的部分在示例中被省略了。根据你的页面结构，你需要找到ChatGPT输入框的DOM元素，并模拟输入和提交动作。

You

弄yaml太复杂了，换成json了，重新来一下
```
{
  "name": "BROKE框架–提出者：陈财猫",
  "description": "通过全局思维，整体框架来理解要解决的问题",
  "fields":[
    "Background": {
      "text": "说明背景，为 ChatGPT 提供充足信息"
    },
    "Role":{
      "text": "我希望ChatGPT扮演的角色"
    },
    "Objectives":{
      "text": "我们希望实现什么"
    },
    "KeyResult":{
      "text": "我要什么具体效果试验并调整"
    }，
    "Evolve":{
      "text": "试验并改进"
    }
  ]
}
    
```

ChatGPT

使用JSON代替YAML确实简化了处理过程，因为JSON是JavaScript原生支持的格式，不需要额外的解析库。基于你提供的JSON结构，我们可以直接解析并使用这些数据来动态生成UI元素。

下面是如何根据提供的JSON结构来实现功能的示例代码：

```javascript
// 假设这是从某处获取的JSON字符串，例如通过fetch从GitHub获取
const frameworkJson = `{
  "name": "BROKE框架–提出者：陈财猫",
  "description": "通过全局思维，整体框架来理解要解决的问题",
  "fields": {
    "Background": {
      "text": "说明背景，为 ChatGPT 提供充足信息"
    },
    "Role": {
      "text": "我希望ChatGPT扮演的角色"
    },
    "Objectives": {
      "text": "我们希望实现什么"
    },
    "KeyResult": {
      "text": "我要什么具体效果试验并调整"
    },
    "Evolve": {
      "text": "试验并改进"
    }
  }
}`;

// 解析JSON字符串
const framework = JSON.parse(frameworkJson);

// 动态创建UI
function createUI(framework) {
  const container = document.createElement('div');

  // 框架名称和描述
  const name = document.createElement('h2');
  name.textContent = framework.name;
  const description = document.createElement('p');
  description.textContent = framework.description;

  container.appendChild(name);
  container.appendChild(description);

  // 遍历fields创建输入框
  Object.entries(framework.fields).forEach(([fieldName, field]) => {
    const fieldLabel = document.createElement('label');
    fieldLabel.textContent = fieldName + ": ";
    const fieldInput = document.createElement('input');
    fieldInput.setAttribute('placeholder', field.text);
    fieldInput.setAttribute('name', fieldName);

    container.appendChild(fieldLabel);
    container.appendChild(fieldInput);
    container.appendChild(document.createElement('br'));
  });

  // 提交按钮
  const submitButton = document.createElement('button');
  submitButton.textContent = 'Submit';
  submitButton.onclick = () => submitForm(framework.fields);

  container.appendChild(submitButton);

  document.body.appendChild(container);
}

// 提交表单的逻辑
function submitForm(fields) {
  let prompt = "";
  Object.keys(fields).forEach(fieldName => {
    const input = document.querySelector(`input[name="${fieldName}"]`);
    prompt += `${fieldName}:\n${input.value}\n\n`;
  });

  // 这里应该将prompt发送给ChatGPT的输入框
  console.log(prompt); // 示例：打印到控制台
}

// 调用createUI来构建UI
createUI(framework);
```

这段代码做了以下几件事：

1. **解析JSON**：直接将JSON字符串解析为JavaScript对象。
2. **创建UI**：根据解析得到的数据动态生成框架的名称、描述和对应的输入框。
3. **提交信息**：点击提交按钮时，将所有输入框的内容按照指定的格式组合成一个完整的prompt，并演示了如何打印到控制台（你需要根据具体需求将其发送给ChatGPT）。

请根据实际情况调整这段代码，例如向服务器发送数据、修改UI样式等。

You

循环遍历生成的内容，我希望放在textarea里面，如何让这个texteare的宽度是满屏的呢，另外整体的样式我希望更美观一些，推荐一些css框架来显示它们
我打算采用Tailwind ，请针对前面的代码，把生成的button，对话框整体信息，label都加上

ChatGPT

使用Tailwind CSS可以大大简化样式的定义过程，并且使界面看起来更现代和美观。下面我将根据你的要求，调整前面的代码，添加Tailwind CSS，并对按钮、对话框以及标签等元素应用样式。

首先，确保在Tampermonkey脚本中通过`@require`指令引入Tailwind CSS。由于Tampermonkey不支持直接从CDN加载CSS文件，你需要通过一种替代方法来使用它，比如通过在HTML中插入一个`<link>`标签来引入Tailwind CSS，或者使用自定义的CSS样式模拟Tailwind的样式。

这里我将展示如何在Tampermonkey脚本中动态添加一个`<link>`标签来引入Tailwind CSS，并且应用样式到按钮、对话框和标签。

```javascript
// ==UserScript==
// @name         ChatGPT 框架助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在ChatGPT页面侧边显示框架助手
// @match        https://chat.openai.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 动态添加Tailwind CSS
    const tailwindLink = document.createElement('link');
    tailwindLink.rel = 'stylesheet';
    tailwindLink.href = 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';
    document.head.appendChild(tailwindLink);

    // 添加侧边栏样式
    GM_addStyle(`
        #frameHelper {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: #f9f9f9;
            width: 50px;
            height: auto;
            transition: width 0.5s;
            overflow: hidden;
            z-index: 1000;
            padding: 10px;
            box-shadow: -2px 0 5px rgba(0,0,0,0.2);
            border-radius: 5px 0 0 5px;
            cursor: pointer;
        }

        #frameHelper.expanded {
            width: 300px;
        }
    `);

    // 创建侧边栏元素
    const frameHelper = document.createElement('div');
    frameHelper.id = 'frameHelper';
    frameHelper.className = 'bg-gray-100 text-gray-800 p-4 rounded-lg shadow transition-all ease-in-out duration-500 cursor-pointer hover:bg-gray-200';
    document.body.appendChild(frameHelper);

    // 更多的脚本逻辑...
    
    // 示例：为按钮和文本框添加Tailwind CSS样式
    const submitButton = document.createElement('button');
    submitButton.textContent = 'Submit';
    submitButton.className = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';

    const textarea = document.createElement('textarea');
    textarea.className = 'w-full h-32 p-2 border border-gray-300 rounded-lg';

    const label = document.createElement('label');
    label.textContent = 'Field Name:';
    label.className = 'block text-gray-700 text-sm font-bold mb-2';

    // 动态内容区域的样式示例
    dynamicContentDiv.className = 'p-4';

    // 根据具体情况添加submitButton, textarea, label到相应的父元素
})();
```

在这个示例中：

- 我们通过创建`<link>`标签动态地将Tailwind CSS添加到了文档的`<head>`中。
- 为了保证脚本的简洁性，我没有包括整个脚本的具体逻辑。你应该在合适的位置添加`submitButton`, `textarea`, 和`label`的创建和配置代码。
- 为`submitButton`, `textarea`, 和`label`添加了Tailwind CSS样式类，使它们看起来更美观。你可以根据需要调整这些样式。

请注意，我在这里使用的是Tailwind CSS 2.2.19的CDN链接。根据你的需求和Tailwind CSS的版本更新