链载Ai

标题: AI 前端提示词规范建议 [打印本页]
作者: 链载Ai    时间: 2 小时前
标题: AI 前端提示词规范建议

「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 样式
支持深色模式，使用 Tailwinddark:前缀
增强用户体验与风格一致性

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

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

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

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

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

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





欢迎光临 链载Ai (https://www.lianzai.com/) Powered by Discuz! X3.5