技能介绍

解决什么问题

品牌官网、产品发布页或营销专题从零搭建时，团队常面临三件事纠缠：风格指南分散在品牌文档、设计师 Figma 与前端组件库三处，规则互相打架；从“深色旗舰感”到“红色 CTA 的位置”这些细节要重复讨论，消耗排期；交付物在不同人手里长出不同审美，最后验收靠感觉。huawei-design-style 把华为消费业务的视觉语言收敛成一套可复用的设计系统输入，让工程师和设计师能从同一套规则出发讨论页面，而不是从截图里反推意图。

技能如何工作

这个技能的核心不是让你“模仿华为页面”，而是提供可直接映射到 Figma、CSS 变量或设计令牌的结构：

设计令牌：以表格形式给出背景、品牌红 #CF0A2C、极光渐变、金色点缀与文字对比度的角色定义，深色与浅色基底分开，便于你按页面类型切换。
布局模板：包含全屏视频 Hero、对称中轴构图、等宽瀑布卡片与毛玻璃导航，适配产品发布页和家族展示页两种高频场景。
文案基调：用“宏大叙事 + 技术自信 + 人文关怀”的文案原则替代空洞口号，产品名保留英文，描述统一中文，减少中英混排时的行高抖动。
影像指引：区分产品摄影、样张展示与 AI 背景的用途，避免把参数截图和生活方式图混在同一网格里。

使用时建议先确定页面是深色旗舰风还是浅色产品介绍风，再把令牌映射到 CSS 变量或设计工具的主题文件，最后套用布局模板填充内容。

适用边界与注意点

它最适合华为自有产品线风格的页面：深色背景、红色强调、对称构图与产品特写 Hero。如果你的项目面向年轻群体、需要更高信息密度或完全不同的品牌温度，直接套用会显得像“换皮”；此时更适合抽取其中的设计令牌与对称布局逻辑，而非整套组件。另外，技能不包含可运行的 React 组件或 Figma 文件，它定义的是规则和结构，落地仍需接入你现有的设计系统基础设施。