Skip to content

AI 辅助开发

作者:青见春山

与ai相关的一些面试准备内容,主要是如何在前端开发中使用AI工具辅助开发


核心原则:AI 是工具,人是把关者

  1. Review 代码

    • 逐行审查 AI 生成的代码逻辑

    • 检查是否有安全漏洞(如 SQL 注入、XSS)

    • 验证边界条件是否处理

  2. 单元测试

    • 为 AI 生成的功能编写单元测试

    • 使用 Jest、Vitest 等测试框架

    • 确保核心逻辑有测试覆盖

  3. 代码规范检查

    • ESLint + Prettier 统一代码风格

    • TypeScript 类型检查(tsc --noEmit

    • 引入 husky + lint-staged 在提交时自动检查


除了 Review,前期可以做什么来保证 AI 代码质量?

前置措施

  1. Prompt 工程优化

    • 明确需求描述,提供上下文

    • 指定技术栈、代码风格

    • 给出示例或参考代码

  2. 引入规范(Coding Standards)

    • ESLint:代码质量规则

    • Prettier:代码格式化

    • TypeScript:类型安全

    • Git Hooks:提交前自动检查

  3. 项目模板 / 脚手架

    • 预设项目结构和配置

    • AI 在模板基础上生成,减少偏差

  4. AI 辅助的类型系统

    • 使用 TypeScript 让 AI 生成的代码有类型约束

    • 减少运行时错误

  5. 分层 review + CI/CD

    • PR review 作为强制环节

    • CI 流水线自动运行 lint + test + type-check


Skill 的使用

Image

Image

Image

Image

在前端工程化和 AI 辅助开发中,"Skill" 可以指:

编程中的 Skill

  • 技能树:前端开发者的技术能力矩阵

  • 技术能力:如掌握某种框架、工具或方法论

AI 工具中的 Skill

在 AI 编程工具中,Skill 是预定义的指令集或能力模块:

  • 可以通过自然语言调用特定功能

  • 类似于插件机制,扩展 AI 的能力

实践建议

  • 把常用操作封装为可复用的 Skill

  • 团队共享 Skill 库,统一开发效率


OpenSpec / Speckey 规范

Image

Image

Image

Image

Image

Image

初始化项目,基本主流的编程工具都会支持

Image

openspec文件夹用于存储开发过程中产生的相关规格文档

Image

一般四个就够用了

举例使用:

Image

Image

Image

帮助思考:

Image

多轮回答后,开始创建文档

Image

Image

功能点会被细化:

Image

当什么则什么,很结构化

Image

Image

追踪任务进行

Image

Image

个性化定制,也可以对每个文件写限制要求

apply进行开发

Image

任务完成开始归档

Image

Image

Image

Image

Image

Image