讲师中心 微信公众号
AI工具推荐 视频效率加速

Cursor写前端页面需求提示词怎么按内容平台改写

夜瑶君_1689

夜瑶君_1689

发布时间:2026-06-26 17:28:00

|

1039人浏览过

|

来源于php中文网

原创

需先确认平台特性再写提示词:微信公众号要求内联CSS、禁用flex和外部字体;小红书禁用script、强制其字体栈;抖音图文需竖屏适配与懒加载;知乎限制class长度且禁用外部字体。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

cursor写前端页面需求提示词怎么按内容平台改写

你需要让Cursor生成适配不同内容平台(如微信公众号、小红书、抖音图文、知乎专栏)的前端页面代码,但默认提示词会产出通用HTML,导致样式错位、字体异常、交互失效。

先确认平台特性再写提示词

微信公众号只支持内联CSS和有限HTML标签;小红书Web端禁用script且强制使用其字体栈;抖音图文页需适配竖屏滚动与懒加载容器;知乎对class命名有长度限制且禁止外部字体。不区分平台直接让Cursor写“响应式页面”,生成的代码90%无法直接粘贴发布。

打开Cursor左侧边栏→点击“+ New Chat”→在输入框顶部选择对应平台的预设模板(若无则手动新建)。

微信公众号专用提示词写法

方法一:用平台约束前置

立即学习“前端免费学习笔记(深入)”;

在提示词开头明确声明:“你是一个微信公众号前端渲染器,只输出符合微信JSSDK 2.0规范的代码。禁止使用

方法二:给结构加钩子

要求Cursor在生成的div外层自动包裹

,并在每个段落p标签里插入data-weixin="true"属性——这是微信后台识别富文本区块的关键标识,漏掉会导致排版塌陷。

小红书平台提示词改写步骤

第一步:锁定字体与间距

在提示词中加入:“标题用‘PingFang SC’,‘Helvetica Neue’,正文用‘HarmonyOS Sans’,‘Noto Sans CJK SC’;行高固定为1.8,段间距32px;所有按钮必须带data-xhs-action属性。”

第二步:禁用危险语法

PigX UI 前端开发
PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

明确写出:“禁止使用<script>、onload、document.write、eval、localStorage;所有事件绑定用data-*属性替代,例如data-click="share"。”</script>

第三步:适配容器宽度

小红书Web页内容区最大宽度为640px,且左右留白各24px,因此必须让Cursor在最外层div上强制设置style="max-width:640px; margin:0 auto; padding:0 24px;",否则文字会撑破页面。

抖音图文页提示词关键修改点

把“生成一个卡片式页面”改成:“生成抖音图文页首屏卡片,宽100vw,高80vh,背景图用cover裁切,底部固定悬浮按钮,按钮需带data-tt-action="next"。”

强调加载机制:“所有图片必须用Cursor写前端页面需求提示词怎么按内容平台改写,且src属性值以https://p16-web.tiktokcdn.com/开头,否则抖音审核不通过。”

【抖音不解析外部CSS文件,所有样式必须内联且不能超过2KB】

知乎专栏提示词避坑写法

方法一:控制class长度

要求Cursor生成的class名不超过12字符,例如用“z-ttl”代替“zhihu-article-title”,因为知乎后端会截断超长class导致样式丢失。

方法二:规避字体风险

写明:“禁用@font-face、font-family中不得出现‘思源’‘霞鹜’等开源字体名称,只允许使用‘Helvetica Neue’,‘Arial’,‘Noto Sans SC’。”

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2283

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4923

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6030

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5518

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

783

2024.05.22

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2283

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4923

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6030

2024.03.19

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

80

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn