用途：为酱料和骨汤电商品牌创建风格鲜明、可直接用于生产的前端界面，避免通用 SaaS 观感，呈现受喜爱的手工食品品牌气质。适用于组件、页面、产品卡、首屏区、结账流程及其他 UI 元素，用户需提供前端需求，可选提供具体产品、促销或页面用途背景。
主要能力：确定品牌视觉方向（农贸市集温暖感、现代美食编辑风、友好亲切）。指定色板 CSS 变量：--cream #FBF5E6、--amber #D4843A、--burnt-sienna #C0522A、--golden #F2B84B、--forest #3D5A3E、--chocolate #3B1F0E、--blush #F5D5B8、--bone #EDE0C8，避免冷蓝灰。字体要求 Google Fonts：展示衬线体（Playfair Display、Cormorant Garamond、Lora、Fraunces），正文（DM Sans、Nunito、Instrument Sans），手写体用于标语标签（Caveat、Pacifico、Dancing Script），不得用 Inter、Roboto、Arial 等作主字体。空间上要求大留白、12–20px 圆角、层叠阴影、有机形状、产品图突出。动画使用 Motion 库（motion/react），导入 motion、AnimatePresence、useInView、useScroll、useTransform，覆盖滚动入场错峰、产品卡悬停抬升、CTA 按压、首屏视差、加购成功微动画、数字计数、图片缩放等，缓动曲线偏好 [0.22,1,0.36,1]，时长 0.3–0.7s，页面级 0.8–1.2s，弹簧物理用于愉悦时刻，同时动画不超过 3 项。提供产品卡、首屏、辣度刻度、评价块、导航等组件模式。
使用方式：按需求实现 React + Motion 代码，经 @import 或 link 引入 Google Fonts，在 :root 定义完整色板变量，移动优先响应式，保证对比度、焦点态与图标按钮 aria 标签。
限制：仅面向该酱料与骨汤电商品牌风格；不使用普通 HTML/CSS 实现动画组件；禁止占位灰色；文案需有食欲感。资料未提供收费、价格、平台依赖或效果数据。