学习AI的第四天——部署Cluade code 通过实操Foodiez项目了解Langing page JS和CSS CLOCK

配置以deepseek为模型的vs code内置的claude code优点1.vscode:插件上下文回溯github2.Deepseek便宜好用不封号3.Claude code目前最好用的AI工具讨论多解决方案多Landing page——落地页Landing page 的Prompt 规则举例一个食品外卖的落地页项目需求为一款名为Foodiez的美食外卖移动端应用搭建一款现代化、自适应的落地营销页面。设计需求打造高转化营销落地页推广这款外卖APP直接传递产品核心价值引导用户下载应用。技术栈使用以下开发技术-React TypeScript-Tailwind CSS 样式框架-Framer Motion 动画库-组件化架构开发-移动端优先自适应布局-符合无障碍标准的语义化HTML成品需达到线上生产可用标准视觉风格与设计规范简约现代、高端精致UI界面明快有食欲的外卖美食视觉风格主色调:暖橙色#FF6B35中性色纯白、浅灰底色柔和阴影、超大圆角两倍超大圆角流畅细腻的微交互动效高清美食实景占位图字体风格醒目、亲和易懂、阅读性强布局留白充足视觉层级清晰分明页面整体结构1.导航栏品牌LOGOFoodiez导航菜单使用教程、入驻餐厅、用户评价、立即下载滚动页面时固定置顶行动按钮立即下载APP2.首页主视觉区左侧内容主标题心仪美食、极速送达副标题阐述产品核心优势应用商店、谷歌应用商店下载按钮实力背书标识 用户评分、配送时效、合作餐厅数量右侧内容展示搭载APP界面的苹果手机样机悬浮动态美食卡片、配送状态元素3.口碑实力区合作连锁餐饮食LOGO展示栏用户真实好评卡片含卡片、昵称、评价文案五星星级评分展示4.使用流程区三步极简流程每个流程搭配图标/插画、流程标题、简短说明流程顺序浏览周边餐厅→一键快速下单→极速配送到家5.核心功能亮点区图文左右交替双栏布局配图功能文案核心功能订单实时轨迹追踪个性化美食智能推荐极速一键结算下单精选本地特色美食门店配页面滚动触发式轻量动画6.APP页面预览区横向滑动手机样机展示每一张界面展示一项核心使用功能7.福利活动横幅文案首单外卖免费配送-视觉重点突出-引导8.终极引流转化区超大加粗宣传标语文案下载Foodiez尽享极速美食配送服务双平台应用下载按钮-渐变底色/主色纯色背景9.页脚区域品牌LOGO全站导航链接社交媒体图标应用下载入口版权声明JS and CSS Clock领域知识不是为了古法编程为了得到Prompt 的领域知识前端的专业三权分立html 负责结构盒子 divdivhtml 树状结构emmet 快捷输入 css 选择器 语法举例.clock.clock-face(.hand*3)div 可以省略.clock →类名选择器子元素选择器CSS 层叠样式表负责样式JS 行为事件模块化 职责分离 一个文件一个功能CSS link 在头部引入更早的和html结合更快的看到静态页面页面看到后再添加js 行为script 如果放在head 会阻塞html和css结合script 放到 body 的结束之前网页每快0.1s用户的满意度付费增加1000w学习总结通过实操用Claude Code 生成Foodiez外卖网站的Langding page 我知道了AI Prompt 的基本需求。还有关于前端的基本概念。