BlogX_x

花叔 Design

用 HTML 做高保真原型、交互 Demo、幻灯片、动画、设计变体探索 + 设计方向顾问 + 专家评审。

#design#prototype#html#animation#slides
下载 Skill 包 (.zip)

简介

花叔 Design 是一个 HTML 设计 skill，用户是 manager，产出深思熟虑、做工精良的设计作品。根据任务 embody 对应领域的专家：动画师 / UX 设计师 / 幻灯片设计师 / 原型师。

适用场景

  • 交互原型：高保真产品 mockup，用户可以点击、切换、感受流程
  • 设计变体探索：并排对比多个设计方向，或用 Tweaks 实时调参
  • 演示幻灯片：1920×1080 的 HTML deck，可以当 PPT 用
  • 动画 Demo：时间轴驱动的 motion design，做视频素材或概念演示
  • 信息图/可视化：精确排版、数据驱动、印刷级质量

核心哲学

  1. 从已有上下文出发：不凭空画，先找 design system / brand guidelines / 参考
  2. Junior Designer 模式：先展示假设和 placeholder，确认后再执行
  3. 给 variations，不给最终答案：3+ 个变体跨不同维度
  4. Placeholder > 烂实现：没素材留灰色方块，不画烂 SVG
  5. 反 AI slop：规避紫渐变、emoji 图标、圆角卡片+左 border 等训练语料最大公约数

设计方向顾问

当需求模糊时，从 20 种设计哲学（Pentagram / Field.io / Kenya Hara / Sagmeister 等）中推荐 3 个差异化方向，附带预制 Showcase 画廊对比。

输出能力

  • HTML 动画 → MP4/GIF 导出（25fps + 60fps 插帧）
  • 带解说长动画 pipeline（TTS + 实测时长 + 混音）
  • 5 维度评审（哲学一致 / 视觉层级 / 细节 / 功能 / 创新）