前端组件开发需明确技术栈、上下文、约定规范、视觉参照、状态边界；如vue3+ts+pinia+vite，嵌入指定路径，遵循尺寸/禁用态等硬约束，锚定现有文件或设计系统，穷举props、错误态、响应式行为。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
写前端组件时，Claude需要明确知道它正在为哪个真实项目、哪类用户、什么运行环境服务，否则生成的代码大概率无法直接集成——比如你没说清用的是Vue3还是React18，它可能默认用React hooks写法，但你的项目是Vue SFC，连语法都报错。
必须声明的技术栈与工程约束
第一步：在提示词开头就锁定技术栈和构建工具。例如：“你是一名专注 Vue3 + TypeScript + Pinia 的前端工程师，项目使用 Vite 5 构建，已配置 ESLint + Prettier，禁止使用 any 类型”。
第二步：说明组件所处的上下文层级。是独立可发布的 npm 包？还是仅用于当前后台系统的内部组件？如果是后者，要写明：“该组件将嵌入 /src/views/dashboard/SummaryCard.vue 页面，父组件通过 v-model:loading 控制加载态”。
第三步：列出已有约定。比如团队强制要求所有按钮组件必须支持 size="sm/md/lg"、disabled 状态下自动禁用 tooltip、icon 插槽必须用
视觉与交互必须锚定具体参照物
方法一：引用现有文件路径。直接写：“视觉风格严格对齐 /src/components/ui/Button.vue 的圆角（6px）、阴影（0 1px 2px rgba(0,0,0,0.05)）和禁用态灰度（#9CA3AF）”。AI 会去理解这个文件的实现逻辑，而不是自己发明一套。
方法二：绑定知名设计系统。例如：“采用 Tailwind UI 的 Alert 组件交互逻辑：关闭按钮点击后触发 close 事件，同时添加 fade-out 动画；无 icon 时左侧 padding 自动收缩为 3”。这比说“看起来专业一点”有效十倍。
方法三：截图描述转文字约束。如果你有 Figma 链接或设计稿标注，就写成：“右上角关闭图标为 X 形，尺寸 16×16px，hover 时背景色 #F9FAFB，点击后整个弹窗区域需向上滑出并淡出，动画时长 250ms，贝塞尔曲线 cubic-bezier(0.25, 0.46, 0.45, 0.94)”。
状态与边界条件必须穷举
第一步：列出所有受控 props。比如表格组件不能只写“支持分页”，而要写：“props 接收 pagination: { current: number; pageSize: number; total: number }，其中 current 和 pageSize 为 v-model 绑定，total 为只读；当 total 为 0 时，隐藏分页器并显示‘暂无数据’占位图”。
第二步：定义错误态处理方式。“当远程请求返回 403 时，不展示空表格，而是渲染一个带锁图标和‘权限不足’文字的全宽提示栏，并提供 onClickRetry 回调”。【漏掉这条，组件在生产环境遇到权限错误就会白屏】
第三步：注明响应式断点行为。“在屏幕宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
