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 里用 $名字。
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx impeccable install
npx skills add nutlope/hallmark
Mia 的小贴士
- 不加
-g就只装在当前项目里，不会影响你别的项目，试完不喜欢删掉那个文件夹就行。 - taste-skill 和 hallmark 要你电脑上有 Chrome，它们会自己开浏览器截图、对着截图改；hallmark 还要
npm i -g puppeteer-core。 - 装了 Skill 以后 AI 要先读一大堆说明再动手，一个页面要多等好几分钟，别以为它卡住了。
- impeccable 第一次用会想先问你产品是给谁用的（
/impeccable init），有空就认真答，它最擅长的其实是改你已经有的页面。 - 最管用的一招跟装哪个无关：把你店里的真照片、真价格、真营业时间一起丢给它。
