用途:该技能是一套面向营销落地页的设计系统参考,用于构建温暖、专业、以转化为目标的落地页、产品页、功能页与定价页。它定位为“落地页语域”,与登录后的产品界面设计区分开:落地页表面(首页、/features、/pricing、/about、博客)用本技能,登录后的仪表盘、设置、表格等产品界面应使用 frontend-design-saas。
主要能力:提供品牌基础与视觉识别规范,包括暖奶油色背景(非纯白)、暖棕色文字(非纯黑)、单一强调色用于 CTA、胶囊圆角按钮、卡片角括号装饰等。给出完整设计令牌:浅色与暗色两套配色(如强调色 #FF4801、悬停 #FF7038、背景 #FFFBF5、文字 #521000、边框 #EBD5C1)、分类标签色、语义色;字体族与字号阶梯、字重、字距与文本渲染;4px 基准的间距系统;圆角、阴影栈与工具阴影;动画缓动、时长、关键帧与 Framer Motion 预设;容器宽度、断点与网格、Bento 布局;暗色模式检测脚本与令牌映射;无障碍焦点、禁用、错误状态与屏幕阅读器工具类;角括号、点阵、虚线、渐变遮罩等装饰元素;以及按钮、卡片、输入框的组件速查表。
使用方式:将强调色替换为自身品牌色,其余系统可直接复用;暗色模式检测脚本需放在 head 中样式加载前。资料未提供安装命令或具体调用步骤。
适用场景:开发者相关或 B2B 产品的营销落地页、功能页、定价页、关于页与博客等。
限制:资料未说明收费、价格、平台支持范围与效果保证;分类标签色为占位示例,需替换为产品自身调色板;强调色不应被分类色替代用于主 CTA。