理想情况: 给 LLM 足够的上下文,能生成代码。
比如:给设计稿截图,有项目的所有代码,然后 LLM 生成的代码:
- 类名是用 tailwind 的。
- CSS 变量用
global.css
里定义的。 - 组件用项目里已经定义过的。
- 代码风格符合项目的 ESLint。
设计稿截图更好的方式是读原图:比如用 Figma 的 MCP Server,当目前读不准。
基础版
程序员拆分一些小组件让 LLM 生成。 Prompt:
创建 React 组件 xxx, 实现图片所示的组件。要求:
1. 类名是用 tailwind 的。
2. CSS 变量用 `global.css` 里定义的。
3. 组件用项目里已经定义过的。
4. 代码风格符合项目的 ESLint。