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 / emitsprops: 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 适配多语言团队✅ 总结：好提示词 = 半个优秀前端工程师
类别本质能力通用结构控制语义一致性技术特定限定输出范围语义表述明确业务功能与组件边界样式控制视觉风格一致性行为逻辑确保交互完整性
页:
[1]