WEBSITE7.512301
返回作品库
乔木画家风格美术馆
NEXT.JS, TYPESCRIPT, CSS, PLAYWRIGHT · 做网站 / 落地页
用同一句提示词,看383位画家风格差异
用同一句提示词,看383位画家风格差异
艺术对比AI绘画风格画廊Next.js静态站点图像生成
2
复制 copy
9
分享 share
0
点赞 like
可复现三件套
预计 15 分钟前置:Node.js
APROMPT / 提示词
请使用 Next.js 创建一个画家风格对比画廊网站,包含搜索筛选、收藏、lightbox 等功能,参考项目 https://github.com/joeseesun/qiaomu-artist-style 的设计。将 383 张静态 WebP 图片放在 public/generated/ 目录,并根据 data/artists.ts 生成数据文件。
BSOURCE / 源码
// 入口片段 app/page.tsx —— 完整源码见仓库 import { StyleGallery } from "@/components/StyleGallery"; import { artists, promptTemplate } from "@/data/artists"; export default function Home() { return <StyleGallery artists={artists} promptTemplate={promptTemplate} />; }
HOW IT'S MADE / 拆解
01
克隆仓库并运行 `npm install` 安装依赖。
02
执行 `npm run build:artists` 生成艺术家数据,或使用已提供的静态图片。
03
运行 `npm run dev` 启动本地开发服务器,访问 `http://localhost:3000`。
Dr.Sharp 点评
Dr. Sharp:一个巧妙的艺术家风格对照集,代码结构清晰,美中不足是图像生成依赖外部 API,复现时需自行备齐钥匙和耐心。
乔木画家风格美术馆 · vbai.studio/works/qiaomu-artist-style
复制 prompt 或源码即可在本地复现 · 喜欢就生成带示例图的分享海报