一个区块一张图：三个只出图不写代码的 skill 怎么分工

2026-08-09

本文所有仓库信息核对日为 2026-08-09，以上游仓库最新内容为准。

taste-skill 的十三个 skill 里，有三个在 skills/llms.txt 的那一行行尾就把话说死了：Does not write code.。它们的交付物是图，不是代码。搞不清这一点，你会一边等着 agent 给你 React 组件，一边收到一堆构图稿。

一、先把这三个从名单里挑出来

README 把 skills/ 下的 skill 分成两类：实现类 “output code”，图像生成类 “output reference images only”。图像生成类正好三个：

文件夹	install name	行数
`imagegen-frontend-mobile`	`imagegen-frontend-mobile`	1465
`imagegen-frontend-web`	`imagegen-frontend-web`	987
`brandkit`	`brandkit`	798

这张表有一处值得先说：这三个的文件夹名和 install name 是一模一样的。仓库里大部分 skill 不是这样——文件夹 soft-skill 的 install name 是 high-end-visual-design，文件夹 output-skill 的 install name 是 full-output-enforcement。所以单装这三个的时候，你照着 GitHub 目录名填 --skill 反而不会错，这在这个仓库里算是例外。名字大面积不一致的问题我们另有一篇专门做对照表，这里不展开。

装法也没有特殊之处。README 的 FAQ 专门回答过「图像生成 skill 能不能用 npx skills add 装」，答案是 Yes，理由是它们与代码类 skill 同在 skills/ 目录下，同一个 CLI 能发现。

二、最该带走的一条规则：一个区块一张图

imagegen-frontend-web 的 frontmatter description 里有一条全大写强调的规则：

CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section.

配套的说法是：一个有 8 个区块的落地页产出 8 张图，绝不把多个区块压进一张图。正文开头还单列了一整节 HARD OUTPUT RULE — READ FIRST，把这件事按数量举例讲了一遍：1 个区块 → 1 张图，4 个区块 → 4 张图，8 个区块 → 8 张图。它的第 5 节叫 IMAGE COUNT & PAGE SLICING，里面第一个子节的标题直接是 THIS IS THE PRIMARY OUTPUT RULE。

这条规则值不值得你照做，取决于你要的是什么。

如果你的下一步是把图交给写代码的 agent 去实现，那按区块切开是有利的——每张图只承载一个区块的构图信息，交接时不需要再让模型从一张长图里猜「这块到底是第几屏」。README 给出的用法本来也是这个流向：交付物是图的时候用这三个 imagegen skill，然后把结果喂给写代码的 agent。

如果你要的是一张给客户看的整页概览稿，那这条规则和你的需求就是拧着的。这时候该做的不是硬套，而是在 prompt 里明确说清你要单图概览，别指望 skill 自己让步——它写在文件里的默认行为就是切开。

顺带说一句，这条规则本质上是一段写给模型看的提示词约束，不是仓库里有什么代码会去数你拿到几张图。它提高的是模型按区块切图的倾向，不是承诺。

三、web 那份 987 行在管什么

我们实读了 skills/imagegen-frontend-web/SKILL.md 的章节结构，共 13 个主节。正文最前面还压着两节：HERO COMPOSITION BIAS — READ FIRST 和 CORE DIRECTIVE: AWWWARDS-LEVEL IMAGE ART DIRECTION。

13 节里，跟「怎么不重样」直接相关的是第 2 节 THE COMBINATORIAL VARIATION ENGINE。它的子节名把这套组合逻辑拆得很细：Theme Paradigm、Background Character、Typography Character、Hero Architecture、Section System、Signature Component Set、Motion-Implied Language，还有三个带作用域标注的——Composition Anchor (per-section)、Background Mode (per-section)、Hero Scale (per-page)，另加 CTA Variation、Narrative / Concept Spine、Second-Read Moment。

(per-section) 和 (per-page) 这两个后缀是这份文件里最有信息量的细节之一：构图锚点和背景模式是逐区块变的，hero 的尺度是整页定一次的。frontmatter 里明写要「变化的 hero 尺度（giant / mid / mini minimalist）」，同时要求所有图共用一套一致的色板——变的是构图和节奏，不变的是颜色。你如果只打算用它出两三张图，这套组合引擎的价值会打折；它是为一整页多区块设计的。

其余几节的标题也基本能看出管辖范围：ANTI-AI-SLOP RULES（子节按 Layout / Visual / Typography / Content / Density / Carousel-marquee / Data-KPI 分了七类）、TYPOGRAPHY-FIRST DISCIPLINE、SECTION RHYTHM RULE、DENSITY & SPACING DISCIPLINE、COLOR & MATERIAL RULES。

这里要交代清楚我们的核实边界：这份文件我们只完整核实了 frontmatter 与全部章节标题结构，正文细则没有逐行核实。所以上面这些我只写到标题层，不替它转述具体条文。

四、mobile 那份为什么是三件套里最长的

imagegen-frontend-mobile 是 1465 行，也是整个 skills/ 目录里最长的一份。我们实读它的章节结构，共 37 个主节——web 那份是 13 节。

多出来的部分，从标题看大多是移动端特有的约束。举几个只在这份文件里出现的：PLATFORM MODE RULE（下分 iOS-native premium / Android-native premium / Cross-platform premium neutral 三种模式）、SAFE AREA AND SYSTEM REGION RULE、DEVICE MOCKUP FRAME RULE、ONBOARDING FLOW RULE、FIRST SCREEN CLEANLINESS RULE、LOGICAL FLOW RULE、MULTI-SCREEN CONSISTENCY RULE、SCREEN-TO-SCREEN VARIATION RULE。还有一节 CATEGORY-SPECIFIC BIAS，按 Fintech / Health / Fitness / Productivity / Social / Commerce / Wellness / Lifestyle 八个品类各给一套偏置。

frontmatter 里写了它的默认行为：屏幕应展示在一个微妙的高级 iPhone 或类似手机 mockup 里、带可见边框，但主焦点仍在 app 内容本身。这句话是默认值，意味着你不需要 mockup 边框的时候得自己说。

对照着看，web 和 mobile 的差别不只是「横的和竖的」。web 那份的输出单位是区块，一页切成 N 张；mobile 那份的输出单位是屏，还额外要求整个流程里的多屏保持一致（MULTI-SCREEN CONSISTENCY RULE）又不能张张雷同（SCREEN-TO-SCREEN VARIATION RULE）。这两条同时存在，本身就说明它想解决的是「成套」的问题，而不是单张图好不好看。

五、brandkit 管的是另一件事

798 行的 brandkit 和前两个不是一个交付物。它的 frontmatter 说自己是高端品牌手册图像生成 skill，用于品牌规范板、logo 系统、识别系统提案和视觉世界演示。

结构上最好认的是两个固定盘子。一个是 DEFAULT 3 × 3 PANEL SYSTEM，九个面板依次是：Logo Cover、Logo Construction、Digital Application、Brand Essence、Color System、Typography、Physical Application、Image Direction、System Detail；另有一个 2 × 3 REFERENCE-STYLE LAYOUT 备选。另一个是 LOGO CONCEPT METHODS，给了五种方法：Monogram + Meaning、Product Action、Metaphor Fusion、Negative Space、Construction Geometry。此外还有 VISUAL MODES 八种，从 Dark Developer / Builder、Dark Security / Threat Intelligence 到 Light Editorial / Compliance、Luxury / Beauty / Fashion 都在里面。

判断依据很直接：如果你要的东西最后是贴在页面上的，用不到它；如果你要的是一块要先定下来、后面所有页面都得对齐的识别板，才轮到它。 九宫格里有 Physical Application 这一格，也说明它的射程超出了网页。

六、别把 image-to-code 混进这三个里

image-to-code-skill（install name image-to-code，1228 行）也会生成图，而且它的第 2 节叫 MANDATORY IMAGE-FIRST RULE，第 3 节叫 GENERATE ENOUGH IMAGES RULE，第 5 节 DO NOT CROP OLD IMAGES RULE 和 mobile 那份的第 5 节是同名的。看起来很像三件套的第四个成员。

但 README 把它归在实现类，不在「只出图」那一类里。它的 frontmatter 描述的是一条完整链路：对视觉重要的网页任务，先自己生成设计图、深入分析、再实现网站尽可能贴合这些图。它的 38 个主节里有大量抽取与实现侧的内容——TEXT EXTRACTION RULE、TYPOGRAPHY EXTRACTION RULE、SPACING EXTRACTION RULE、COLOR EXTRACTION RULE、ANTI-DRIFT IMPLEMENTATION RULE，这些在三件套里没有对应物。

所以分界线是：三件套到图为止，交接由你来做；image-to-code 想把图和代码都包进同一条链路里。 README 也给了它的用法提示，在 prompt 里直接说明流程，例如 follow the skill: generate images, then analyze, then code。

七、决定用哪个之前

按交付物倒推最省事：

要的是落地页/营销站的多区块构图稿 → imagegen-frontend-web，并接受它一个区块出一张图；
要的是 app 的多屏界面与流程 → imagegen-frontend-mobile，注意 mockup 边框是默认开的；
要的是品牌识别板 → brandkit，它的默认盘子是 3 × 3 九面板；
想让同一个 agent 从图一路做到代码 → 那是 image-to-code，不是这三个。

还有两件事得摆在前面。第一，这三份文件我们核实到的是 frontmatter 与章节标题，正文细则没有逐行核实，本文也就没有替它们展开条文。第二，这些内容全部是提示词——它约束的是模型的决策倾向，不是有程序在旁边校验产出。所以本文不会写「用了就能出高级的设计图」这类话，那是把指令当成了结果。

本文依据 taste-skill 官方仓库（github.com/Leonxlnx/taste-skill）的 README、CHANGELOG、 skills/ 下的 SKILL.md 与 .claude-plugin/ 清单整理，核对日 2026-08-09。本文内容为仓库文档口径，我们没有安装或运行过其中任何一个 skill，文中所有规则均为写给模型的提示词约束，不构成对输出结果的保证。 skill 内容随上游更新而变动，默认 skill 当前自标为 v2 (experimental) 且仍在迭代，请以仓库最新内容为准。