本节课代码：https://github.com/AI-FE/ai-friendly-clean-business-component-template/tree/第13课

上节课基于 dify 做的 AI 应用。

• 用专业的知识明确知识

• 选择合适的模型

• 用提示词技巧表达需求

这个流程能否 被AI 赋能？

回顾前面在理论篇中：AI赋能金字塔模型

目的是：找出可被 AI 赋能的点、以及赋能性价比最高的点

例如，前端页面研发的AI赋能金字塔模型

针对我们编写提示词的工作流：

本节课：

• 使用 Cursor 生成提示词（上节课的 AI 应用）

• 使用 Cursor 生成一个生成提示词的提示词（魔法生成魔法）

• 思考与作业

使用 Cursor 生成提示词

为什么选择 Cursor？

步骤

• 新建一个提示词的 md 文件，用来存放生成的提示词

• 打开 Cursor 的 Composer Agent，输入如下内容：

请帮我生成一个提示词，能够根据用户输入的设计稿或者自然语言需求来生成业务组件代码:

- 技术栈是：`React + TailwindCSS + antd`

- 业务组件遵循的文件结构和代码规范如@StorybookExample 所示

- 业务组件遵循前后端状态分离原则：所有需要请求服务端数据的操作，都通过 props 暴露个外部的页面来进行对接联调。

• 如果不满意，可以基于Cursor的Composer Agent的上下文进行迭代

效果展示

生成图中的组件：

使用 Cursor 生成一个生成提示词的提示词

步骤

1. 新建一个提示词的 md 文件，用来存放生成的提示词

2. 打开 Cursor 的 Composer Agent，输入如下内容：

请帮我生成一个提示词，能够根据用户输入的需求来生成符合下面 LangGPT md 格式的提示词:

https://github.com/langgptai/LangGPT

效果展示

• 生成业务组件代码生成器提示词

请帮我生成一个提示词，能够根据用户输入的设计稿或者自然语言需求来生成业务组件代码:

- 技术栈是：`React + TailwindCSS + antd`

- 业务组件遵循的文件结构和代码规范如下所示：
  ├─ index.ts // 仅仅将组件内容暴露给外部
  ├─ interface.ts // 定义组件内部用到的所有类型，包括 interface、type、enum 等
  ├─ BizComponentExample.stories.tsx // 组件的 storybook 文档，包含组件不同的使用示例
  ├─ BizComponentExample.tsx // 组件的主体样式和主体逻辑，如果组件太大(超过 500 行)可以拆分为其它的文件，样式使用 tailwindcss 编写
  ├─ helpers.ts // 组件所有的工具函数存放在此 (如有)

- 业务组件遵循前后端状态分离原则：所有需要请求服务端数据的操作，都通过 props 暴露个外部的页面来进行对接联调。

• 代码生成器的实际代码效果

思考与作业

作业一：请针对日常工作中的某个需要编写提示词的场景（或者已经编写好的提示词）尝试使用 cursor

作业二：请尝试把这个 AI 应用直接集成到 IDE 中，借助本地化的Storybook环境，实时运行生成出来的代码，达到实时预览效果。

• 基于 Cursor 集成

• 基于 Cline 集成

• 基于 Continue 集成

• 基于 Vscode Github Copilot Extansion 集成