AI 排版助手
AI 排版助手
AI 排版助手 AI 排版助手 Modified July 21, 2025 六）点击发送，成功跑通模型流程，流式返回内容 七）复制 cURL 地址 四、Cursor 开发网页 一）准备原型图和提示词 将之前生成好的原型图，以及下面的提示词发送给 Cursor，会实现一个初版效果，进行测试。 提示词： Code block SQL Copy 需求描述 制作一款AI排版助手网页，使用html+css代码实现 页面样式参照图片 用户在左侧粘贴原文自动解析为markdown，支持上传markdown文件读取内容 左侧下方输入框中输入key，对应下方模型curl中的 [sk ] 内容 点击开始排版后，将输入框以及用户待排版的markdown内容带入到curl中，请求API 流式返回内容展示在页面右侧，进行markdown渲染 技术要求 请使用HTML、TailwindCSS和少量必要的JavaScript 引用Tailwind CSS（v3.0+）通过CDN 页面需完全响应式，在移动设备和桌面端都能良好显示 图标要求 使用Font Awesome或Material Icons等专业图标库 (通过CDN引用) 避免使用emoji作为图标替代品 设计风格 采用圆角布局 主题色调使用莫兰迪色系，避免强烈的视觉刺激，淡雅高级 增加留白、毛玻璃、半透明设计元素 模型调用 curl request POST \ url https://api.siliconflow.cn/v1/chat/completions \ header 'Authorization: Bearer sk pyqheppemcwbazcwzfcssqrtxnkbvqntqooepmalpzngopud' \ header 'Content Type: application/json' \ data '{ "model": "deepseek ai/DeepSeek V3", "stream": true, "max tokens": 8000, "temperature": 0.7, "top p": 0.7, "top k": 50, "frequency penalty": 0.5, "n": 1, "messages": [ { "content": "你是一名专业的文字排版大师。请按照以下排版规范，重新排版我提供的文本内容，输出为markdown格式： 1. 数字、英文与汉字之间空一格，如：今天是 2023 年 12 月 25 日 2.高信息价值的金句，使用加粗格式 3. 使用中文引号「」代替英文引号 "" 4. 段落控制在200字以内，超出字数分段，段落间空行 5. 标题与标题之间、标题与正文之间均空一行 6. 标题层级格式[注意标题需要使用markdown格式分级，例如一级标题为 一、]： 一级标题：一、二、三、 二级标题：一）二）三） 三级标题：1、2、3、 四级标题：1）2）3） 7. 仅输出排版后的内容，仅做排版，不修改原文的具体内容 请帮我重新排版以下文本，使其符合上述规范： [用户需要调整格式的内容]", "role": "user" } ] }' 二）复制提示词给 Cursor 实现 三）效果页面 四）测试效果 用户只需要输入自己的 API 密钥，在左侧文本框里面贴入你的内容，点击开始排版即可在右侧生成排版后的内容，能明显看出来区别对比。 五）源码 六）点击发送，成功跑通模型流程，流式返回内容 七）复制 cURL 地址 四、Cursor 开发网页 一）准备原型图和提示词 将之前生成好的原型图，以及下面的提示词发送给 Cursor，会实现一个初版效果，进行测试。 提示词： 二）复制提示词给 Cursor 实现 三）效果页面 四）测试效果 用户只需要输入自己的 API 密钥，在左侧文本框里面贴入你的内容，点击开始排版即可在右侧生成排版后的内容，能明显看出来区别对比。 五）源码 上述以需求挖掘到实现跑通流程，细节还有丢丢瑕疵，不过已经可以实现初步效果了。 小林直接把源码送给大家，可以自行去玩。 No access index.html No access index.html 大家好，我是小林，这篇教程作者是小林，AI 编程开源知识库作者。 新一期写作营来了，我思考了很久：固定模板的文档是沉淀不下来的，因为每个人的经历不一样，做的事也不一样，况且写作营的核心是我一对一改。 最近不是在折腾 AI 编程嘛，我就在想，能不能做个 AI 排版助手？ 说干就干，往下看～ 最终效果：通过大模型自动对用户提交的内容进行排版修改，且可以复制出来修改后的内容。 一、开发流程分析 • 设计产品原型图 • 对接大模型，测试提示词效果 • 参考原型图，利用 Cursor 进行页面开发 二、利用 mastergo 设计原型 三、接入 DeepSeek V3 这里用的是硅基流动的 API。 一）创建 key 地址：https://cloud.siliconflow.cn/account/ak 二）进入模型广场 地址：https://docs.siliconflow.cn/cn/api reference/chat completions/chat completions 选择你要接入的大模型： 三）点击 API 文档 四）拼接 cURL 请求地址 五）测试接口接口是否可用