design-extract

name	design-extract
description	为创作者提炼一套个人品牌设计系统，产出 design.md（品牌视觉 SSOT）+ theme.css（CSS token 翻译）+ preview.html（定稿展示页）。支持三种模式：素材提取（分析已有封面/作品/旧 CSS）、参考借鉴（分析喜欢的账号/网站/海报，转译气质而非抄袭）、零素材探索（原型卡投票速筛 + 风格原型库冷启动）。核心机制是交互式 picker 页面——候选方案渲染成实景小样，用户在浏览器里点选、微调、反馈，逐区块锁定、循环收敛。当用户说"提取我的设计/品牌/视觉风格"、"生成 design.md"、"建一套主题/theme"、"帮我定义设计语言"、"从这些图提取设计"、"我想要自己的品牌风格但没有素材"、"做一套配色和字体方案"时使用本 skill，即使用户没有明确说"设计系统"。

design-extract — 品牌设计系统提炼

把零散的视觉偏好收敛成三件产物：

• design.md — 人读的品牌 SSOT：命名调性、版式语法、配色 token、字体配对、视觉语言、Do/Don't
• theme.css — 机器执行的翻译：:root 变量 + 品牌元件样式，可直接被幻灯片/封面/视频工具消费
• preview.html — 定稿展示页：实景场景小样 + token 表 + 调性红线，全部引用 theme.css 渲染——既是交付报告，也是 token 可消费性的活验证

与用户全程中文交流。

定位与边界

一句话使命：从用户身上提取一套品牌视觉语言，落成 design.md + theme.css。

任何新需求（用户提的、执行中自己想到的）先过三问，任一不过就不做、明确告知超出范围：

1. 它是视觉语言的成分吗？（文案语气、内容选题 → 出界）
2. 它能落进 design.md / theme.css 吗？（落不进 → 出界）
3. 做的是提取，还是设计服务 / 模板生产？（后两者 → 出界）

非目标（明确不做）：内容策略（声线/标题句式/文案规则）、版式模板库（具体页面布局是消费方引擎的事，本 skill 只提取版式语法规则）、logo/头像设计（用户自备素材）、动画编排。

流程总览

① 模式判定(对话) → ② 速筛轮(浏览器·三态投票+事实题) → ③ 方向板轮(整板单选，锁定版式语法)
→ ④ 细节轮循环(浏览器点选)
        ↑              │ 不满意区块重生成
        └──────────────┘ 满意区块锁定
→ ⑤ 收尾轮(浏览器·暗色变体+调性回放+命名+Do/Don't) → ⑥ 产出 design.md + theme.css + preview.html

一切判断都贴着可见物下，浏览器是唯一判断界面。视觉候选渲染成实景小样；语言候选（调性/命名/红线）也渲染成卡片、贴着定稿预览确认。"极简·留白·高级感"这种裸文字选项和 hex 码是同一种失败——都要用户先在脑内翻译成画面才能判断。对话只做三件事：模式判定、接收素材、异常兜底（三轮不收敛时挖需求）。

页面上也只出投票和点选，不出填空——用户不需要会表达。人不擅长生成、擅长纠正：所有判断都给候选让用户挑和纠正，调性这类东西从点选行为里读出来再回放确认，永远不让用户当起草人。唯一的开放输入是事实题（讲什么、讲给谁——事实人人会说）和反馈框。

① 模式判定

输入是个光谱，按用户手上有什么定模式（可混用）：

模式	触发条件	候选从哪来
素材提取	用户有自己的旧封面/作品截图/旧 CSS/banner	分析素材：聚类高频色、识别字体气质、找反复出现的元件——候选 = 用户已有风格的整理与提纯
参考借鉴	用户能给出喜欢的账号/网站/海报链接或截图	分析参考：提取的是气质和手法（色彩关系、字体类别、质感方向），绝不照搬具体画面——候选 = 同气质的原创变体
零素材探索	什么都没有	速筛轮（16 张原型卡三态投票 + 事实题）建立偏好画像——候选 = 按画像组合的原型变体

开场先问一句"有没有已有素材或喜欢的参考"，没有再进探索模式。素材质量只影响第一轮候选命中率，不是必要条件——循环会补。

② 速筛轮（替代文字访谈）

气质不问，用眼睛投。文字气质词要求用户先把词翻译成画面——翻译损耗大且因人而异，所以问答里只留事实，感受全部交给可见物（数据格式见 references/picker-protocol.md《速筛轮》）。

零素材探索模式，开一轮速筛 picker：

• 事实题（文本框）：讲什么、讲给谁；可附类比（像一本什么杂志/一家什么店）——事实人人会说，不设选项
• 16 张原型卡三态投票：每卡 = 该原型的版式签名 + 色板渲染成的实景小样，标注来源（原型名 + 一句气质注解）。心动 / 无感 / 绝对不要——排除票就是反向题，原因写进反馈框
• 16 个原型全量呈现、不预筛：《映射建议》只决定卡片排序，不决定谁被隐藏——速筛的意义就是把"模型猜你喜欢什么"换成"你自己看见了再说"

素材提取 / 参考借鉴模式：跳过投票区块（素材和参考本身就是气质信号），事实题并入方向板轮页顶（type: "text" 区块），不单开一轮。

读票规则：按《偏好画像》做维度级解读——心动票的交集建立初始画像并圈定组合原料（仅作原料，禁止原样复读，见③《生成纪律》）；排除票的交集记反向信号入红线池（同族多卡被排除 → 整族降权）。票果只把先验从 16 缩到 3-4 个原型，组合与试探由方向板轮的板型配比承担。

偏好画像（贯穿机制：读选择，不数选择）

整个流程是一次隐式心理测验：卡片与候选是题目，投票/点选/否决/反馈是作答——用户不需要知道每道题测什么，模型在背后维护一份偏好画像并逐轮更新：维度假设 + 置信度，而不是"他喜欢原型 A"。

• 维度清单（按需增删）：明度（亮底/暗底）、色温、饱和度、密度气质、秩序感（严格网格 ↔ 松弛手作）、装饰度（克制 ↔ 元件丰富）、时代感（复古 ↔ 现代）、字体性格（衬线/无衬线/等宽/手写）、材质感（纸感颗粒 ↔ 平面无纹理）
• 读法：在心动票/锁定项的共同维度上加置信，在排除票/否决项的共同维度上记反向；单次选择不下结论，交集与重复才是信号——心动了复古印刷 + 学院羊皮 + 夜读烛光，读出的是"衬线、时间感、低饱和"三个维度假设，不是三个原型名；feedback 原话里的形容词是最直接的维度证据
• 交集为空（心动票维度矛盾）：心动了暗黑终端 + 柔和粉彩这类两极票，不许取平均（平均出来的中间值谁都不爱）——把心动票按维度分簇，方向板每簇至少出一板，再加试探板求证"哪一极才是封面要的"（另一极可能是他喜欢但不适合自己品牌的东西）；分歧本身写进调性回放求证
• 零心动票（全排除/全无感+排除）：组合原料为空 → 不许硬出方向板。回对话用 AskUserQuestion（无此工具的 agent 用对话选项题）兜底：给 2-3 个气质族级的再确认问题（"16 个都不心动——更接近哪种：A 你见过喜欢的长什么样…"），按答案 + 未被排除的原型重新取材；排除票照常入红线池
• 用法：方向板的结构碰撞按高置信维度选组合轴（不是任意 A×B）；试探板/试探项专测置信度最低的维度；细节轮候选按画像匹配度排序
• 揭晓：收尾轮的调性回放就是画像的语言化——每版调性卡的 note 必须引用行为证据（"你心动的三张卡共同点是 X""你否决 Y 时说'……'"）
• 纪律：画像是假设不是判决——只影响排序与组合，不许据它提前隐藏用户未否决过的方向（与红线"只许收窄"同源）；每轮新证据可推翻旧假设，被推翻的假设交给试探项复测

③ 方向板轮（锁定结构层）

品牌视觉分两层：结构层（版式语法：构图语法/明度结构/密度）与样式层（色板/字体/质感/元件/形状）。远距离和缩略图尺寸下最先被感知的是结构层——明度结构与构图语法决定远视距与缩略图尺寸下的品牌识别度，配色字体是近距离信息。所以第一轮不出零件，出整板，先锁结构层。

读 references/style-archetypes.md（每个原型自带版式签名），按速筛票果/素材分析做 10 个完整方向板（板数硬性，配比见下《生成纪律》）。每板是同一套版式语法在 2-3 个场景上的实例化——迷你封面 + 迷你幻灯内页 + 迷你金句卡并排（格式见 references/picker-protocol.md《方向板轮》）：用户选的不是一张布局，是穿越场景仍然成立的语法——只在封面成立的结构，其缺陷会在第二个场景直接暴露。板与板之间是结构级差异——构图语法、明度结构、留白密度都不同，不是同一版式只换样式层。

生成纪律（防退化）：方向板是票果的组合输出，不是速筛卡的放大复读——速筛已收集过对纯原型的偏好，原样重出零信息增量：

• 板数硬性 10 板：方向板轮固定输出 10 个方向板，全部由心动票原型的设计要素融合、重组而成（结构层与样式层可拆开重配）。心动票少、两两组合不足时，用"同一对原型换融合机制再出一板"、三原型组合、加大定向变体与试探板名额补足——板数不得缩减
• 禁止复读：任何方向板不得与单一原型同构同样式
• 整组自检（防集合级复读）：逐板合规不算过——出板前把 10 板并排自查：若多数板都能一眼指认唯一主导原型、且主导原型集合与心动票一一对应，整组视同速筛复读，必须重组；单板能引用组合公式不构成豁免
• 板型配比（以 10 板、4 张心动票为例）：1-2 板 = 高心动原型的定向变体（结构保留，按事实题画像改造——受众/题材适配密度与场景）；≥6 板 = 心动原型间的结构碰撞（按偏好画像的高置信维度选组合轴——A 的构图语法 × B 的明度结构、A 的结构层 × B 的样式层，各板组合机制彼此不同；心动票的两两组合优先全覆盖，名额有余再做三原型组合或同对换机制）；1-2 板 = 试探板（专测画像中置信度最低的维度——心动结构 × 无感原型的样式层，或反向）
• 碰撞板资格：结构碰撞的双方必须都是心动票原型。把无感/未投票原型拉进组合的板不算碰撞板、只能占试探板名额——它测的是用户没表过态的口味，不是在融合已表达的喜好；试探板名额用完就不再出这类板
• 排除票原型的结构与标志元件不得上板
• 心动票越分散，碰撞名额越要向两两全覆盖倾斜——多张心动票是混搭许可信号，说明用户要的可能在原型之间，不在单个原型上

用户整板单选：

• 选中无反馈 → 锁定版式语法，该板（含全部场景）成为细节轮的预览模板；板上的色彩字体质感只是初始值，细节轮继续打磨
• 选中 + feedback → 以该板为基按反馈改一版重出
• "都不是" + 理由 → 更换结构方向重出新板，理由记入红线池

语法锚定纪律：锁定写进 design.md 的是跨场景不变量（对齐纪律/明度结构/密度气质/签名手法）+ 按画幅应用指引，不是那张板的坐标——"信息入口从左上进"是语法，"标题在左上角"是排版；排版是消费方引擎（slides 生成等）在语法约束下的自由。密度只锁定性气质档 + 处理策略，量化上限（面积比/元素数）只属于封面/题图层——方向板的迷你内页是语法验证载体，不构成信息承载页的密度依据，内容页密度由实际内容决定。

④ 细节轮循环（打磨样式层）

结构层锁定后，逐区块打磨样式层。候选共享定稿方向的预览模板、只差变量值，仍是实景小样——#F4F1E8 和 #F2EFE6 在表格里肉眼不可分，渲染成两张小封面立刻能选。每个区块 2-4 个候选（例外：色板与字体配对放宽到 6-10 个，按画像匹配度排序——组合空间大、缩略图一眼可比，不会选择瘫痪）。候选间须是方向级差异、按七三配比留试探项，并遵守原型库《混搭规则》：原型不是套餐，每个区块至少混入 1 个跨原型候选——个性来自组合，不来自单选。每个候选的 note 必须标来源（"源：复古印刷" / "源：学院羊皮色板 × 复古印刷元件"）——用户有权知道选项从哪来。字体/元件等微差异区块的候选须配 thumbHtml 放大样片（缩略图专用，见协议），否则共享模板缩略图下差异不可辨。

需要候选的区块（核心五项必出，动效按需）：

#	区块	提取什么	落到 theme.css
1	色板	5-8 个 token：底色/次级底/主文字/结构色/点缀色/徽章色/次级灰，每色绑定用途，定稿时连同用量配比	:root 颜色变量
2	字体配对	标题/正文(中文)/等宽三个角色 + 字重 + 层级对比	字体变量 + @import
3	质感底纹	纯色/横线纸/点阵/噪点/无 + 密度	背景纹理变量
4	标志性元件	印章/徽章/胶带/角标/分隔线/强调手法（高亮/下划线/描边）等"签名"	组件类（.stamp 等）
5	形状语言	圆角 vs 直角、硬投影 vs 柔光、实线 vs 虚线	卡片/按钮结构参数
6	动效气质	利落快切 vs 从容缓动（第二梯队，按需）	速度/缓动变量

排版密度与构图已在方向板轮定为版式语法，不重复出块；命名调性和 Do/Don't 在收尾轮确认（见⑤），不进细节轮。每轮提交后按《偏好画像》更新画像——锁定、否决、feedback 都是证据。

循环机制（详细协议读 references/picker-protocol.md）：

1. 在工作目录建 design-extract-picker/，写 picker.html（复制 assets/picker/picker-shell.html）+ picker-data.js（候选数据：每个候选带 CSS 变量集 + 预览模板）
2. 起服务器（必须后台运行）：node <skill目录>/assets/picker/server.mjs --dir design-extract-picker --port 4399，然后打开 http://localhost:4399（macOS open / Linux xdg-open / Windows start）
3. 后台等 choices.json 出现（until-loop 轮询），用户点"确认提交"的瞬间即可读取
4. 读 choices.json，逐区块处理：
   • 直接选中/微调后选中 → 锁定，下一轮不再出现
   • 选了候选但带 feedback → 以该候选为基础按反馈改一版，下轮只出该区块
   • "都不是" + 理由 → 换方向重出 2-3 个新候选，把理由记入红线池（作为⑤ Do/Don't 的输入）
5. 重复直到全部锁定。每轮只重做不满意的区块——三五轮内必然收敛，不许每轮推倒重来
6. 锁定后推翻（用户在对话里反悔已锁区块）：解锁该区块，按用户给的理由重出候选；只连带重出直接受它约束的未锁区块（如推翻色板会连带质感），其余已锁区块不动；推翻理由记入红线池并更新画像——反悔是高价值证据，说明之前的锁定是将就

反馈分三层，picker 页面都已支持：页面内微调控件（明度/字重/密度档位，消化"接近但差一口气"）→ 选最接近的+文字反馈 → "都不是"+必填理由。

⑤ 收尾轮（浏览器）

全部锁定后加开最后一轮 picker（数据格式见 references/picker-protocol.md《收尾轮》）。右侧预览始终显示定稿组合，四件事全部贴着定稿可见物确认。统一原则不变：用户是裁判不是起草人：

1. 暗色变体：按已锁色板推导 2-3 个暗化候选（推导纪律见 references/design-md-template.md），附"✗ 我用不到暗色场景"跳过项（noneNeedsReason: false）——暗色不是新设计，是定稿色板的同色相翻译，不许静默交付。若定稿主色板本身是暗色，则反向出亮色变体（白天/打印场景），推导纪律同理反转
2. 调性回放：调性不是问出来的，是偏好画像的语言化揭晓——把贯穿全程更新的画像（高置信维度 + 行为证据）提炼成 2-3 版调性卡（气质公式 + 一段画面感描述，用定稿字体底色渲染，note 引用证据："你心动的三张卡共同点是 X / 你否决 Y 时说'……'"），用户对着旁边的定稿预览挑哪版说得最准，feedback 口头修正。绝不问"你的调性是什么"
3. 命名：基于调性候选起 2-3 个体系名（如 "Vintage Press"），渲染成 wordmark 卡——定稿字体排在定稿底色上，名字是看着选的，不是读着选的
4. Do/Don't 确认：红线池（每次"都不是"的理由、否定反馈）整理成 checklist 区块逐条勾选，每条 note 标来源（"源：第 N 轮你的原话'……'"）。红线不是问出来的，是从循环记录中整理出来的

AskUserQuestion 只做兜底：三轮不收敛时挖需求、收尾轮提交后仍有歧义时追问。

⑥ 产出

读 references/design-md-template.md 按六段式写 design.md（版式语法段来自方向板轮的锁定结果）。关键纪律：

• 每个值可执行：hex 码、字体名、具体元件，不写"米白色"这种散文；提取日期用当天实际日期
• 角色完整：配色表必须覆盖细节轮色板候选的全部角色（5-8 个 token）；收尾轮的口头修正必须落进对应段落，不许只停在 picker 里
• 密度分层纪律：量化密度只许写进"封面/题图构图"层；全局密度只写定性气质档 + 处理策略，并按模板附适用范围注记——把封面样的量化密度写成全局规则是规格违例
• design.md 是 SSOT，theme.css 只是它的影子——文件头注明"由 design.md 翻译，改品牌先改 design.md"

theme.css 翻译规则：

• 所有颜色定义在 :root token；需要透明度的色加 --xxx-rgb: R,G,B 伴生变量，用 rgba(var(--xxx-rgb), .12) 引用——:root 之外零硬编码色值
• 只写"品牌长什么样"（token + 元件外观），不写布局/动画结构（那是消费方引擎的事）
• 暗色变体（若有）写进 [data-theme="dark"] 块：与 :root 同名 token 全量重声明，消费方加一个属性即整体换肤
• 第三方官方色（平台按钮等）不属于品牌主题，不放 theme.css
• 字体用 Google Fonts CDN @import（离线 woff2 内嵌是消费方的后续优化）

第三件产物 preview.html（定稿展示页），与前两件同目录交付：

• 内容结构：①命名 + 调性一句话；②2-3 张实景场景小样（封面/内页/金句卡，用定稿版式语法排布，题材用用户事实题的真实内容）；③配色 token 表（色样 + hex + 用途）；④字体配对与元件展示；⑤Do/Don't 红线（带来源原话）；⑥暗/亮变体并排对比（若有——同一段 HTML 切 data-theme 展示换肤）
• 硬纪律：页面通过 <link rel="stylesheet" href="theme.css"> 引用主题，所有品牌视觉值一律走 var() token——展示页零硬编码色值，它本身就是 theme.css 可消费性的验收测试；页面骨架 UI（说明文字、表格线）用中性灰，不与品牌色混淆
• 展示页只呈现定稿，不呈现过程史（轮次、否决记录不上页——那些属于会话）

产出后把三件产物路径报给用户，并用浏览器打开 preview.html 让用户终验。

清理

结束时杀掉 picker 服务器（按记录的 PID 结束；macOS/Linux 可 pkill -f server.mjs，Windows 用 taskkill /F /PID <PID>），design-extract-picker/ 临时目录问用户是否保留（里面有定稿预览，可能想留）。