理想情况: 给 LLM 足够的上下文,能生成代码。

比如:给设计稿截图,有项目的所有代码,然后 LLM 生成的代码:

  1. 类名是用 tailwind 的。
  2. CSS 变量用 global.css 里定义的。
  3. 组件用项目里已经定义过的。
  4. 代码风格符合项目的 ESLint。

设计稿截图更好的方式是读原图:比如用 Figma 的 MCP Server,当目前读不准。

基础版

程序员拆分一些小组件让 LLM 生成。 Prompt:

创建 React 组件 xxx, 实现图片所示的组件。要求:
1. 类名是用 tailwind 的。
2. CSS 变量用 `global.css` 里定义的。
3. 组件用项目里已经定义过的。
4. 代码风格符合项目的 ESLint。