以前做网站的时候，经常有几个困扰：
- 和设计师沟通的时候，往往需要很具象化的表达，对方才能比较好地 get 到点。
- 基本流程是：先出想法和 Excel 框架，告诉不同的板块放什么，然后修改，再确认，再反复。有非常高的时间成本和沟通成本。
但是一些一句话生成的 AI 页面工具，可定制化程度又不是很高，可操作性没有那么强。
后来无意间在 X 上，看到有人推荐 Pneuma Skills，大意说可以通过对话的方式调整页面的 HTML 以及 Doc 或者图片的一些内容，是一个很好的工具。可以根据我们的要求，想改哪里改哪里。
简单介绍一下
Pneuma Skills 是一个面向人类与 AI 代码智能体协作创作内容的基础设施工具，目前主要基于 Claude Code 运行。用户可以在一个实时双向工作区中查看、选择并引导渲染结果。
项目地址：GitHub - pandazki/pneuma-skills
支持的内容模式有：
- Slide（幻灯片）：HTML 演示文稿，支持内容集、拖拽排序、演讲者模式和 PDF/图片导出
- Doc（文档）：专业的 draw.io 图表，包括流程图、架构图、UML、ER 图等，支持流式渲染
- Image（图像）：AI 插图工作室，可在画布上生成和整理视觉素材
如何安装
打开 Claude Code，让 Claude Code 帮你安装，非常丝滑。
安装好之后界面是这样子的，可以选择项目，可以对话修改。
核心原理是：在本地跑一个服务器，浏览器作为你的操作界面，你在里面跟 Claude Code 聊天下指令，Claude Code 直接在你硬盘上读写文件，文件一有变动就立刻推送到浏览器预览，你看到的永远是最新结果——整个过程就是人在浏览器里指挥，AI 在本地干活，文件是两者之间的”共同工作台”。
具体操作：以”宇宙无敌抱枕公司”为例
PS：案例涉及信息纯属瞎编，如有雷同纯属巧合。
第一步：先让它建一个户外品牌的首页
出来的效果不是很好，这个蓝色我不是很喜欢。但好在框架是有了的。
第二步：找一个参考网站，让它模仿
“帮我参考这个网站（参考网站）的风格和色调，对我目前的 YUMI Outdoor 的首页进行对齐。”
新出来这一版感觉还不错。然后让 Pneuma 根据参考网站把图片也放上去，有点样子了。
第三步：工厂板块实在太薄弱了
网上找几个竞争对手的网址，给它参考。
第四步：收工
就这样，我们宇宙无敌抱枕公司的首页就做好了。
总结
好的地方：
- 交互的确方便，基本上可以做到想改哪里改哪里。一些图片也可以直接放上去。
- 页面的框架看起来会比较归整。这一点会比很多设计师要强——很多国内的设计师在设计网页的时候，对框架、间距等的理解做得没那么好。这也是为什么外贸公司做出来的网站，看上去比较像国内网站，原因就在这里。
- 可以很好地把销售，尤其是老板自己想要的东西清晰地表达出来。这一点很重要，因为一个公司里对生意的理解，老板往往是最深的。
- 后期只要把 HTML 网页交给技术，让他们上架到服务器就好了。
目前的难点：
现在的网站结构普遍是 WordPress + Elementor 的。如何通过 HTML 快速转成 Elementor，目前还没有办法做到。
WordPress + Elementor 这个生态目前对”导入外部 HTML”的支持是行业短板，所有竞品（Webflow、Framer）也没有解决这个问题。这个能力空白短期内不会被填补，因为 Elementor 的数据结构和标准 HTML 之间的映射太复杂。
目前最务实的路径仍然是：拿 HTML 当设计稿参考，全局样式先配好，然后按页面优先级逐一在 Elementor 里重建，复杂组件临时用 HTML Widget 顶上。整个过程用 AI 辅助写 CSS、写描述文案、核查字段，而不是指望 AI 一键转化结构。