视觉风格 demo

目标：客户挑了图册里的哪种风格，就能当天出一套一眼认得出是这种风格、用客户自己的店名和商品、经得起细看的 demo。

下面的 $K = ~/.claude/skills/visual-styles，装在别处时换成实际路径。技能目录下有 本地约定.md 时先读它：里面是这台机器和这个团队自己的规矩，和本文冲突时以它为准。

0. 定需求（能从资料和聊天里定的不问）

• 客户是谁：有客户资料先读资料。店名、卖什么、品牌色、logo、照片、对方挑的风格编号，已经知道的不再问。
• 做成什么：小程序、App、网站还是管理后台。小程序每屏要有微信胶囊，App 没有。
• 哪种风格：客户说了编号就用。没说就按 选风格.md 推荐两种。客户要混搭，按「一个主风格 + 借另一种的一两样」做。
• 出几屏：图册答应的是「三天看到首页设计稿：按您挑的风格出两套首页」。没有别的要求时，默认交两套首页：同一风格的两个方向，或者推荐的两种风格各一套。客户要看流程时再加详情、下单、结果等页，一般三到五屏，网站或后台加一屏 1280 宽的网页。
• 交什么：每屏 PNG 和一张展示板（发微信用），要能点的再打一个单文件 HTML。

1. 读这种风格

1. styles/NN-风格名.md 整份读完。
2. 用 Read 看 refs/<键>/page-a.jpg、hero.jpg 和 examples/<键>/board.png，心里先有「这种风格长什么样」。
3. 审美守则.md 整份读完。
4. 混搭时，把借来那种风格的说明也读一遍，只借它的一两样。写法：

const S = style('s05-organic');                       // 主风格
const B = style('s03-oriental', { borrow: true });    // 借的：CSS 也并入，展示板底色还按主风格
B.ui.seal('松间', { color: '#4F6F5F', paper: S.T.bg, at: 'left:300px;top:448px' })  // 函数直接用，颜色和纸色传主风格的
`<div class="s03" style="background:none;color:inherit">…</div>`                    // 借的 v- 类都挂在根类下，要包一层才生效

完整例子是 examples/mix-songjian/（05 为主、借 03 的印章和竖排题款，两套首页）。规矩打架时看 审美守则.md 第三节。

2. 建项目

bash $K/tools/setup.sh      # 第一次用时跑一次：装依赖，下载字体和图库
bash $K/tools/new_demo.sh <项目目录>/<客户简称>-<YYYYMMDD> <风格编号> "<品牌名>" mini|app|web

• 项目目录放哪都行，比如 ~/demos/。目录名只用英文、数字、横线。出图目录里的副本同名会被覆盖，所以要带日期。
• 客户给的 logo、产品照片放进项目的 img/，代码里写 img('./img/文件名.jpg')。图库的图写 img('图片名')，挑图看 refs/图库/。
• 两套首页可以放在同一个项目里（home-a、home-b 两屏），也可以建两个项目。放一个项目时 demo 写 compare: true，客户在手机上才翻得过去。
• 客户说有 logo 和照片但还没发来：用图库的图和自己画的记号顶上，交付时说清楚哪些是占位。
• 看图库单张：图在出图目录的 kit/assets/img/图片名.jpg，用 Read 看。
• out/ 每次出图都会重建，不要往里放手工文件。

3. 写屏幕

• 从样例改起，不从空白写起。 最接近的样子在 examples/<键>/demo.js（换行业的试跑）和 kit/catalog/pages/<键>.js（图册原样，五屏）。要原样借图册某一屏的 CSS，在 demo 里写 use: ['<键>']，屏幕根元素加图册的根类 x + 两位编号（如 x05）。
• 屏幕根元素 <div class="scr sNN p 屏名">，网页根元素 <div class="web sNN p" style="height:800px">。起手包的类全部带 v- 前缀，项目自己的类挂在 .p 下，别和 v- 撞。屏名和类名不能用公用类 sb mn cap hb dev dev-s dev-z island brw ic ph（比如 home-b 别缩写成 hb），组装时会报错。
• 起手包的组件：ui.logo / ui.nav / ui.tabs / ui.btn 每种风格都有，参数一样；各风格特有的组件见风格说明的「起手包」一节。
• 能点：任意元素加 data-go="屏幕编号" 跳屏，data-back 返回，ui.tabs(items, cur, go) 的第三个参数给标签栏配跳转。
• 内容：客户的真店名、真商品、真价格；没有的编得像真的，日期放在出 demo 那几天。几屏之间金额、时间、名字对得上。
• 客户有自己的品牌色和 logo：按风格说明的「换品牌时怎么变」改，守住不能动的部分。

4. 出图、自查

bash $K/tools/render.sh <项目目录>            # 全部屏 + 展示板 + 自动检查
bash $K/tools/render.sh <项目目录> home,menu  # 只重出这几屏

• 结果在 <项目目录>/out/：png/NN-编号.png（每屏 2 倍图）、board.png（展示板）、check.json。
• 自动检查报出界、截断、字太小（小于 11px）、字体没生效、图片没载入、属性被截断（style="…" 里写了双引号）；组装时还会报跳转目标不存在。要做到零问题；故意出血的大字给元素加 data-bleed。
• 用 Read 看 board.png 和每一屏，和 refs/<键>/page-a.jpg 放一起比，按 审美守则.md 第四节逐条自查。至少改一轮再给人看。
• 五屏以上、或者两套首页一起交时，交付前开一个 Agent 做独立审稿：给它 审美守则.md、风格说明、refs/<键>/page-a.jpg 和出图路径，让它挑问题，不告诉它你觉得哪里好。开不了 Agent 时，在结果里写「未独立审稿」。

5. 交付

bash $K/tools/pack.sh <项目目录> "<品牌>-可点击演示"   # 可选：单文件 HTML，图片和用到的字都内嵌

• 打包时会自动把每个跳转点一遍（电脑、手机、矮手机三种窗口），结果打在最后，有问题要修。
• 可点击 HTML 在电脑上打开是手机外框居中、按方向键或点底下圆点翻屏，在手机上打开是全屏、能直接点；手机上的翻屏圆点要 demo 写 compare: true 才有。跳屏有 200ms 转场（前进从右进、返回往右退），可点的东西按下有反馈。手机窗口比屏幕矮时（微信内置浏览器常见）整屏缩到放得下，标签栏和主按钮不会被裁掉；手机上打开总是从第一个手机屏开始，起始屏是电脑后台也一样。只有 kit/fonts.css 里的开源字体会被内嵌；用了苹方、宋体-简这类系统字体的，在安卓手机上会变成别的字。
• 回复第一句写成品在哪，再说：用的哪种风格（编号 + 名字）、几屏、两套各是什么方向。问「该对客户说什么」时，直接给整段能发的话。

风格一览

工具一览

改进这个技能

• 用户对审美提的新要求，补进 审美守则.md；只关某一种风格的，补进那种风格的说明和起手包，再重出 examples/ 里的试跑图。
• 自动检查能用程序判断的，加进 kit/check.js。
• 改了 kit/ 里任何东西，下次 render.sh 会自动同步到出图目录。改了起手包或风格说明，跑一次 tools/lint.sh。