☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让claude生成符合真实项目规范的前端组件代码，而不是只能跑通的玩具示例。普通提示词常导致输出缺少props定义、无typescript类型、无测试桩、无响应式处理，甚至直接写死数据。
普通版提示词：能跑就行
直接告诉Claude“写一个按钮组件”，它大概率返回一段带onclick的div，内联样式，没导出，没props，没注释。
输入：“写一个React按钮组件”
这一步操作起来很简单，直接把这句话发给Claude就行，但结果几乎无法接入现代工程——【没有export default，无法被其他文件import】。
基础升级：加约束条件
明确技术栈和基本结构，避免自由发挥。
方法一：指定框架+语言+导出方式→写明必需字段→限制实现粒度
输入：“用TypeScript写一个React函数组件Button，使用FC类型，必须接收children和onClick两个props，必须有默认导出，不要写任何CSS-in-JS或样式文件，只返回JSX。”
方法二：用角色指令锚定输出风格
输入：“你是一名资深前端工程师，正在为公司设计可复用UI库。请输出一个符合v5规范的Button组件，要求：支持disabled状态、用button原生标签、不依赖外部样式库。”
注意：此时仍可能缺失类型定义细节，比如onClick类型可能被简写为any。
进阶版提示词：驱动完整交付物
真正可用的组件需要配套资产。进阶提示词要让Claude同步产出类型定义、测试桩、使用示例、甚至Storybook配置片段。
第一步：声明交付目标
“请生成一个生产就绪（production-ready）的React Button组件，包含以下全部内容：1个TSX文件、1个对应的.d.ts类型声明（如有泛型需显式导出）、1个Vitest单元测试文件（覆盖正常点击、禁用态不可点击）、1个最小可用示例（含App.tsx调用片段）。”
第二步：嵌入工程上下文
“该组件将集成进基于Turborepo的单体仓库，packages/ui包已启用ESLint+Prettier+TypeScript strict模式，不允许any类型、禁止隐式any、必须使用React.forwardRef处理ref转发。”
第三步：锁定边界与防错
输入中必须包含：“禁止使用useState/useEffect等非必要Hook；禁止引入lodash、clsx等运行时依赖；所有className必须通过prop传入，不得硬编码；disabled状态必须同时控制tabIndex和aria-disabled。”
这一步最关键：Claude会按指令结构化输出多个代码块，每个块带明确文件路径注释，比如// Button.tsx、// Button.test.tsx。如果漏掉// Button.types.ts这一行，它就不会生成类型文件——【文件路径注释是触发多文件输出的唯一开关】。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
