Lesson 03
Vibe Coding = 用自然语言描述意图，让 AI 生成可运行的代码。
将“写代码”变成“描述需求 + 验证结果 + 修正描述”的对话循环。你给出方向，AI 负责生成，你再判断结果是否符合预期。
更懂业务逻辑和用户感受，可以成为 AI 的“产品经理型开发者”，把真实场景、流程和体验要求转化成更有效的输入。
vibe coding 的核心 = 领域知识 + 决策能力 + 提示工程
AI 不知道你的使用习惯：任务列表和添加按钮谁更重要？是否需要统计卡片？
AI 不知道你的业务优先级：更希望用户直接买，还是先加购。
AI 不知道你的目标用户和使用场景，你也可以先描述目标用户和场景，再让 AI 帮你决策。
阴影、圆角、字体大小、间距等，可以先让 AI 按默认或配置方案成型，再逐步优化。
点击后去哪个页面，AI 不知道你的页面路由结构和业务流转规则。
先校验还是先提交，AI 不知道你的业务逻辑顺序，例如先检查库存再扣减。
弹窗、跳转、滑动、拖拽等范式，AI 不知道你更偏好的交互方式，例如未登录时跳转页还是弹窗。
动画时长、过渡效果这类细节，AI 可按常见默认值实现，如 0.3 秒淡入，不满意再改。
展示什么文案、插画，AI 不知道你的品牌语调和运营策略，比如“暂无数据”还是“去逛逛”。
转圈、骨架屏、进度条都能做，但 AI 不知道你对体验的要求，骨架屏通常更高级也更复杂。
文案和是否显示重试按钮，AI 不知道你的错误处理策略，是静默重试还是明确提示用户。
请求地址、参数、调用时机，AI 不知道你的后端接口地址，也不知道要传什么参数。
显示哪些数据字段，AI 不知道你的业务重点，比如商品是否要展示销量、标签、库存等。
变量、函数名这类基础命名，AI 会按常见习惯输出，如 userName、handleClick。
遍历、排序、筛选、计算等基础算法 AI 能自动写，复杂业务算法仍需人先定规则。
函数实现、拆分、事件绑定等，AI 通常能按最佳实践完成，但前提是需求边界要先说清楚。
“页面从上到下分为：顶部标题栏、中间的任务列表、底部的添加任务输入框和按钮。任务列表比添加按钮更重要，所以放在中间主要区域。”
“左侧是固定的用户信息卡片，右侧是动态的操作面板，统计卡片放在左侧上方。”
“商品详情页：立即购买按钮放在加入购物车按钮的左边，因为希望用户优先购买。”
“搜索结果页面：筛选栏放在顶部，商品网格放在下面，排序按钮放在筛选栏右侧。”
“浅蓝色背景，白色卡片，橙色强调色，因为目标用户是年轻职场人，需要清爽专业的感觉。”
“暗黑模式，霓虹绿，科技感，参考赛博朋克风格。我的用户是游戏玩家。”
“点击‘查看详情’后，跳转到 /product/123 页面，而不是弹窗。”
“登录成功后，跳转到个人中心页面；取消登录则返回首页。”
“点击购买按钮：先检查库存是否大于0 → 如果库存充足，则扣减库存并显示成功；如果库存不足，则弹出‘缺货’提示，不扣减。”
“提交表单时：先校验所有字段是否填写 → 如果有空，在对应输入框下方显示红字，不提交；全部通过后再发送请求。”
“未登录时点击‘收藏’，弹出一个登录模态框，不要跳转页面。”
“图片列表支持左右滑动切换，不要用按钮点击。”
“任务卡片可以拖拽排序，不要用上下箭头。”
“点击按钮时，有一个0.2秒的缩放效果，要快一点。”
“模态框弹出时，背景淡入0.3秒，内容从上方滑入。”
【需求描述】我想做一个[页面类型]，主要用于[场景]。 【风格关键词】请给出3种不同的视觉风格方案，分别用一句话描述（配色、圆角、阴影、字体感觉），并推荐一种。 等我确认后，你再生成完整代码。
【角色设定】（可选）你是一个前端专家。 【技术栈】请使用 React + Tailwind CSS（或你偏好的技术）。 【页面结构】（你决策的区域划分） - 顶部：[导航栏/标题] - 主体：[主要功能区，如搜索框、列表、表单等] - 底部：[版权/链接] 【视觉规范】（直接引用或描述） - 主色：#XXXXXX，强调色：#XXXXXX - 字体：系统默认 / 特定字体 - 圆角：小/中/大 / 具体px - 阴影：轻/中/重 / 无 - 参考网站：像 Stripe / Notion / 苹果官网 的风格 【功能需求】 - 交互1：当用户点击[某元素]，执行[某动作] - 交互2：… 【数据与边界】 - 数据模型：列表每个项目包含[字段1、字段2] - 空状态：显示[文案/插画] - 加载状态：显示[转圈/骨架屏] 【输出要求】给出完整可运行的代码，并说明如何使用。
请先读取 shangancang-mobile-visual-spec.md 和 shangancang-mobile-tokens.css。
然后按这两个文件的规范设计并实现「[页面名称]」。
要求：
- 以 375 x 812 作为移动端视觉基准
- 但必须支持平板和桌面响应式适配
- 不要固定 375px 宽度
- 不要用 transform 缩放整页
- 优先复用 tokens.css 里的变量命名
请输出 [设计说明 / 页面结构 / 完整代码]。
请访问 https://[网站地址]，分析该页面的视觉设计规范。 请提取并列出： - 配色方案（主色、强调色、背景色、文字颜色） - 字体（使用的字体、字号层级） - 圆角规范（不同组件的圆角值） - 阴影规范 - 间距规律 - 建议用 Tailwind CSS 类名来表示这些规范 最后给出一个适合复制到项目中的“全局样式规范”摘要。
我上传了一张网页截图。请帮我分析并提取该页面的视觉设计规范，包括： 1. 主色与辅助色（给出色值或 Tailwind 颜色类名） 2. 字体系统（字体族、大小层级、字重） 3. 圆角风格（按钮、卡片、输入框等的圆角大小） 4. 阴影风格（轻/中/重，具体 blur 和 offset） 5. 间距规律（元素之间的 padding/margin 是否遵循某种倍数关系，如 4px、8px、16px） 6. 整体风格关键词（如：科技感、可爱、极简、毛玻璃等） 请用表格或清单形式输出。
请访问 https://[网站地址]，分析该页面的视觉设计规范，并输出为一个完整的 CSS 主题文件。 要求： - 定义 CSS 变量（颜色、字体、圆角、阴影、间距） - 提供默认的全局样式重置（或 normalize） - 给出按钮、卡片、输入框这几个常用组件的样式示例 输出纯 CSS，不要 Tailwind。
我上传了一张网页截图。请分析该页面的视觉设计规范，并以 CSS 自定义属性（:root 变量）的形式输出。 请至少提取以下内容： 1. 颜色系统（主色、强调色、背景色、文字色、边框色） 2. 字体系统（主字体族、标题/正文/小字字号和行高） 3. 圆角（按钮、卡片、输入框的圆角值） 4. 阴影（不同层级的 box-shadow） 5. 间距（基于 4px 或 8px 的尺度，输出若干常用间距变量） 输出格式要求：输出纯 CSS
【截图】已上传。 【定位】在截图中，[描述位置特征，如“右上角红色按钮” / “商品卡片下方的灰色文字” / “导航栏搜索框右侧”]。 【当前问题】目前它看起来/行为是 [现状]。 【期望修改】我希望改成 [新样式/新行为]。 【修改范围】（可选）只改这个元素，不影响其他部分。
【定位】[组件名/页面区域/粘贴代码/描述位置] 【当前行为】[描述现状] 【期望行为】[描述修改后] 【修改范围】（可选）只修改 [具体函数/样式/逻辑]，不要改动其他部分。 【额外信息】（可选）贴出相关代码片段。