生成式 AI 技术辅助软件系统设计开发

前言

软件开发流程一般分为 5 个阶段，它们分别是分析阶段、设计阶段、实现阶段、测试阶段和维护阶段。敏捷开发流程中也隐含了这 5 个阶段的内容，分析和设计依然是每个迭代增量的起点。

在分析阶段，开发人员可以利用生成式 AI 的文本总结能力，提取需求中的概念，对概念及关系的建模并生成业务流程，开发人员可以更好地理解业务需求, 为系统设计奠定基础；
在设计阶段，开发人员可以利用生成式 AI 技术对概念模型进行优化和扩展，基于已有的概念模型，AI 可以提出新的实体、属性和关联关系的建议, 帮助开发人员发现可能遗漏的领域概念，此外 AI 可以自动生成视觉化的模型图, 帮助开发人员更直观地理解模型结构，开发人员利用 AI 验证业务用例，可以提前发现概念模型中可能存在的不一致性和矛盾。

本文将探讨如何利用人工智能技术来辅助软件开发的分析和设计环节，提高工作效率。我们将以一个模拟的需求为案例，描述 Claude3 Sonnet 如何辅助需求分析、概念建模以及初始代码生成。

AI 辅助需求分析

软件开发者的输入：

产品经理：
我们的目标是构建一个的在线会议全生命管理系统。会议包含 3 个阶段：会前、会中以及会后。
每个的会议阶段都有我们可以解决的问题。在会议前，我们帮用户预约会议。
用户可以关联自己的日历，包括 Google 的日历，以及 Outlook 的日历。通过在系统上操作，用户可以预约一个会议。

系统分析师：
如何预约会议呢？

产品经理：
在系统界面上，用户打开属于他自己的日历，然后选择日期，选择时间段预约会议。
输入的内容有会议地址，如果是线上会议就输入会议的 URL。保存好会议之后，再把会议邀请发给其他与会者。

系统分析师：
如何发给与会者呢？

产品经理：
用户可以在界面上输入其他与会者的电子邮箱地址，这样系统通过电子邮件发会议邀请给与会者。

系统分析师：
请描述一下会议中，系统可以帮助用户哪些方面。

产品经理：
在会议中，系统帮助用户，做翻译，例如一个日本用户与美国用户在通过 Zoom 开会的时候，
针对美国用户，系统通过语音转文字的形式把日文翻译成英语；
针对日本用户，系统通过语音转文字的形式把英语翻译成日文。此外，会议的录音还保存在工作区中。

系统分析师：
什么是工作区？

产品经理：
每个用户在注册的时候都会分配一个默认的工作区，他可以邀请其他用户到他的工作区，
工作区保存着会议相关的一些资料，也包括着会议录音。工作区还包含着所有的会议信息。
加入 workspace 的概念之后，将 user 与 record/meeting 之间的直接关联打断，
每一个 user 可以以不同的 role 拥有多个 workspace，而所有的 resource（关联到最终的 record 或者 meeting）
都是归属于 workspace，通过不同的访问策略（access）来分配给不同的 member 进行操作。

系统分析师：
你说了 Member 这个概念，什么是 Member？

产品经理：
Member 是相对于工作区来说了，就是说一个工作区可以包含多个 Member，工作区的主人可以邀请其他用户进入他的工作区，工作区的主人可以为 Member 分配权限。
Member 通过权限来访问工作区的资源。
系统分析师：
一个用户可以创建多少个工作区？

产品经理：
这个没有限制，可以有无限多个工作区。

系统分析师：
工作区的拥有者可以邀请多少用户进入他的工作区。

产品经理：
用户需要为某个工作空间购买权益，我们的权益类似于手机套餐的通话时长、流量、附加功能这种，购买权益之后，
可以选择邀请有限数量的其他用户加入到自己的空间，归属于这个 workspace 的所有成员共享该 workspace 的权益。
权益目前分为时长和功能的开关，来源于购买商品或者赠送商品。

系统分析师：
会议结束后，系统可以帮助客户做什么呢？

产品经理：
会议后我们可以帮助做会议纪要，并发送给与会者。

系统分析师：
咱们希望支持的会议系统有哪些？
产品经理：
在线会议产品 A 和 B。你有想法能够帮助我实现这样的功能吗？

系统分析师：
当然，技术上我们可以为每个会议创建一个与会者，叫做会议助手，它其实是一个机器人（Bot）。
通过它，会议的语音就可以被系统实时接收到，通过翻译模块做翻译，翻译成文字，然后也可以把它记录下来。

Claude3 Sonnet 模型回复的内容如下：

根据访谈记录，我总结出以下核心概念及其关系:

1. 用户（User）
   - 用户可以关联自己的日历（如 Google 日历、Outlook 日历）
   - 用户可以预约会议
   - 用户可以创建多个工作区（Workspace）

2. 工作区（Workspace）
   - 每个用户在注册时会分配一个默认工作区
   - 工作区拥有者可以邀请其他用户加入，加入的用户成为成员（Member）
   - 工作区拥有者可以为成员分配权限（Access）
   - 工作区包含会议相关资源（如会议录音、记录等）
   - 工作区需购买权益（订阅/套餐）以支持更多功能和成员

3. 成员（Member）
   - 成员通过权限访问工作区资源
   - 成员角色不同，权限不同

4. 会议（Meeting）
   - 用户可以预约会议
   - 会议包括会前、会中、会后三个阶段
   - 会议支持多种系统（Zoom 及 WebEx 等）
   - 会中提供实时翻译和录音功能
   - 会后可生成会议纪要并发送给与会者

5. 会议助手（Bot）
   - 会议助手是一个机器人，加入每个会议
   - 通过会议助手接收会议语音，提供实时翻译和录音

6. 权限（Access）
   - 工作区拥有者为成员分配不同权限
   - 权限决定成员可访问的工作区资源

7. 权益（Subscription）
   - 工作区需购买权益以支持更多功能和成员数量
   - 权益分为时长和功能开关两种类型

总的来说，用户可以创建工作区，工作区包含成员和会议相关资源。会议通过会议助手获取实时语音进行翻译和录音。工作区需要购买权益以支持更多功能。

从 Claude3 Sonnet 模型答复的内容来看，它正确地分析出了需求中的各种概念及其关系。接着我们可以让 Claude3 Sonnet 模型帮助我们生成一个业务流程图，让我们可以直观地理解业务需求。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

好的，我将使用 UML 活动图来描述在线会议全生命周期管理系统的主要业务流程。

1. 会议预约流程:

```
    ┌───────────────┐
    │     开始      │
    └───────┬───────┘
            │
            ┌───────────────────┐
            │  选择会议日期时间 │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  输入会议地址/URL │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  输入与会者邮箱   │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  系统发送会议邀请 │
            └───────────────────┘
                       │
    ┌───────────────────────────┐
    │           结束            │
    └───────────────────────────┘
```

2. 会议过程流程:

```
    ┌───────────────┐
    │     开始      │
    └───────┬───────┘
            │
            ┌───────────────────┐
            │  会议助手加入会议 │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  实时语音转文字   │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  实时文字翻译     │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  录制会议音视频   │
            └───────────────────┘
                       │
    ┌───────────────────────────┐
    │           结束            │
    └───────────────────────────┘
```

3. 会后流程:

```
    ┌───────────────┐
    │     开始      │
    └───────┬───────┘
            │
            ┌───────────────────┐
            │  生成会议纪要     │
            └───────────────────┘
                       │
            ┌───────────────────┐
            │  发送会议纪要     │
            └───────────────────┘
                       │
    ┌───────────────────────────┐
    │           结束            │
    └───────────────────────────┘
```

通过这些活动图，我们可以清晰地看到系统在不同阶段需要执行的操作流程，有助于进一步细化需求和设计系统。

AI 辅助领域模型设计

领域驱动设计（Domain-Driven Design，DDD）是一种软件设计方法，它将重点放在了对领域模型（Domain Model）的深入理解和持续探索上。领域驱动设计的核心思想是识别系统的核心业务领域，并集中精力对其建模。为了快速及准确地对业务领域建模，我们通过提示词的方式与 Claude3 Sonnet 交互，让它生成符合我们预想的领域模型。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

@startuml
class User {
}
class Workspace {
}
class Member {
}
class Meeting {
}
class Bot {
}
class Access {
}
class Subscription {
}
User "1" -- "0..*" Calendar : associates >
User "1" -- "0..*" Meeting : schedules >
User "1" *-- "0..*" Workspace : creates >
Workspace "1" *-- "0..*" Member : has >
Workspace "1" -- "1" Subscription : purchases >
Workspace "1" -- "0..*" Resource : contains >
Member "1" -- "0..*" Access : has >
Member "1" -- "0..*" Resource : accesses >
Meeting "1" -- "1" Bot : has >
Meeting "1" -- "1" Translation : provides >
Meeting "1" -- "1" Recording : has >
Meeting "1" -- "1" Summary : generates >
Resource <|-- Recording
Resource <|-- Summary
enum Access {
}
class Translation {
}
class Calendar {
}
@enduml

为了直观显示模型的相互关系，我们将以上内容可视化展现（我们把 PlantUML 格式的内容通过支持 PlantUML 的工具展示，例如通过在 VS Code 中添加 PlantUML 显示 PlantUML 的内容）。

模型一

从上面生成的 UML 图中，我们可以直观地各个领域对象直接的关系，从中我们也发现了一项设计上的错误：Meeting 与 Workspace之间不存在关联关系。从原始需求中，我们可以看到这样的内容：“加入 workspace 的概念之后，将 user 与 record/meeting 之间的直接关联打断”，所以我们通过提示词的方式将模型做修改。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

好的，根据您的要求，我更新了 PlantUML 类图，体现了 Workspace 包含不同状态的 Meeting，以及 Summary 与已完成会议的关系。

```plantuml
@startuml

class User {
}

class Workspace {
    "1" *-- "0..*" ScheduledMeeting
    "1" *-- "0..*" OngoingMeeting
    "1" *-- "0..*" CompletedMeeting
}

class Member {
}

class Meeting {
    "1" -- "0..1" Summary
}

class ScheduledMeeting {
}

class OngoingMeeting {
}

class CompletedMeeting {
    "1" -- "1" Summary
}

class Bot {
}

class Access {
}

class Subscription {
}

User "1" -- "0..*" Calendar : associates >
User "1" -- "0..*" ScheduledMeeting : schedules >
User "1" *-- "0..*" Workspace : creates >

Workspace "1" *-- "0..*" Member : has >
Workspace "1" -- "1" Subscription : purchases >
Workspace "1" -- "0..*" Resource : contains >

Member "1" -- "0..*" Access : has >
Member "1" -- "0..*" Resource : accesses >

ScheduledMeeting --|> Meeting
OngoingMeeting --|> Meeting
CompletedMeeting --|> Meeting

Meeting "1" -- "1" Bot : has >
Meeting "1" -- "1" Translation : provides >
Meeting "1" -- "1" Recording : has >

Resource <|-- Recording
Resource <|-- Summary

enum Access {
}

class Translation {
}

class Calendar {
}

class Summary {
}

@enduml
```

在这个更新后的类图中:

- Workspace 包含三种状态的 Meeting：
  - ScheduledMeeting: 已预约的会议
  - OngoingMeeting: 进行中的会议
  - CompletedMeeting: 已完成的会议
- CompletedMeeting 与 Summary 有一对一的关联关系，表示已完成的会议必须生成会议纪要
- ScheduledMeeting 和 OngoingMeeting 与 Summary 有零或一的关联关系，表示这两种状态的会议可能没有会议纪要

其他概念和关系保持不变。

该图仍然没有包含任何对象的属性和行为（方法），仅表达了概念及其关系，符合您的要求。

我们再将 PlantUML 复制到 UML 工具中，得到的可视化模型如下：

模型二

从图“模型二”中，我们可以看到 AI 为我们添加了新的概念：会议类型，这是之前我们在设计的时候所忽略的。这也从侧面反映了它可以帮助开发人员发现可能遗漏的领域概念。另外，我们还发现了另外一个问题，图“模型二” Bot（会议助手）与 Meeting 有直接关系，但是在实际业务中，仅当会议正在进行中 Bot 才和 Meeting 有关系。我们继续通过提示词的方式将模型做修改。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

好的，我已经更新了 PlantUML 类图，将 Bot 与 OngoingMeeting 之间的关联关系修改为组合关系，表示仅当会议正在进行时会议助手才存在。

```plantuml
@startuml
class User {}
class Workspace {}
class Member {}
class Meeting {}
class ScheduledMeeting {}
class OngoingMeeting {}
class CompletedMeeting {}
class Bot {}
class Access {}
class Subscription {}
class Translation {}
class Calendar {}
class Summary {}
class Recording {}
class Resource {}
User "1" -- "0..*" Calendar : associates >
User "1" -- "0..*" ScheduledMeeting : schedules >
User "1" *-- "0..*" Workspace : creates >
Workspace "1" -- "1..*" Meeting : contains >
Workspace "1" -- "0..*" ScheduledMeeting
Workspace "1" -- "0..*" OngoingMeeting
Workspace "1" -- "0..*" CompletedMeeting
Workspace "1" *-- "0..*" Member : has >
Workspace "1" -- "1" Subscription : purchases >
Workspace "1" -- "0..*" Resource : contains >
Member "1" -- "0..*" Access : has >
Member "1" -- "0..*" Resource : accesses >
ScheduledMeeting --|> Meeting
OngoingMeeting --|> Meeting
CompletedMeeting --|> Meeting
Meeting "1" -- "1" Translation : provides >
Meeting "1" -- "1" Recording : has >
OngoingMeeting "1" *-- "1" Bot : has
CompletedMeeting "1" -- "1" Summary : generates
Resource <|-- Recording
Resource <|-- Summary
enum Access {}
@enduml
```

在这个更新后的类图中，我进行了以下修改：

- 将 Meeting 与 Bot 之间的关联关系移除
- 在 OngoingMeeting 与 Bot 之间添加了组合关系 "1" *-- "1" Bot

这表示仅当会议正在进行时，会议助手 Bot 才会存在，并且每个进行中的会议都有一个会议助手。

其他关系保持不变:

- Workspace 与不同状态的 Meeting 之间的关联关系
- Meeting 与 Summary、Translation 和 Recording 之间的关联关系
- 其他类之间的关联关系

该图仍然没有包含任何对象的属性和行为（方法），仅表达了概念及其关系，符合您的要求。

我们再将 PlantUML 复制到 UML 工具中，得到的可视化模型如下：

模型三

经过几轮的提示词工程，我们发现模型的表达变得更加丰富，接着我们将通过 AI 测试模型，验证它是否能够完成一个业务逻辑。我们分别测试会议预约流程，会议流程以及会后流程。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

@startuml
autonumber

actor User
participant "Calendar" as Calendar
participant "ScheduledMeeting" as ScheduledMeeting
participant "Workspace" as Workspace
participant "Meeting" as Meeting
participant "Translation" as Translation
participant "Recording" as Recording

User -> Calendar: 查看可用时间
Calendar --> User: 返回可用时间

User -> ScheduledMeeting: 创建会议
ScheduledMeeting -> Workspace: 创建会议实例
Workspace -> Meeting**: 创建会议实例
Meeting --> Workspace: 会议实例创建成功
Workspace --> ScheduledMeeting: 返回会议实例
ScheduledMeeting --> User: 返回会议详情

User -> ScheduledMeeting: 开始会议
ScheduledMeeting -> Meeting: 标记会议开始
Meeting -> Translation: 创建翻译实例
Translation --> Meeting: 翻译实例创建成功
Meeting -> Recording: 创建录制实例
Recording --> Meeting: 录制实例创建成功
Meeting --> ScheduledMeeting: 会议开始成功
ScheduledMeeting --> User: 会议开始成功
@enduml

我们再将 PlantUML 复制到 UML 工具中，得到的可视化模型如下：

时序图一

从上面的“时序图一”中，我们可以发现两处处遗漏的地方：第一，用户开始一个会议（在第 9 步）需要创建一个会议助手（Bot）；第二，会议结束自动生成会议摘要。我们通过提示词将这两处遗漏补上。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容生成的 UML 图如下：

时序图二

我们可以看出它补充了遗漏点，但是它依旧出现一些问题：会议还没有结束就生成摘要，会议结束后会议状态的变化没有体现。我们继续通过提示词与 AI 交流。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容生成的 UML 图如下：

经过几轮的提示词工程，我们测试模型可以表达真正的业务意图，证明了 AI 生成模型的准确性。

AI 辅助代码生成

不论是在领域驱动设计的分层架构，还是六边形架构或者是整洁架构中，领域模型是核心，它们承载着业务逻辑。

图片来自网络

领域模型是富含属性以及行为的类。我们可以通过 AI 帮助生成属性以及行为。

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

好的，根据您的要求，我已经为每个类添加了相关的属性和行为，并生成了相应的 Java 代码文件。

Calendar.java:

```java
public class Calendar {
    // 暂无属性和行为
}
```

Workspace.java:

```java
public class Workspace {
    public Meeting createMeetingInstance() {
        Meeting meeting = new Meeting(this);
        meeting.setStatus(MeetingStatus.SCHEDULED);
        return meeting;
    }
}
```

Meeting.java:

```java
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

public class Meeting {
    private UUID id;
    private String topic;
    private Date startTime;
    private Date endTime;
    private List<Participant> participants;
    private Translation translation;
    private Recording recording;
    private Bot bot;
    private Summary summary;
    private MeetingStatus status;
    private Workspace workspace;

    public Meeting(Workspace workspace) {
        this.workspace = workspace;
        this.id = UUID.randomUUID();
        this.participants = new ArrayList<>();
        this.translation = new Translation();
        this.recording = new Recording(this.id);
        this.bot = new Bot();
        this.summary = new Summary(this.id);
    }

    public void setTopic(String topic) {
        this.topic = topic;
    }

    public void setStartTime(Date startTime) {
        this.startTime = startTime;
    }

    public void setEndTime(Date endTime) {
        this.endTime = endTime;
    }

    public void addParticipant(Participant participant) {
        participants.add(participant);
    }

    public void removeParticipant(Participant participant) {
        participants.remove(participant);
    }

    public void markMeetingStart() {
        status = MeetingStatus.ONGOING;
    }

    public void markMeetingEnd() {
        status = MeetingStatus.COMPLETED;
    }

    public void setStatus(MeetingStatus status) {
        this.status = status;
    }
}
```

Translation.java:

```java
public class Translation {
    private String sourceLanguage;
    private String targetLanguage;
    private String translatedText;

    public void setSourceLanguage(String language) {
        this.sourceLanguage = language;
    }

    public void setTargetLanguage(String language) {
        this.targetLanguage = language;
    }

    public void translateText(String text) {
        // 翻译文本的逻辑
        this.translatedText = "Translated text: " + text;
    }
}
```

Recording.java:

```java
import java.util.UUID;

public class Recording {
    private UUID id;
    private String filePath;
    private long duration;
    private int quality;

    public Recording(UUID meetingId) {
        this.id = UUID.randomUUID();
        // 其他属性的初始化
    }

    public void startRecording() {
        // 开始录制的逻辑
    }

    public void stopRecording() {
        // 停止录制的逻辑
    }

    public void playRecording() {
        // 播放录制的逻辑
    }
}
```

Bot.java:

```java
public class Bot {
    private String name;
    private String avatar;
    private String personality;

    public void setName(String name) {
        this.name = name;
    }

    public void setAvatar(String avatar) {
        this.avatar = avatar;
    }

    public void setPersonality(String personality) {
        this.personality = personality;
    }

    public void answerQuestion(String question) {
        // 回答问题的逻辑
        System.out.println("Bot answer: ...");
    }

    public void provideSuggestion() {
        // 提供建议的逻辑
        System.out.println("Bot suggestion: ...");
    }

    public void controlMeetingFlow() {
        // 控制会议流程的逻辑
        System.out.println("Bot controlling meeting flow...");
    }
}
```

Summary.java:

```java
import java.util.Date;
import java.util.List;
import java.util.UUID;

public class Summary {
    private UUID id;
    private String topic;
    private Date startTime;
    private Date endTime;
    private List<Participant> participants;
    private String summaryText;

    public Summary(UUID meetingId) {
        this.id = UUID.randomUUID();
        // 其他属性的初始化
    }

    public void setTopic(String topic) {
        this.topic = topic;
    }

    public void setStartTime(Date startTime) {
        this.startTime = startTime;
    }

    public void setEndTime(Date endTime) {
        this.endTime = endTime;
    }

    public void setParticipants(List<Participant> participants) {
        this.participants = participants;
    }

    public void generateSummary() {
        // 生成会议摘要的逻辑
        this.summaryText = "Meeting summary: ...";
    }

    public void sendSummary() {
        // 发送会议摘要的逻辑
        System.out.println("Sending summary: " + summaryText);
    }
}
```

Participant.java:

```java
public class Participant {
    private String name;
    private String email;

    public void setName(String name) {
        this.name = name;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}
```

MeetingStatus.java:

```java
public enum MeetingStatus {
    SCHEDULED,
    ONGOING,
    COMPLETED
}
```

在这个版本的代码中，我为每个类添加了相关的属性和行为。具体来说：

1. `Meeting`类包含了会议主题、开始时间、结束时间、与会人员列表等属性，以及添加/移除与会人员、开始/结束会议等行为。
2. `Translation`类包含了源语言、目标语言、翻译文本等属性，以及设置语言、翻译文本等行为。
3. `Recording`类包含了录制文件路径、录制时长、录制质量等属性，以及开始/停止录制、播放录制等行为。
4. `Bot`类包含了会议助手名称、头像、个性化设置等属性，以及回答问题、提供建议、控制会议流程等行为。
5. `Summary`类包含了会议主题、开始时间、结束时间、与会人员列表、会议摘要文本等属性，以及生成摘要、发送摘要等行为。
6. 新增了`Participant`类，用于表示与会人员的信息，包括姓名和电子邮件地址。

请查看这些代码文件，如果需要进一步修改或补充，请告诉我。

从上面生成的代码来看，AI 基本上能够生成模型所需要的属性以及行为。基于这些生成的代码，开发人员进一步地根据业务需求添加业务行为，完成业务逻辑。

此外，前端开发人员可以利用 Claude3 的多模态能力，基于原型图片生成前端代码加速前端开发。

软件开发者的输入：

页面原型

Claude3 Sonnet 模型回复的内容如下：

<template>
  <div class="modal" v-if="showModal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Create new workspace</h2>
        <span class="close-btn" @click="closeModal">&times;</span>
      </div>
      <div class="modal-body">
        <div class="workspace-icon">
          <span>M</span>
        </div>
        <div class="form-group">
          <label for="workspace-name">Workspace name</label>
          <input
            id="workspace-name"
            v-model="workspaceName"
            type="text"
            placeholder="MyWorkspace"
          />
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-continue" @click="createWorkspace">Continue</button>
        <button class="btn-cancel" @click="closeModal">Cancel</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CreateWorkspaceModal',
  data() {
    return {
      workspaceName: '',
      showModal: true, // 控制模态框的显示与隐藏
    };
  },
  methods: {
    createWorkspace() {
      // 处理创建工作区的逻辑
      console.log('创建工作区:', this.workspaceName);
      this.closeModal(); // 创建工作区后关闭模态框
    },
    closeModal() {
      // 关闭模态框
      this.showModal = false;
    },
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px; /* 设置模态框宽度为 500px */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.modal-body {
  text-align: center;
  margin-bottom: 20px;
}

.workspace-icon {
  width: 80px;
  height: 80px;
  background-color: #ff6b6b;
  color: #fff;
  font-size: 36px;
  line-height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  text-align: left;
  margin-bottom: 5px;
}

input {
  width: 100%; /* 设置输入框宽度为 100% */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-continue,
.btn-cancel {
  width: 50%; /* 设置按钮宽度为 50% */
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-continue {
  background-color: #4285f4;
  color: #fff;
  border: none;
}

.btn-cancel {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}
</style>

运行该段 VUE 代码展现出来的页面效果如下：

运行 VUE 代码展现的页面

我们可以看出 Claude3 Sonnet 准确地识别原型图片中的所有文字，前端开发基于生成的 VUE 代码针对样式做修改就能够快速完成页面的开发。

总结

目前 AI 在代码辅助方面得到了比较广泛的应用，例如 Amazon CodeWhisperer 可以根据注释生成所需代码。从本案例中，我们可以看到 AI 在软件分析和设计环节也可以提高工作效率，发现潜在问题，减轻开发人员的工作量。在初始代码生成方面，Claude Sonnet 也有不俗的表现，它能够理解领域模型，帮助细化模型生成后端代码；Claude Sonnet 的多模态能力准确识别原型图片上的文字以及前端组件，生成前端代码。综上，生成式 AI 在软件的分析、设计以及代码生成阶段都可以起着重要的辅助作用。

亚马逊AWS官方博客

生成式 AI 技术辅助软件系统设计开发

前言

AI 辅助需求分析

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

AI 辅助领域模型设计

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容生成的 UML 图如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容生成的 UML 图如下：

AI 辅助代码生成

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

软件开发者的输入：

Claude3 Sonnet 模型回复的内容如下：

总结

本篇作者