一张普通的 AI 生成图片，竟然可以变成真正能编辑、能修改、还能做动画的 HTML 页面！ 日本开发者 nakazakifam 做了一个很有意思的实验。 他… · @BeyondTheBoxCN · TwKit

@BeyondTheBoxCN

一张普通的 AI 生成图片，竟然可以变成真正能编辑、能修改、还能做动画的 HTML 页面！ 日本开发者 nakazakifam 做了一个很有意思的实验。 他先用 Canva Craft 生成了一张复杂的广告海报，然后让 Claude Opus 5.5 用 HTML 重新构建。 除了人物照片需要抠图保留，其他元素，包括金色立体文字、徽章、丝带、价格标签和背景，全部由代码重新制作。 结果相当惊艳！ 图片里的每个元素都能独立移动、缩放、修改颜色和文字，还能加入动画。 最让我惊讶的是，连复杂的金色立体标题都保留了真正的文字属性。随便修改标题，立体效果依然存在。 作者还结合 HyperFrames 制作了动画演示。 我觉得这项技术在网页设计上的潜力非常大。 想象一下：以后设计网页，先让 AI 生成一张满意的效果图，再让 Claude 把图片中的文字、按钮、背景、装饰等元素重建成独立的 HTML/CSS 组件。 接下来就可以修改内容、调整布局、添加交互和动画。 尤其适合广告落地页、产品展示页、动态 Banner 等场景。 如果这套流程能进一步自动化，网页设计从视觉创意到前端实现的工作量，可能会大幅减少。 以前看到一张漂亮的网页设计图，还要想办法把它实现出来。现在，AI 已经开始直接把设计图变成可以继续开发的代码了。 https://x.com/nakazakifam/status/2115326542192492698/video/1

曝光 154 · 评论 2 · 点赞 3 · 书签 0