如何协同使用这些技能制作高质量UI课件？
你可以遵循以下 “设计-规范-实现” 流程：
阶段一：规划与架构 (使用 Frontend-Design 思维)
定义设计系统：先规划课件的色彩、字体、圆角、阴影等基础样式。
组件化拆解：将课件页面拆解为可复用的组件，例如：
Header（标题栏）
ContentCard（内容卡片）
QuoteBlock（引用块）
ImageWithCaption（图文说明）
StepIndicator（步骤指示器）
布局规划：考虑不同屏幕尺寸下的响应式布局。
阶段二：视觉设计 (使用 Figma-Implement-Design + Web-Design-Guidelines)
在Figma中建立设计系统：
创建颜色样式（主色、辅助色、成功/警告/错误色）。
创建文本样式（标题H1/H2/H3、正文、说明文字）。
使用 Auto Layout 制作上述组件，确保间距自适应。
应用设计规范：
对比度：使用WCAG标准检查工具，确保文字可读性。
排版：遵循“倍数原则”（如8pt网格系统）设定间距。
交互反馈：为按钮、链接设计Hover、Pressed状态。
页面设计：用组件像搭积木一样快速拼出每一页课件。
制作原型：为课件添加简单的页面跳转或元素交互动效，模拟演示流程。
阶段三：实现与输出 (使用 Frontend-Skill)
实现验证：用HTML/CSS快速实现一个关键组件（如ContentCard），验证设计是否易于开发。
输出资产：从Figma直接导出切图、图标，或生成CSS代码片段。
多格式输出：
网页版课件：直接使用前端技能开发成独立网页，适配所有设备。
图片/PDF课件：利用Figma插件（如“Export as PDF”）或之前提到的AI工具，将设计稿批量导出。
交互式原型：分享Figma原型链接，获得动态演示效果。
