华数设计高保真原型

问题：从设计稿到可交互原型之间的鸿沟

团队常见的流程是先出静态设计稿，再交给前端还原。但静态稿无法表达过渡动画、滚动行为和真实数据状态下的排版变化；设计师在 Figma 里做的交互，到了代码阶段要么丢失，要么需要重新沟通一遍。设计评审也常缺少统一依据——评审意见往往停留在“感觉不对”，难以落到具体的代码层面。

这个技能把高保真产出直接建立在 HTML 上，而不是先生成图片再翻译。

核心能力

• HTML 原生原型：直接生成可运行的 HTML/CSS 页面，包含真实的布局、状态与交互逻辑，而不是静态截图
• 演示文稿与动画：可产出 slides 和 motion demos，适合评审或演示场景
• 可视化与设计评审：基于真实品牌或项目上下文，输出可视化结果并执行 review passes
• 依赖编码代理执行：需要 Claude Code、Codex、Cursor 等支持 skills 的代理环境

关键步骤

1. 准备真实品牌或项目上下文（色彩、字体、组件规范等）
2. 代理按技能规范生成 HTML 文件
3. 在本地渲染、截图或导出媒体进行验证

适用边界

这个技能产出的是原型级别的 HTML，不是生产级工程。它不处理后端逻辑、状态管理或性能优化；渲染质量依赖本地的 HTML/CSS 工具链和浏览器环境。涉及截图导出时还需要额外的媒体工具支持。它适合设计探索、演示和评审阶段，不适合直接作为最终交付代码。