视觉 DNA 系统

@ BruceL0171272026.7.10visual-dna-system

从一份视觉样本里抽出可跨项目复用的视觉 DNA——色板、字体、版式节奏、材质、语气, 剥掉源品牌痕迹, 交下游 skill 直接接手。绝不出成品页面。

官方精选视觉设计

名字/名称: 视觉 DNA 系统
描述说明: Extract a reusable, de-branded Visual DNA Design System from visual samples such as websites, screenshots, Figma references, images, decks, posters, app UIs, or HTML/CSS. Use when the user asks to analyze visual style, distill design DNA, create transferable visual tokens, or make a downstream prompt without copying the source. Also trigger for Chinese requests like "提取这个网站的视觉风格", "把这个 UI 抽成可复用设计系统", "分析这套海报的视觉 DNA", "生成可迁移视觉 tokens". Do NOT use for producing final websites, dashboards, decks, posters, prototypes, direct brand recreation, prompt review, or code review.

从一份视觉样本里抽出可跨项目复用的视觉 DNA——色板、字体、版式节奏、材质、语气, 剥掉源品牌痕迹, 交下游 skill 直接接手。绝不出成品页面。

什么时候用它

手里有参考:

我看到一个网站、一张截图、一张海报、一份幻灯或一个 app UI, 喜欢它的气质, 想让 skill 把风格抽成可复用的 tokens 与原则, 不带原品牌痕迹。

融合多个参考:

我一次贴了几张样本, 让 skill 帮我合成一套主 DNA, 或者告诉我风格打架、拆成几套并列输出。

给下游 skill 喂料:

下一步我要跑 ui-ux-pro-max (或别的下游生成 skill) 做真页面, 需要一段可以直接粘的下游 prompt 把 DNA 带过去, 下游不用回头再读原样本。

明说风格取舍:

我告诉 skill "只保留克制的编辑节奏, 图标语言不用管, 配图选型也别管", 抽象层级按我说的来。

不接:

直接给我出真页面 / dashboard → ui-ux-pro-max; 画架构图 / 流程图 / 概念图 → fireworks-tech-graph; 审视觉设计好不好 → 不触发。

默认只出可复用的抽象设计系统, 不出成品页面、海报、dashboard 或原型——想要成品得下游 skill 接手, 这是最反常识的一点。

五件套: Visual DNA Design System (Markdown) + visual_dna_system (JSON tokens) + Downstream Production Prompt + Transferability Notes + Originality Guardrails
默认回聊天窗: 五件套以命名 Markdown 与代码块直接返回, 不动文件
落盘要点名: 用户明说路径 (例: docs/visual-dna/finance.md) 才写文件
原创性守卫: 源 logo、品牌名、原版式、原文案、专有组件全部剥离, 只留可迁移的抽象原则
绝不会做: 出真页面、真海报、真 dashboard、真原型; 沿用源品牌资产; 硬爬需要登录或反爬的 URL (会请求截图或 HTML 片段)

前置:

一份可读的视觉样本——URL、截图、Figma 帧、图片、HTML+CSS、海报、幻灯或 dashboard 都行, 甚至一段文字描述也可以。URL 若需要登录、有反爬或 404, skill 会请求截图或 HTML 片段, 不硬爬。

相邻 skill 分工:

不接的场景:

微妙边界: