CrazyAirhead

疯狂的傻瓜，傻瓜也疯狂——傻方能执著，疯狂才专注!

0%

使用 AI 代码工具的一次升级

发表于 分类于 ， ， ，
本文字数： 4.7k 阅读时长 ≈ 4 分钟

最近找同事学习了些 AI 代码生成工具的使用，算是我的一次升级。先看下我生成代码的效果，从点击 「AI生成」开始的界面都是由 AI 生成的。如果觉得效果还可以的话，可以继续往下看。

作为一个普通开发人员，在使用先进的 AI 模型的时候，还是需要跨过几个门槛，比如网络，比如支付，比如封号等问题。我自己就是好不容易搞定支付之后，刚想用用 OpenAI 就被封号了。于是有一段时间虽然看到一些比较好的代码生成效果，自己也没有特别实践，导致自己使用 AI 变成工具非常原始。这次和同事聊天，他说到，自己写一个功能，自己就没写过代码。于是非常好奇他的工作流是怎么样的，然后过去学习了下，自己也验证了一番之后，果然有效。

我之前的使用方式是这样的，使用VS Code，然后 ROO CODE 插件，配置的是 DeepSeek。在使用时，直接在 Prompt 里面说要什么功能，然后等大模型生成，然后除了接受就是接受，最终完成的东西很大程度都没办法完成，需要自己继续修改。于是最终主体代码都是自己写，然后就是让ROO CODE 帮忙完成一些小功能，或者修复直接的报错的问题。

同事说，之前他也这么用，但是发现效果不好，后面就是让 AI 先整理自己的需求，然后提供方案，而不是直接提供代码。可以对方案提供质疑，然后进一步完善方案，方案完成后才让 AI 写代码。

在看了同事的直接操作之后，于是回家开始使用 Claud Code 插件，如果没有注册 Claude Code，可以使用下面的两种方式替代：

  1. 使用 Claude 镜像站，https://www.aigocode.com/，同事用的是这个方式。
  2. 使用 Kimi 替代，我自己用的是这种方式。

大家可以根据实际的情况自己选择，我这里简单描述下使用 Kimi 替代的操作。

  1. 注册好 https://platform.moonshot.cn/ 账号，充值解除限速，并配置好 API Key
  2. 安装好 Node.js
  3. 安装 Claude
1
npm install -g @anthropic-ai/claude
  1. 配置环境变量，导出 ANTHROPIC_BASE_URL 和 ANTHROPIC_AUTH_TOKEN
1
2
3
4
5
# 如果是其他操作系统，自己用对应的方式修改。
vi .zshrc

export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
export ANTHROPIC_AUTH_TOKEN=sk-xxxxxxxxx
  1. 安装 VS Code 的 Claude Code for VS Code 插件
  2. 打开项目，通过/init 进行初始化。
  3. 接着可以通过对话的方式进行代码编写了。

以下是演示的生成界面的主体过程（中间有关闭窗口，没有完整的记录），这个界面首先来自，https://mp.weixin.qq.com/s/tafopd82apfEtCk2DXU0sg，我期望的是通过 AI 生成配置之后生成 CMS 站点的模版。这里主要就是生成配置页面的功能。

我的需求文档整理如下：

1
2
3
4
5
6
7
8
9
10
我现在想做为内容管理模块增加 AI 生成站点模板的功能。
通过模板管理的，[AI 模板] 进入对应的功能页面。

整个页面的核心就是两个部分一个是调整样式，一个是修改提示词，生成站点模板。

首先可以在页面左侧对网页样式进行调整，比如主题色、辅助色、字体、大小、字间距、按钮样式等。为了简化网页样式的调整，需要有兜底方案，首先你可以选择预设的各种风格模板，另外的话可以点击「随机生成」按钮，点完所有的元素都会变化，用户可以多点几次挑选自己喜欢的配置。

可以在右侧预览，预览需要做了三个页面首页、产品、博客，方便在不同的页面内容上预览，通过 Tab 进行切换。另外预览的部分还支持手机、电脑、平板不同页面宽度的预览，需要支持夜间模式。

最后用户可以设置补充默认的提示词内容，点击生成，把设置好的 JSON 和提示词调用 AI 接口生成对应的模板页面。

可以让 Claude 之间生成到 doc 目录下，初步返回的内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
1. 功能模块划分

  核心模块：
  - 样式配置器（左侧）
  - 实时预览器（右侧）
  - AI生成引擎

2. 样式配置器设计

  预设风格模板：
  - 现代简约（Linear风格）
  - 商务专业
  - 创意艺术
  - 科技感
  - 温暖亲和

  样式配置维度：
  interface StyleConfig {
    theme: {
      primaryColor: string;
      secondaryColor: string;
      accentColor: string;
      backgroundColor: string;
      surfaceColor: string;
    };
    typography: {
      fontFamily: string;
      baseFontSize: number;
      headingScale: number;
      lineHeight: number;
      letterSpacing: number;
    };
    layout: {
      borderRadius: number;
      spacing: number;
      maxWidth: number;
      gridGap: number;
    };
    components: {
      buttonStyle: 'filled' | 'outlined' | 'ghost';
      cardElevation: number;
      inputStyle: 'underline' | 'outline' | 'filled';
    };
  }

3. 预览器设计

  多页面预览：
  - 首页（Landing Page）
  - 产品页（Product Showcase）
  - 博客页（Blog Layout）

  响应式预览：
  - 手机（375px）
  - 平板（768px）
  - 桌面（1440px）

  主题切换：
  - 浅色模式
  - 深色模式
  - 自动跟随系统

4. AI生成引擎优化

  提示词结构：
  interface AIPrompt {
    basePrompt: string; // 来自bootstrap-prompt.txt
    styleConfig: StyleConfig;
    contentType: 'landing' | 'product' | 'blog';
    additionalRequirements: string[];
    authorInfo: {
      name: string;
      socialLinks: string[];
    };
  }

  生成流程：
  1. 用户配置样式参数
  2. 系统生成标准化JSON配置
  3. 结合提示词调用AI接口
  4. 生成完整HTML模板

5. 用户界面设计

  左侧配置面板：
  ┌─────────────────────────────────────┐
  │ 预设模板选择器                      │
  ├─────────────────────────────────────┤
  │ 主题色彩配置                        │
  │ ├── 主色调  ■ #3B82F6               │
  │ ├── 辅助色  ■ #10B981               │
  │ └── 背景色  ■ #FFFFFF               │
  ├─────────────────────────────────────┤
  │ 字体排版设置                        │
  │ ├── 字体族  [Inter] ▼              │
  │ ├── 基础字号  16px [-][+]          │
  │ └── 行高     1.5 [-][+]            │
  ├─────────────────────────────────────┤
  │ 组件样式                            │
  │ ├── 按钮样式 [填充] ▼               │
  │ └── 圆角半径  8px [-][+]           │
  ├─────────────────────────────────────┤
  │ [🎲 随机生成] [💾 保存配置]         │
  └─────────────────────────────────────┘

  右侧预览面板：
  ┌─────────────────────────────────────┐
  │ [首页] [产品] [博客] | 📱 💻 🖥️ 🌓 │
  ├─────────────────────────────────────┤
  │                                     │
  │         实时预览区域                 │
  │                                     │
  │    ╔═══════════════════════╗       │
  │    ║                       ║       │
  │    ║   模板预览内容         ║       │
  │    ║                       ║       │
  │    ╚═══════════════════════╝       │
  │                                     │
  └─────────────────────────────────────┘

6. 技术实现方案

  前端架构：
  - Vue 3 Composition API
  - Naive UI组件库
  - UnoCSS样式框架
  - Pinia状态管理

  配置持久化：
  - LocalStorage保存用户配置
  - 支持导出/导入JSON配置
  - 版本管理支持

  AI集成：
  - 封装通用AI调用接口
  - 支持多种AI服务提供商
  - 缓存机制优化性能

7. 交互优化

  用户体验增强：
  - 配置变更实时预览
  - 撤销/重做功能
  - 键盘快捷键支持
  - 拖拽调整参数
  - 批量应用样式

  性能优化：
  - 虚拟滚动长列表
  - 防抖处理频繁操作
  - 懒加载预览内容
  - 压缩传输数据

8. 扩展功能

  高级功能：
  - 自定义CSS注入
  - JavaScript交互增强
  - SEO优化配置
  - 性能指标监控
  - A/B测试支持

这个设计方案充分考虑了用户友好性、技术可行性和扩展性，能够满足内容管理系统中AI生成站点模板的核心需求。

当时感觉已经和细化了，特别是有同事提到的 ascii 的 ui，于是让 Claude 继续生成。

63407f72e3b7c378f582db235b50aaff

一开始生成的页面是这样的，配置在左侧，Prompt在下面，不是太好的利用页面，于是让大模型把配置和提示词配置都放到右侧，用Tab 进行切换。

接下来发现一些交互的问题，直接发给Claude 进行修改。

![image-20250918230352310](/Users/airhead/Library/Application Support/typora-user-images/image-20250918230352310.png)

在这个过程中当中，注意即使提交 Git，以保留修改的成果，毕竟 AI 生成的也还是有些随机。另外一个就是因为项目是由 lint check的，如果 Claude 自己不能修改的情况，可以用 ROO CODE。一个模型发现不了的问题，另一个模型能发现。

整个环境验证下拉自己基本没有写代码，都是交给了 Claude Code 插件来处理的。

下面是完成这个功能，修改其中的BUG，产生的消费记录。

![image-20250918230945685](/Users/airhead/Library/Application Support/typora-user-images/image-20250918230945685.png)

通过这次AI 代码生成工具使用方法的调整，让我实现了一些我之前肯定做不出来的效果，而且我也基本上没有写代码，更重要的省钱省时间。

欢迎关注我的其它发布渠道