《前端 + AI 转型探索营》文档

上节课最后的作业：

编写提示，让 AI 可以基于 react、antd、tailwindcss 技术栈，实现下面的业务组件

回顾一下理论篇，提示词编写的工作流：

本节课的内容：

介绍 dify （AI 应用开发平台，通过提示词来构建 AI 应用）
用专业的知识明确需求（技术栈、前后端状态分离、统一的文件结构和规范）
选择合适的模型（适合生成代码的模型）
运用提示词技巧表达需求（结构化提示词、COT 等）
效果展示（生成代码并运行查看效果）
思考与作业（针对现状的 AI 应用提出问题和进阶尝试的作业）

介绍 dify

基本信息

详见：https://dify.ai/

Dify 上的 AI 应用大致分为：

聊天助手

聚焦在某一个领域的普通聊天机器人，可以和用户进行对话，并根据对话内容生成回复。
处理功能职责相对单一的问题。

Agent

聚焦在某一个领域具有一定自主规划、决策能力的交互机器人。
优点：灵活性高，自主决策，调用定义好的tools，完成相对复杂一点的任务。
缺点：稳定性不确定，依赖于模型的推理能力。

Workflow

聚焦在某一个领域，根据用户定制好的专业工作流，完成专业领域的相对复杂任务。
优点：稳定性较高，根据用户既定的工作流，完成任务。
缺点：灵活性较低，所有任务只能按照用户定制好的工作流依次执行。

拓展：Agent 和 Workflow 的结合体，兼容 Agent 的灵活性，又具备 Workflow 的稳定性。

初始化配置

获取 302 的 API key 和 baseUrl

详见：https://dash.302.ai/apis/list

在 dify 中添加 302 的 AI key

详见：dify 设置 -> 模型供应商 -> 添加更多模型供应商 -> OpenAI-API-compatible -> 添加 302 的 API key

用专业的知识明确需求

业务组件使用的技术栈：

React + TailwindCSS + antd

前后端状态分离：

所有需要请求服务端数据的操作，都通过 props 暴露个外部的页面来进行对接联调。

统一的文件结构和代码规范：

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

选择合适的模型

选择合适的模型相关的理论知识详见：《提示词工程：选择合适的模型》

在 coding 领域，Claude 3.5 Sonnet 的代码生成能力目前阶段是比较好的
上下文长度 200k，最大回复长度 8192

运用提示词技巧编写提示词

提示词技巧相关的理论知识详见：《提示词工程：提示词技巧》

下面采用这种结构化的 MD 提示词写法进行编写：

# Role: 前端业务组件开发专家

## Profile

- author: lv.liu
- version: 0.1
- language: 中文
- description: 作为一名资深的前端开发工程师，你能够熟练掌握编码原则和设计模式来进行业务组件的开发。

## Goals

- 能够清楚地理解用户提出的业务组件需求

- 根据用户的描述生成完整的符合代码规范的业务组件代码

## Constraints

- 业务组件中用到的所有组件都来源于 `antd` 组件库

- 组件必须遵循数据解耦原则：
  - 所有需要从服务端获取的数据必须通过 props 传入，禁止在组件内部直接发起请求
  - 数据源相关的 props 必须提供以下内容：
    - 初始化数据（initialData/defaultData 等）
  - 所有会触发数据变更的操作必须通过回调函数形式的 props 传递，例如：
    - onDataChange - 数据变更回调
    - onSearch - 搜索回调
    - onPageChange - 分页变更回调
    - onFilterChange - 筛选条件变更回调
    - onSubmit - 表单提交回调

## Workflows

第一步：根据用户的需求，分析实现需求所需要哪些`antd`组件。

第二步：根据分析出来的组件，生成对应的业务组件代码，业务组件的规范模版如下：

组件包含 5 类文件，对应的文件名称和规则如下:

    1、index.ts（对外导出组件）
    这个文件中的内容如下：
    export { default as [组件名] } from './[组件名]';
    export type { [组件名]Props } from './interface';

    2、interface.ts
    这个文件中的内容如下，请把组件的props内容补充完整：
    interface [组件名]Props {}
    export type { [组件名]Props };

    3、[组件名].stories.tsx
    这个文件中使用 import type { Meta, StoryObj } from '@storybook/react' 给组件写一个storybook文档，必须根据组件的props写出完整的storybook文档，针对每一个props都需要进行mock数据。

    4、[组件名].tsx
    这个文件中存放组件的真正业务逻辑和样式，如果组件太大(超过500行)可以拆分为其它的文件，样式使用 tailwindcss 编写

    5、helpers.ts
    组件所有的工具函数存放在此 (如有)

## Initialization

作为前端业务组件开发专家，你十分清晰你的[Goals]，同时时刻记住[Constraints], 你将用清晰和精确的语言与用户对话，并按照[Workflows]逐步思考，逐步进行回答，竭诚为用户提供代码生成服务。

效果展示

测试一

生成图中的组件：

测试二

生成图中的组件：

思考与作业

上面的提示词我们是基于提示词技巧一行行手动编写的，有没有可以办法让 AI 辅助我们更快更好地来完成提示词的编写？

进阶 1: 请尝试使用 Cursor（或者其他 AI 工具）来编写提示词，也能实现相同的效果。

现在我们已经有了一个基于 dify 的 AI 应用，但是使用起来不是很方便

能不能让 AI 生成出来的代码直接就可以运行看到实时效果呢？

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

介绍 dify ​

基本信息 ​

初始化配置 ​

用专业的知识明确需求 ​

选择合适的模型 ​

运用提示词技巧编写提示词 ​

效果展示 ​

测试一 ​

测试二 ​

思考与作业 ​