我要投稿

AI + 前端提示词规范建议

发布日期：2025-06-25 07:43:37 浏览次数： 1538

作者：剌一多

微信搜一搜，关注“剌一多”

「AI + 前端提示词规范建议」的系统化扩展与优化，目的是让前端开发者与 AI 高效协同，用语言驱动组件、逻辑、样式的结构化生成与复用，实现“Prompt 就是新的 API”。

AI + 前端提示词规范建议（专业版）

我们将其划分为五大类：通用指令规范、结构表述规范、组件语义规范、样式表达规范、行为逻辑规范，并配以具体示例和目的说明。

一、通用指令规范（Prompt Command）

规范维度	建议	示例	目的
明确动词指令	使用“生成”、“优化”、“解释”等主动语句	生成一个登录页面组件	提升 AI 执行明确性
限定输出形式	使用“仅输出代码块”、“不包含说明文字”等说明	仅输出 .vue 文件代码	避免多余信息干扰
指定技术栈	明确语言、框架、工具库	使用 Vue 3 + TypeScript + Element Plus	确保工具链一致
指定响应格式	JSON / JSX / markdown / .vue 文件结构等	输出为 React JSX 文件	便于解析与集成

二、结构表述规范（Structure Specification）

规范维度	建议	示例	说明
模块拆解	用列表标出页面/组件的组成部分	页面分为顶部导航、侧边栏、内容区	帮助 AI 正确分块生成
props/slots 明确	明确列出组件的 props / slots / emits	props: `title`, `onClick`	提供组件的输入输出结构
接口说明	明确 API 的路径、参数、返回结构	接口：POST `/api/user`，返回 { name, age }	支持自动生成 mock 或逻辑绑定

三、组件语义规范（Component Semantics）

规范维度	建议	示例	说明
使用具象描述词	避免泛泛的“通用组件”、“有用的卡片”	“用户信息展示卡片”或“订单统计图”	AI 更易还原真实场景
明确复用需求	加入“可复用”、“可配置”字样	生成一个可复用的 `Pagination` 组件	AI 会封装为 props 控制而非硬编码
状态与行为描述	使用状态图式语言	组件有三种状态：加载中、空数据、错误	提高状态覆盖率与 UI 分支完整性

四、样式表达规范（Style Semantics）

规范维度	建议	示例	说明
使用 UI 框架词汇	如“仿 Ant Design / Tailwind 风格”	使用 Tailwind 的按钮样式规范	模拟实际视觉规范
颜色/间距具体	避免模糊用词，如“好看”、“舒服”	“主色为蓝色，间距为 16px，圆角 8px”	帮助 AI 控制精度
响应式规范说明	明确 breakpoint 行为	移动端为单列，PC 端为三列卡片布局	实现真实的 RWD 支持
暗黑模式支持	明确需生成 Dark Mode 样式	支持深色模式，使用 Tailwind `dark:` 前缀	增强用户体验与风格一致性

五、行为逻辑规范（Behavior + State）

规范维度	建议	示例	说明
明确触发动作	使用“点击后”、“切换时”、“加载后”等	点击按钮后弹出对话框	明确组件事件与用户操作
使用状态逻辑描述	逻辑分支尽量结构化描述	“如果为空则展示提示信息，否则渲染表格”	便于生成 if/else 分支或条件渲染语法
明确数据流向	指出状态在哪个组件管理、是否提升	状态管理由父组件传入 props	支持逻辑组件划分优化
API 绑定行为	说明请求逻辑的绑定关系	表单提交时调用 `api/login` 并跳转 `/home`	实现接口驱动的自动行为挂钩

✨ Bonus：高级提示词设计建议（Prompt Engineering Best Practices）

类别	建议	示例
采用角色设定	“你是一个前端组件生成器，专精 React”	更容易触发模型内部提示链
加入视觉参考	可引用外部 UI 示例链接 / 设计 token 描述	模仿 figma 风格，使用浅灰背景卡片
使用 JSON 结构输入	特别适合生成动态配置 UI（如表单）	将字段配置传为 JSON，生成动态表单组件
多语言提示支持	可同时用中英提示提高通用性	使用 bilingual Prompt 适配多语言团队

✅ 总结：好提示词 = 半个优秀前端工程师

类别	本质能力
通用结构	控制语义一致性
技术特定	限定输出范围
语义表述	明确业务功能与组件边界
样式控制	视觉风格一致性
行为逻辑	确保交互完整性

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业

相关资讯

2025-06-25

提示词管理神器：Promptify

2025-06-25

前端 Prompt 编写规范指南

2025-06-24

从模糊目标到精准提示词(Prompt)：详解如何让 AI 真正理解你在说什么

2025-06-24

深入探索 Prompt Engineering：开启语言模型应用新境界

2025-06-23

AI Agent 智能体prompt提示词系统方法拆解

2025-06-23

什么是提示词设计？

2025-06-23

从元提示词到高级元提示词?!

2025-06-23

花2天时间打造的“个人战略规划Prompt系统”，建议收藏！

了解更多

了解更多

160+中大型企业正在使用53AI

立即咨询预约演示

把握AI发展的机遇，共同探索、共同进步

2025-01-22

如何打造基于GenAI的员工服务机器人

2025-01-22

热点资讯

「AutoGLM沉思」提示词示例（10+场景）

2025-04-01

浅谈如何利用【提示工程】赋能你的业务场景

2025-04-02

AI写材料：搭框架10条黄金提示词

2025-04-08

懒人提示法：吴恩达提出新AI交互趋势，提示词越简单效果越好

2025-04-08

CoT思维链技术解读及ToT、GoT、PoT等提示词工程框架介绍

2025-05-08

别再和AI说废话了，谷歌的6个prompt黄金法则让你的AI秒变学霸

2025-05-08

Claude 系统提示词泄露！

2025-05-08

Google 官方提示工程 (Prompt Engineering)白皮书完整翻译和 PDF 下载

2025-04-11

我整理了10+提示词，这才是Qwen3的正确打开姿势

2025-05-07

小白也能写出专业文生图Prompt，超棒的提示词框架+AI生图工具分享。

2025-04-14

大家都在问

什么是提示词设计？

2025-06-23

为什么大家很少提及Prompt（提示词）了?

2025-06-14

为什么不会提示词（Prompt）用不好AI？

2025-06-04

Claude 4 核心提示词曝光｜最懂提示词的大模型公司，现在怎么写 Prompt？

2025-06-02

字节跳动深度研究框架DeerFlow提示词解析 - 如何通过提示词工程驱动Multi Agents？

2025-05-17

AI创业者｜你辛苦写的提示词，是否属于商业秘密？

2025-05-16

谷歌 Prompt Engineering 白皮书中文版来了：DeepL 和沉浸式翻译谁更强？

2025-05-09

什么是 Playoff 提示词？它为什么能助你从AI中逼出最优决策与方案？

2025-04-29

热门标签

内容创作大模型技术个人提效 langchain llamaindex 多模态技术 RAG技术智能客服知识图谱模型微调 RAGFlow coze Dify Fastgpt Bisheng Qanything AI+汽车 AI+金融 AI+工业 AI+培训 AI+SaaS 提示词框架提示词技巧 AI+电商 AI面试数字员工 ChatBI 知识管理开源大模型智能营销智能硬件智能化改造 AI+医疗 MaxKB

应聘简历请发送至： ceo@53ai.com

友情链接：

CopyRight © 2012-2024 深圳市博思协创网络科技有限公司版权所有

粤ICP备17114055号

广州：广州市华景路37号(华景软件园)暨南大学科技大厦6楼（整层）

深圳：深圳市福田区泰然四路29号天安创新科技广场一期A座1204

上海：上海市浦东新区金新路58号1602室

微信扫码
和创始人交个朋友

联系我们

售前咨询

预约演示

微信扫码

添加专属顾问

回到顶部