教AI学会用Ant DesignPrompt里塞两行示例比说一百句管用跟AI说了半天用Ant Design的Table组件带分页和筛选出来还是错的。把示例代码一贴一次就对了。一、说了一百句AI还是用错了上周让AI生成一个用户列表页面用Ant Design Vue。我的Prompt生成一个用户列表页面使用Ant Design Vue组件。 包含 - 搜索表单姓名、角色两个字段 - 表格展示用户列表姓名、邮箱、角色、状态、操作 - 分页 - 新增/编辑弹窗 要求使用Ant Design Vue的Table、Form、Modal、Pagination组件。AI回复了一段代码看着挺完整但有几个地方明显不对template div !-- 搜索表单 -- a-form layoutinline a-form-item label姓名 a-input v-model:valuesearchForm.name / /a-form-item a-form-item label角色 a-select v-model:valuesearchForm.role a-select-option valueadmin管理员/a-select-option a-select-option valueuser普通用户/a-select-option /a-select /a-form-item /a-form !-- 表格 -- a-table :columnscolumns :data-sourcetableData :paginationpagination changehandleTableChange / !-- 弹窗 -- a-modal v-model:visiblemodalVisible title新增用户 a-form :modelformData a-form-item label姓名 a-input v-model:valueformData.name / /a-form-item /a-form /a-modal /div /template三个问题v-model:value在Ant Design Vue 3里应该用v-model:value没错但a-select的写法不对——应该是v-model:value绑定到选中的值但选项应该用a-select-option而且Ant Design Vue 3里是a-select-option不是a-option。a-table的pagination属性Ant Design Vue里pagination可以传一个对象但完整配置应该包含total、pageSize、current等字段。AI只给了部分配置分页样式对不上。a-modal的v-model:visible写法没错但v-model:visible是Vue 3的标准写法Ant Design Vue也支持。但AI给的时候onOk和onCancel事件的绑定方式有问题。更关键的问题是AI把a-form的model绑定写成了v-model:model实际上Ant Design Vue里a-form是用model属性而不是v-model:model。折腾了三轮把Ant Design Vue的官方文档链接都贴过去了还是改不对。后来换了个方法直接把正确示例代码贴在Prompt里。一次就对了。二、正确的打开方式把Prompt改成这样生成一个用户列表页面使用Ant Design Vue组件。 参考以下用法写代码 表格示例 a-table :columnscolumns :data-sourcedataSource :pagination{ total: total, current: currentPage, pageSize: pageSize, showSizeChanger: true, showTotal: (total) 共${total}条 } changehandleTableChange / 搜索表单示例 a-form layoutinline :modelsearchForm finishhandleSearch a-form-item label姓名 namename a-input v-model:valuesearchForm.name placeholder请输入姓名 / /a-form-item a-form-item label角色 namerole a-select v-model:valuesearchForm.role placeholder请选择角色 a-select-option valueadmin管理员/a-select-option a-select-option valueuser普通用户/a-select-option /a-select /a-form-item a-form-item a-button typeprimary html-typesubmit查询/a-button /a-form-item /a-form 弹窗示例 a-modal v-model:visiblemodalVisible :titlemodalTitle okhandleSubmit cancelhandleCancel a-form :modelformData :rulesrules a-form-item label姓名 namename a-input v-model:valueformData.name / /a-form-item /a-form /a-modal 现在生成完整页面。加了三段示例代码总共不到30行AI生成的代码一次通过所有Ant Design Vue的用法都是对的。差别在哪里文字描述Prompt“使用Ant Design Vue的Table组件带分页”AI的理解a-table加一个:paginationtrue就完了其他全靠猜。示例Prompt直接展示了pagination的完整配置对象AI照着这个模式生成不会错。三、为什么示例比描述管用原因一Ant Design的API太多了以a-table为例光pagination属性就有十几种配置方式total、current、pageSize、showSizeChanger、showTotal、pageSizeOptions、onChange、onShowSizeChange……说带分页太模糊了AI不知道你要哪种分页。但给它一段完整的pagination配置它就知道哦我要showSizeChanger要showTotal分页变化时触发change。原因二Vue 3的v-model在各组件里用法不一样a-input用v-model:valuea-modal用v-model:visiblea-form用:model不用v-model。这些规则靠文字描述很难说清楚但给一段示例代码AI立刻能抓到模式。原因三Ant Design的版本差异Ant Design Vue有2.x和3.x两个大版本写法差距很大。文字Prompt里没说版本AI猜的版本跟项目对不上出来的代码完全不能用。示例代码里直接展示了目标版本的写法AI照着写就不会出错。文字描述的说服力远不如直接展示正确写法。AI训练数据里包含了大量Ant Design的代码片段它只要看到这个属性在这个组件里是这么用的就会自动匹配。四、还遇到过哪些翻车翻车一a-form的model和v-model搞混!-- AI写的 -- a-form v-model:modelformData !-- 正确的 -- a-form :modelformDataAI从其他地方学了个v-model:model的写法套到Ant Design上就不对了。把正确示例贴进去之后再也没有出过这个问题。翻车二a-select-option写成a-option!-- AI写的 -- a-select a-option valueadmin管理员/a-option /a-select !-- 正确的 -- a-select a-select-option valueadmin管理员/a-select-option /a-selectAI把Element Plus的用法el-option和Ant Design混了。示例代码里有a-select-option之后AI不再犯这个错。翻车三change事件参数搞错!-- AI写的 -- a-table changehandleChange const handleChange (page) { // 只拿到了page参数 } !-- 正确的 -- a-table changehandleChange const handleChange (pagination, filters, sorter) { // 三个参数 }AI不知道Ant Design的Table change事件带三个参数只写了一个。示例里把三个参数都列出来之后AI的代码就准确了。五、一个更复杂的例子之前做一个项目需要自定义a-table的单元格渲染用了v-slot写法。AI一直生成错误的结构!-- AI生成的错误写法 -- a-table :columnscolumns template v-slot:name{ value } a-tag{{ value }}/a-tag /template /a-table正确的Ant Design Vue写法是用#bodyCell插槽根据列名判断渲染内容!-- 正确的写法 -- a-table :columnscolumns :data-sourcedataSource template #bodyCell{ column, text, record } template v-ifcolumn.key name a-tag colorblue{{ text }}/a-tag /template template v-else-ifcolumn.key status a-tag :colorrecord.status active ? green : red {{ text }} /a-tag /template /template /a-table用文字Prompt说自定义列渲染AI每次都会猜错。后来直接把#bodyCell的用法写进示例AI一次就对了。六、示例驱动法的核心核心操作先写一段正确用法再让AI生成完整代码。比如你要让AI写一个用Ant Designa-date-picker的组件直接复制一个官方示例!-- 参考这个格式 -- a-date-picker v-model:valuedate formatYYYY-MM-DD value-formatYYYY-MM-DD :disabled-datedisabledDate /然后告诉AI“生成一个搜索表单包含日期范围选择器日期格式YYYY-MM-DD限制不能选未来日期。” AI就会用上面的模式写格式、属性、事件处理全对。示例驱动法的好处不需要解释API的每个属性不需要说明版本差异不需要强调Vue 3的语法细节AI直接照搬正确的模式什么场景最适合示例驱动法场景为什么UI库组件用法API多版本差异大AI容易猜错复杂表格/表单多种交互模式组合文字说不清自定义渲染Vue的插槽语法和UI库的插槽名需要精确匹配第三方库集成AI训练数据可能有旧版本写法内部组件库AI完全没见过必须给参照七、几点实用建议建议一示例要完整但别太长示例代码能覆盖当前需求的关键属性即可。不需要把整个组件的API全列出来那样AI反而会迷惑。3-5行能说明问题的示例比30行的完整示例更有效。建议二示例和需求要匹配如果需求是带搜索的表单示例里至少包含a-input、a-select、a-button typeprimary。示例里有什么AI就会生成什么。建议三示例放在Prompt开头比放结尾效果好经过多次测试发现示例放在开头角色设定之后、需求描述之前时AI的生成质量更高。可能是AI生成代码时示例在上下文中的位置越靠前注意力权重越高。建议四保持示例的一致性同一个Prompt里给多个示例时风格要保持一致。不要有的用v-model:value、有的用v-modelAI会混乱。八、总结让AI用Ant Design写代码这件事核心就一句话你给它看正确的写法它就能用正确的写法。说一百句用Ant Design的Table组件分页要完整配置不如贴一行pagination对象的写法。说一百句弹窗要用Modal确认按钮在footer不如贴一段a-modal的完整结构。AI不是理解不了文字而是UI库的用法细节太多了。文字只能描述意图示例才能锁定具体写法。组件库的API、版本差异、Vue的语法细节这些事AI从文字描述里猜不准但从示例里学得最快。
教AI学会用Ant DesignPrompt里塞两行示例比说一百句管用跟AI说了半天用Ant Design的Table组件带分页和筛选出来还是错的。把示例代码一贴一次就对了。一、说了一百句AI还是用错了上周让AI生成一个用户列表页面用Ant Design Vue。我的Prompt生成一个用户列表页面使用Ant Design Vue组件。 包含 - 搜索表单姓名、角色两个字段 - 表格展示用户列表姓名、邮箱、角色、状态、操作 - 分页 - 新增/编辑弹窗 要求使用Ant Design Vue的Table、Form、Modal、Pagination组件。AI回复了一段代码看着挺完整但有几个地方明显不对template div !-- 搜索表单 -- a-form layoutinline a-form-item label姓名 a-input v-model:valuesearchForm.name / /a-form-item a-form-item label角色 a-select v-model:valuesearchForm.role a-select-option valueadmin管理员/a-select-option a-select-option valueuser普通用户/a-select-option /a-select /a-form-item /a-form !-- 表格 -- a-table :columnscolumns :data-sourcetableData :paginationpagination changehandleTableChange / !-- 弹窗 -- a-modal v-model:visiblemodalVisible title新增用户 a-form :modelformData a-form-item label姓名 a-input v-model:valueformData.name / /a-form-item /a-form /a-modal /div /template三个问题v-model:value在Ant Design Vue 3里应该用v-model:value没错但a-select的写法不对——应该是v-model:value绑定到选中的值但选项应该用a-select-option而且Ant Design Vue 3里是a-select-option不是a-option。a-table的pagination属性Ant Design Vue里pagination可以传一个对象但完整配置应该包含total、pageSize、current等字段。AI只给了部分配置分页样式对不上。a-modal的v-model:visible写法没错但v-model:visible是Vue 3的标准写法Ant Design Vue也支持。但AI给的时候onOk和onCancel事件的绑定方式有问题。更关键的问题是AI把a-form的model绑定写成了v-model:model实际上Ant Design Vue里a-form是用model属性而不是v-model:model。折腾了三轮把Ant Design Vue的官方文档链接都贴过去了还是改不对。后来换了个方法直接把正确示例代码贴在Prompt里。一次就对了。二、正确的打开方式把Prompt改成这样生成一个用户列表页面使用Ant Design Vue组件。 参考以下用法写代码 表格示例 a-table :columnscolumns :data-sourcedataSource :pagination{ total: total, current: currentPage, pageSize: pageSize, showSizeChanger: true, showTotal: (total) 共${total}条 } changehandleTableChange / 搜索表单示例 a-form layoutinline :modelsearchForm finishhandleSearch a-form-item label姓名 namename a-input v-model:valuesearchForm.name placeholder请输入姓名 / /a-form-item a-form-item label角色 namerole a-select v-model:valuesearchForm.role placeholder请选择角色 a-select-option valueadmin管理员/a-select-option a-select-option valueuser普通用户/a-select-option /a-select /a-form-item a-form-item a-button typeprimary html-typesubmit查询/a-button /a-form-item /a-form 弹窗示例 a-modal v-model:visiblemodalVisible :titlemodalTitle okhandleSubmit cancelhandleCancel a-form :modelformData :rulesrules a-form-item label姓名 namename a-input v-model:valueformData.name / /a-form-item /a-form /a-modal 现在生成完整页面。加了三段示例代码总共不到30行AI生成的代码一次通过所有Ant Design Vue的用法都是对的。差别在哪里文字描述Prompt“使用Ant Design Vue的Table组件带分页”AI的理解a-table加一个:paginationtrue就完了其他全靠猜。示例Prompt直接展示了pagination的完整配置对象AI照着这个模式生成不会错。三、为什么示例比描述管用原因一Ant Design的API太多了以a-table为例光pagination属性就有十几种配置方式total、current、pageSize、showSizeChanger、showTotal、pageSizeOptions、onChange、onShowSizeChange……说带分页太模糊了AI不知道你要哪种分页。但给它一段完整的pagination配置它就知道哦我要showSizeChanger要showTotal分页变化时触发change。原因二Vue 3的v-model在各组件里用法不一样a-input用v-model:valuea-modal用v-model:visiblea-form用:model不用v-model。这些规则靠文字描述很难说清楚但给一段示例代码AI立刻能抓到模式。原因三Ant Design的版本差异Ant Design Vue有2.x和3.x两个大版本写法差距很大。文字Prompt里没说版本AI猜的版本跟项目对不上出来的代码完全不能用。示例代码里直接展示了目标版本的写法AI照着写就不会出错。文字描述的说服力远不如直接展示正确写法。AI训练数据里包含了大量Ant Design的代码片段它只要看到这个属性在这个组件里是这么用的就会自动匹配。四、还遇到过哪些翻车翻车一a-form的model和v-model搞混!-- AI写的 -- a-form v-model:modelformData !-- 正确的 -- a-form :modelformDataAI从其他地方学了个v-model:model的写法套到Ant Design上就不对了。把正确示例贴进去之后再也没有出过这个问题。翻车二a-select-option写成a-option!-- AI写的 -- a-select a-option valueadmin管理员/a-option /a-select !-- 正确的 -- a-select a-select-option valueadmin管理员/a-select-option /a-selectAI把Element Plus的用法el-option和Ant Design混了。示例代码里有a-select-option之后AI不再犯这个错。翻车三change事件参数搞错!-- AI写的 -- a-table changehandleChange const handleChange (page) { // 只拿到了page参数 } !-- 正确的 -- a-table changehandleChange const handleChange (pagination, filters, sorter) { // 三个参数 }AI不知道Ant Design的Table change事件带三个参数只写了一个。示例里把三个参数都列出来之后AI的代码就准确了。五、一个更复杂的例子之前做一个项目需要自定义a-table的单元格渲染用了v-slot写法。AI一直生成错误的结构!-- AI生成的错误写法 -- a-table :columnscolumns template v-slot:name{ value } a-tag{{ value }}/a-tag /template /a-table正确的Ant Design Vue写法是用#bodyCell插槽根据列名判断渲染内容!-- 正确的写法 -- a-table :columnscolumns :data-sourcedataSource template #bodyCell{ column, text, record } template v-ifcolumn.key name a-tag colorblue{{ text }}/a-tag /template template v-else-ifcolumn.key status a-tag :colorrecord.status active ? green : red {{ text }} /a-tag /template /template /a-table用文字Prompt说自定义列渲染AI每次都会猜错。后来直接把#bodyCell的用法写进示例AI一次就对了。六、示例驱动法的核心核心操作先写一段正确用法再让AI生成完整代码。比如你要让AI写一个用Ant Designa-date-picker的组件直接复制一个官方示例!-- 参考这个格式 -- a-date-picker v-model:valuedate formatYYYY-MM-DD value-formatYYYY-MM-DD :disabled-datedisabledDate /然后告诉AI“生成一个搜索表单包含日期范围选择器日期格式YYYY-MM-DD限制不能选未来日期。” AI就会用上面的模式写格式、属性、事件处理全对。示例驱动法的好处不需要解释API的每个属性不需要说明版本差异不需要强调Vue 3的语法细节AI直接照搬正确的模式什么场景最适合示例驱动法场景为什么UI库组件用法API多版本差异大AI容易猜错复杂表格/表单多种交互模式组合文字说不清自定义渲染Vue的插槽语法和UI库的插槽名需要精确匹配第三方库集成AI训练数据可能有旧版本写法内部组件库AI完全没见过必须给参照七、几点实用建议建议一示例要完整但别太长示例代码能覆盖当前需求的关键属性即可。不需要把整个组件的API全列出来那样AI反而会迷惑。3-5行能说明问题的示例比30行的完整示例更有效。建议二示例和需求要匹配如果需求是带搜索的表单示例里至少包含a-input、a-select、a-button typeprimary。示例里有什么AI就会生成什么。建议三示例放在Prompt开头比放结尾效果好经过多次测试发现示例放在开头角色设定之后、需求描述之前时AI的生成质量更高。可能是AI生成代码时示例在上下文中的位置越靠前注意力权重越高。建议四保持示例的一致性同一个Prompt里给多个示例时风格要保持一致。不要有的用v-model:value、有的用v-modelAI会混乱。八、总结让AI用Ant Design写代码这件事核心就一句话你给它看正确的写法它就能用正确的写法。说一百句用Ant Design的Table组件分页要完整配置不如贴一行pagination对象的写法。说一百句弹窗要用Modal确认按钮在footer不如贴一段a-modal的完整结构。AI不是理解不了文字而是UI库的用法细节太多了。文字只能描述意图示例才能锁定具体写法。组件库的API、版本差异、Vue的语法细节这些事AI从文字描述里猜不准但从示例里学得最快。
