Mia碼上AI
AI 工具實測·

AI 做的網頁一股 AI 味?我把 GitHub 最火的 3 個設計 Skill 全裝上試了

影片裡的 12 個網站都在這兒,點開就是 AI 交出來的原樣網頁,可以自己滑到底、點一點。同一句提示詞和三個 Skill 的安裝命令在下面,複製就能用。

闖關 · 一句話工坊 · 第 6 關看完這條就過一關,+30 經驗這一關過了
下一關
在 YouTube 訂閱

12 個網站

每一排是同一個條件:什麼都不裝,或者只裝一個 Skill。每一列是同一個需求。點卡片會在新標籤頁打開那個網站。

不裝

taste-skill

impeccable

hallmark

Mia 的小貼士

  • 這些店和人都是我編的需求,網頁裡的表單不會真的發出去。
  • 不裝、taste-skill、impeccable 這幾頁的照片是 Codex 自帶的生圖做的;hallmark 那幾頁用的是 Wikimedia 上的開放授權照片,作者和授權寫在每頁最底下。
  • 手機上也能打開,順便看看它們窄屏時長什麼樣。

同一句提示詞

12 個網站都是 Codex 裡的 GPT-6.1 Sol(推理 xhigh)做的,每個都在全新的環境裡,只裝要測的那一個 Skill。提示詞只差開頭那個名字和中間的需求:

提示詞 · 原文
$hallmark Build a landing page for Hearth & Crumb, a small family-run bakery in Vancouver where people preorder sourdough for Saturday pickup. Make it a static site in this folder that opens directly in a browser (index.html, no build step). I won't be around to answer questions, so make your own calls and finish the whole page.
提示詞 · 中文意思
$hallmark 帮我给 Hearth & Crumb 做一个落地页:温哥华一家人开的小面包店,大家在网上预订酸种面包,周六来取。做成这个文件夹里直接能在浏览器打开的静态网页(index.html,不用编译)。我不在,没法回答问题,你自己拿主意,把整页做完。

另外兩個需求換成這兩句就行(不裝 Skill 的那組,把開頭的 $hallmark 去掉):

另外兩個需求
a landing page for Recap, an app that listens to your meetings and turns them into a to-do list
(一个会听你开会、把会议变成待办清单的 App 的落地页)

a portfolio site for Aiko Mori, a freelance wedding photographer in Kyoto
(京都自由婚礼摄影师 Aiko Mori 的作品集网站)

三個 Skill 怎麼裝

在你的專案資料夾裡跑下面的命令。Claude Code 裡用 /名字 叫它,Codex 裡用 $名字。

taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
impeccable
npx impeccable install
hallmark
npx skills add nutlope/hallmark

Mia 的小貼士

  • 不加 -g 就只裝在當前專案裡,不會影響你別的專案,試完不喜歡刪掉那個資料夾就行。
  • taste-skill 和 hallmark 要你電腦上有 Chrome,它們會自己開瀏覽器截圖、對著截圖改;hallmark 還要 npm i -g puppeteer-core。
  • 裝了 Skill 以後 AI 要先讀一大堆說明再動手,一個頁面要多等好幾分鐘,別以為它卡住了。
  • impeccable 第一次用會想先問你產品是給誰用的(/impeccable init),有空就認真答,它最擅長的其實是改你已經有的頁面。
  • 最管用的一招跟裝哪個無關:把你店裡的真照片、真價格、真營業時間一起丟給它。

有問題?去 YouTube 留言區聊聊