2. Linux.do
  3. 【教程】中国模能飞！给V4 Pro GA接上识图和前端skill写网站

【教程】中国模能飞！给V4 Pro GA接上识图和前端skill写网站

sallyn 2026-08-15 08:13 1

前言


其实之前在 V4 Flash GA 出来之后就发了一篇帖子，不过当时做的很随意，随便做了一个咖啡馆的网站，有些佬友说想看看是怎么做出来的。



[!warning] 代码部分全程由DeepSeek-V4-Flash GA编写，Gemini仅提供识图功能，GPT仅提供生图功能。

直接看效果
https://shanyu-cafe.netlify.app/
[Screenshot_2026-07-31-18-54-36-859_com.android.chrome-edit]
[Screenshot_2026-07-31-18-…



不过之前生图使用的是MCP来实现，感觉其实实际上一个带脚本的skill就足矣了，于是这几天优化了一下，体验了几个前端skill的区别，再来写的这篇文章。


废话不说直接看效果


zaocha.netlify.app


需要做的准备



  1. 接入一个识图MCP


其实你用什么都行，自己写一个都行，秉持着能不重复造轮子就不重复造轮子的原则，直接取用站内佬友自己做的MCP就行了。



本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：

我的帖子已经打上 开源推广 标签： 是
我的开源项目完整开源，无未开源部分： 是
我的开源项目已链接认可 LINUX DO 社区： 是
我帖子内的项目介绍，AI 生成、润色内容部分已截图发出： 是
以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI 生成、润色内容已使用截图方式发出

接上篇帖…


之前我使用的是 gemini-3.6-flash，但是今天我的IP被谷歌送终了，不过既然我都用ollama pro了，那么不妨直接使用里面带多模态的minimax-m3吧，毕竟这模型让它干其他的我也想不到干啥了。



  1. 接入一个生图skill


实际上，这一步并不是必须的。但是在使用 taste 和 impeccable 两个skill我注意到，他们都或多或少要求了生图环境（虽然不满足的话会fallback）而且 gpt-image-2 生成图片进行参考的能力很不错，另外 taste 带的skill可以让gpt帮你做一套品牌标识，所以我觉得带上是比较好的。


我自己让AI写了一个，其实就是里面的脚本比较重要。暂时只兼容了openAI格式，基本是针对gpt-image-2的，你用其他生图模型接进来我不确定行不行，不过这个skill拉下来本身也可以改就是了。


npx skills add Sallyn0225/sallyn-skill --skill openai-image


  1. 如果你这个是一个从零开始的前端，那么建议安装taste；如果已经有了一部分，那么安装impeccable。不要紧，后面我两个都会用到。



[!note]


需要注意的是，taste安装的话不一定需要全装，我个人只安装了下面几个



  • design-taste-frontend ^-^本体

  • image-to-code ^-^图片转代码

  • imagegen-frontend-web ^-^生图做网页用的

  • brandkit ^-^生成品牌资产



正式开始


其实我暂时还没有想到什么好的测试，那这次我们还是整点吃的吧。我想想搞个什么……要不搞个广式茶点铺的官网吧。


0. 前置工作 · 先出个大概的计划


理论上来说这个只是一个测试项目 我应该直接用Harness自带的计划模式就行了。但是我现在已经全部用Pi了，而Pi默认是不带计划模式的，而做大项目的时候我都直接上trellis了，所以这次就先用 Matt Pocock 那一套流程尽可能简单走一下吧。


npx skills@latest add mattpocock/skills

其实我也不知道做什么，就说我要做一个虚拟的广式早茶宣传页面，菜品、名字、地点都让它定，然后制作前端的部分。


使用 /skill:grill-with-docs 我现在要做一个虚拟的广式早茶铺的宣传网页，仅仅是前端的展示，不需要有实际的后端&数据库等等。店名、地址、菜品、价格等等信息都由你决定。

中间这一部分回答问题我就跳过了哈，按照你实际想做什么来选择就好了。


1. 生图、参考


在 to-spec 技能之后，就可以开始 implement 了。首先第一步是生成网页的各个部分的图片，让有多模态或者识图的模型去参考，这个用到了taste的image-to-code的技能。



D老师调用完了视觉MCP之后在这个目录留下了一个 design-system.md


2. 生成需要用到的素材图


在这之后，依旧是我们image-2发力的时候。其实我个人觉得很多时候网站AI Slop了，可以考虑让AI帮你规划一下看看要不要考虑生成一些图片放进来，可以很好的减少AI Slop的味道。



3. 开始代码实现


其实这一部分就看你之前 grill-with-docs 和 to-spec 的内容，清空上下文之后直接 implement 然后指定一下你的spec文档就行了，前提是spec文档写好了哈。


以下是第一轮的网页结果








4. 开始第二轮优化


这个时候发现 minimax-m3 的视觉能力好像有点区，于是换成了硅基流动的 Qwen3-VL-32B-Instruct 作为新的视觉模型（刚好这样也不会有人说我用什么新模型来加强了 虽然minimax m3也是条区）


这个时候我把我仓库里的所有 taste skill 删除。没错，我习惯把我这次用不到的skill就直接删了，到时候要用的的时候再装上（哪怕skill本身就是渐进式加载的）


然后我们把 impeccable 装上


npx impeccable install

然后进入agent里面，直接 /impeccable init 先初始化一下，应该会获得一个 DESIGN.MD 和 PRODUCT.MD 。有的时候不一定会有 DESIGN.MD 看你觉得你的设计系统OK不，如果你觉得还需要打磨那就暂时不要，可以的话你就 /impeccable document



经过了这一步之后，我重新开了一个session，然后直接输入了下面的内容：


现在请你 /skill:impeccable critique 一下当前已有的四个页面，5173端口应该有一个没关掉的本地服务器

然后就是这个skill去开了两个子代理去评审——当然，视觉模型不是ds自己，是我刚换的千问。


这么出来之后会给出一系列模型认为需要优化的地方，很人性化的是对应的命令也给你好了，你只需要让Agent逐条去优化就好了，记得和它说一句一定要使用对应的skill。


然后critique走完可以再走一个 impeccable polish 打磨一下。如果有闲心的话，还可以重新开一个session走一个 impeccable audit 然后也是一样按照给出来的优化建议和命令，让Agent去执行一下就好了。


5. 完成，查看成果




结算环节


本次使用的环境为：




  • Harness: Pi Agent（0.84.2）




  • 模型：




    • DeepSeek V4 Pro GA - 官方API




    • DeepSeek V4 Flash GA - ollama cloud




    • Minimax M3 - ollama cloud




    • Qwen3-VL-32B-Instruct - 硅基流动




    • GPT Image 2 - 中转站API






  • 无内置 AGENTS.md，相关skill已经在上方列出




所消耗的token量让Pi自己去统计了一下



ollama cloud的渠道是没有显示缓存命中的 所以这么计算其实是不太公平的

最新回复 (5)
  • 亚斯娜 08-15 08:17
    1楼

    只能说用免费多模态去识图还有点性价比，如果还需要付费识图，就没必要了

  • Davi 08-15 08:20
    2楼

    感觉效果相当不错啊，马上plus蹬完了，sol也特别慢，deepseek pro尝试下，真是快啊！

  • keson 08-15 08:38
    3楼

    感谢佬的思路 马上去测试一下 这些模型刚好都有

  • sallyn 楼主 08-15 09:53
    4楼

    看有啥用啥吧 智谱GLM 4.6V我记得是免费的 还是4.5V Flash？随便找个不太差的 应该都能用

  • 火之神神乐 08-15 10:03
    5楼

    嘿嘿 感谢佬的推荐 各位使用的佬也可以给我提pr哦

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐