AIGC组件的拆分粒度

Tailwind CSS

参考 CSS 的：

<div style="{ borderRadius: '0.5rem', padding: '1rem' }">Click</div>

<div class="rounded-lg p-4">Click</div>

<div class="button">Click</div>

<button>Click</button>

第二层就是 Tailwind CSS，第四层就是组件了。越往下走，颗粒度越来越大，约束性变高，自由性不足。

可视化组件

原始编码(HTML+JS)

<div class="button"> Click </div>

AI 的作用：生成代码

基于绘图库编码(比如 D3.js、ZRender)

AI 的作用：生成代码

图形语法学(比如 Mermaid、Vega、AntV G2)

AI 的作用：生成 DSL

配置化组件(比如 ECharts)

AI 的作用：生成配置(也是 DSL)

高定组件(比如并购重组)

AI 的作用：推荐(目前的 AI F10 其实也算这个层)

为什么选择第三层

可以参考这个回答：如何评价 CSS 框架 TailwindCSS？

AIGC 时代，我们需要的不再是粗粒度的组件化，因为这限制了可能性，现在需要的是零件化(原子化)，让 LLM 通过组装零件，“无中生有”，生成之前没有的效果和功能。

接下去的重点

学习和使用 Tailwind CSS，了解其设计理念。
基于 Markdown/图形语法学，制定与 LLM 的对接协议。

注意：Mermaid 和 ECharts 是互补的，不是互斥的。 Mermaid：流程图：用于表示算法、工作流程或过程。序列图：展示对象之间的交互，描述事件的顺序。甘特图：用于项目管理，展示项目的时间表和进度。类图：展示类的属性和方法及类之间的关系。状态图：展示系统在不同状态下的行为。实体关系图：用于数据建模，展示实体之间的关系。用户旅程图：描述用户在使用产品过程中的体验。

ECharts：折柱饼等数据分析图表

Mermaid

已经有画板+AI 了： https://www.mermaidchart.com/app/projects/16a6836e-729b-4d01-905c-41e92372ce44/diagrams/fa4dac9b-9f1b-4800-a519-99db9a8bd940/version/v0.1/edit

这个画板和 Draw.io 的区别是什么？

我们可以产出一个 D3+Tween 的动画库，专门用于叙事可视化！基于这个库进行程序设计方面的实践和提升。