「AI + 前端提示词规范建议」的系统化扩展与优化，目的是让前端开发者与 AI 高效协同，用语言驱动组件、逻辑、样式的结构化生成与复用，实现“Prompt 就是新的 API”。
AI + 前端提示词规范建议（专业版）
我们将其划分为五大类：通用指令规范、结构表述规范、组件语义规范、样式表达规范、行为逻辑规范，并配以具体示例和目的说明。
一、通用指令规范（Prompt Command）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
使用 Vue 3 + TypeScript + Element Plus
|
|
|
|
JSON / JSX / markdown / .vue 文件结构等
|
|
|
二、结构表述规范（Structure Specification）
|
|
|
|
|
|
|
|
|
|
|
|
明确列出组件的 props / slots / emits
|
|
|
|
|
|
接口：POST /api/user，返回 { name, age }
|
|
三、组件语义规范（Component Semantics）
四、样式表达规范（Style Semantics）
|
|
|
|
|
|
|
如“仿 Ant Design / Tailwind 风格”
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
支持深色模式，使用 Tailwind dark: 前缀
|
|
五、行为逻辑规范（Behavior + State）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
表单提交时调用 api/login 并跳转 /home
|
|
✨ Bonus：高级提示词设计建议（Prompt Engineering Best Practices）
|
|
|
|
|
|
|
|
|
|
可引用外部 UI 示例链接 / 设计 token 描述
|
|
|
|
|
|
|
|
|
使用 bilingual Prompt 适配多语言团队
|
✅ 总结：好提示词 = 半个优秀前端工程师
