文心快码可生成可直接运行的前端组件，需明确组件类型、运行环境（如React 18）、响应式需求三要素，再按角色→任务→上下文→格式结构化提示词，最后校验TS类型、补data-testid、替换色值、清除console.log。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用文心快码生成可直接运行的前端组件，省去手动写HTML/CSS/JS的重复劳动，快速产出带交互逻辑的按钮、表单、卡片等模块。
明确组件功能与约束条件
在输入提示词前，先确认三个硬性信息：组件类型（如“带搜索框的下拉选择器”）、运行环境（Vue 3 Composition API / React 18 / 原生HTML）、是否需要响应式。缺一不可——【漏写框架版本会导致生成代码无法挂载或报错】。
例如：“生成一个React 18的折叠面板组件，支持手风琴模式，点击标题展开内容，CSS用Tailwind，不依赖第三方库”。这句里“React 18”“Tailwind”“不依赖第三方库”都是不可省略的约束。
构造结构化提示词
按角色→任务→上下文→格式四要素组织：
立即学习“前端免费学习笔记（深入）”；
角色：你是一名资深前端工程师，精通React生态与无障碍标准；
任务：生成一个可复用的Tag标签组件；
上下文：支持颜色主题（primary / success / warning / danger）、可关闭、点击触发回调、默认尺寸为sm；
格式：返回完整React函数组件代码，包含TypeScript接口定义、useCallback处理关闭事件、aria-label属性，不要注释，不要示例用法。
这四段必须连写，中间不换行，直接粘贴到文心快码输入框。
校验与微调生成结果
第一步：复制生成代码到本地VS Code，打开终端执行npm run type-check，确认TS类型无误；
第二步：检查是否含data-testid属性——若无，手动补上，否则后续E2E测试无法定位元素；
第三步：替换掉生成代码里的占位色值（如#3b82f6）为项目设计系统中已定义的CSS变量，例如var(--color-primary)；
第四步：删掉所有console.log语句——【文心快码常在事件回调里插入调试日志，上线前必须清除】。
