这个工具做什么，不做什么
流派混合把艺术流派的特征转译成网页设计规则。工作台在浏览器里生成提示词和文件，不会替你调用代码模型或生图模型；你可以把结果贴给 Claude Code、Cursor、v0 或支持英文提示词的生图工具。
骨架负责布局、字体、圆角、边框、阴影和动效；表皮负责调色板、质感、母题和生图媒介。混合不是两套风格取平均，而是让每个维度有明确归属。
第一步：选骨架，先看信息怎样排列
在工作台的灰阶缩略图里比较网格、标题和模块关系。先不要被颜色吸引：你的页面是短篇品牌介绍、活动落地页，还是需要清楚分组的信息页？
第二步：选表皮，检查颜色与画面
在主视觉卡片中选择颜色、笔触和题材。野兽派让颜色表达情绪，浮世绘提供木版套色的画面，敦煌壁画提供矿物色和壁面质感。
浮世绘、敦煌壁画和野兽派在本工具里只做表皮，没有自己的网页布局。需要单独使用它们时，可以借极简主义的骨架；不能把“浮世绘 × 野兽派”当成两副可互换的骨架。
第三步：用对比预览确认“这次变了什么”
先只换一个维度，再打开“对比本次改动”。换骨架时，布局和字体应改变；换表皮时，配色和主视觉应改变，但骨架的布局规则不变。
部分颜色和质感会受骨架约束：强调色只取前 accentSlots 个，质感强度取表皮 level 与骨架 textureCap 的较小值。不是所有表皮的强烈效果都必须完整保留。
例子：包豪斯 × 野兽派如何分工
- 骨架
- 12 栏模块网格，所有元素对齐到栏线
- 字体
- 标题 Jost；正文 Jost
- 配色
- 互补色直接相撞：朱红 CTA 放在翠绿面板上；文字用深紫代替黑；钴蓝做轮廓线。
- 强调色
- 3 个，由包豪斯决定
- 质感
- 粗笔触色块，颜色彼此碰撞；0.6 被骨架上限 0.4 限制为 0.4
骨架规则中的“黑线”“白格”等词表示角色，不要求保留原骨架颜色。混合时线条用表皮的 line，文字用 ink，底色用 bg。母题与布局冲突时，母题只留在插图里。
第四步：把规则交给代码工具
- 选择“写代码用”标签，复制完整提示词；已有项目时说明技术栈、页面用途和真实文案。
- 需要继续迭代或让多个工具共享规则时，下载 DESIGN.md，把它作为这次页面设计的依据。
- 让代码工具实现页面后，检查布局和字体是否来自骨架、颜色是否来自表皮，不要只看“像不像某个画派”。
请用包豪斯的结构 × 野兽派的色彩与质感，为一家独立书店实现响应式落地页。 保留已有技术栈和真实业务文案。 按我接下来提供的 DESIGN.md 设置布局、字体和 CSS 变量。 不要把主视觉压在正文下面；保留焦点环，并检查正文与按钮的对比度。
工作台的完整提示词包含实际 CSS 变量、字体、布局规则和禁忌。这里的简短示例用来说明提问方式，不替代完整规则。
第五步：需要图片时，单独带走生图提示词
切到“生图用”，在“画面主题”中填写具体主体与场景，再复制英文提示词。只写“好看的艺术图片”无法交代你要画什么。
例如把主题写成 a quiet independent bookstore on a rainy evening, books visible through the window。流派名、媒介、构图、配色与母题由组合补充；不要增加艺术家名字，也不要让图像承担需要精确排版的文字。
生成后检查文字、数字与水印。网站中的主视觉也是 AI 生成的风格示意，不是历史原作；需要艺术史或文物资料时，应另查可靠来源。
下载 HTML 与安装技能，怎样选择
“下载书店示例 .html”适合先拿到可打开的参考页面：主视觉内嵌，布局已经落地，但书店文案只是演示，需要改成你的内容。Google Fonts 仍需联网，离线会回退到系统字体。
“下载 DESIGN.md”适合在现有项目里使用，不要求替换已有框架。想让 Agent 每次按同一份流派库工作，可以到安装区选择工具，按页面指令安装三个技能文件；本工具生成提示词不需要 API key，外部模型的账号与费用由对应服务决定。
交付前的检查清单
- 信息层级清楚：标题、正文和行动入口不争抢注意力。
- 手机没有横向溢出，正文行宽与字号可读。
- 质感只在底色上，主视觉单独占位、不作为正文底图。
- 正文与背景对比度至少 4.5:1；强调色上的文字按实际配对检查。
- 键盘焦点可见，按钮有反馈，动效尊重 prefers-reduced-motion。
- 代码工具没有擅自加入骨架不允许的圆角、阴影或布局。