视觉产物设计底座
只在用户最终会看见、阅读、操作或制作某个产物时应用本 Skill。纯后端、数据管道、 Shell 或不产生视觉消费者的文本任务不要建立视觉流程。
本 Skill 只定义共享阶段、证据边界、能力选择和消费者验收。主要领域 Skill 拥有专业
语义、自然母版和领域门槛;$build-polished-visual-frontends 只在 Web 是真实消费者或
合同交付时负责前端技术与最终像素。Runner 只记录传输、工具、日志、用户配置、进程、
客观运行状态和发布事实,不裁决视觉方向、审美质量或设计阶段。文档不能代替运行时事实,
运行状态也不能代替设计判断。
1. 先建立最小合同
选择 Create、Edit 或 Diagnose/Audit。Diagnose/Audit 默认只读,除非用户同时授权
修复。开始制作前,把以下字段写入 Task State 或等价工作记录;只写会改变结果的内容:
primary_domain: 一份主要领域 Skill
natural_medium: 用户实际需要的介质与可编辑母版
consumer: 实际接收、阅读、操作或制作产物的人/软件/设备/流程
target_contexts: 尺寸、设备、状态、观看或生产条件
required_outcomes: 用户必须取得的内容、行为与输出
non_goals: 未承诺、不可验证或不应伪造的范围
acceptance_checks: 每项明确要求对应一个可观察检查
HTML、SVG、图表、地图、控件或动画只是实现形式,不能决定主要领域。若移除某领域的 核心对象、关系或任务价值后产物失去意义,该领域才是主要领域。
既有身份盘点(合同的一部分)
产物有明确主体(产品、项目、组织、活动、人物)时,合同多一行 identity_inventory,在形成任何方向前填好:
到主体自己的官方出处——用户给的材料、代码仓库(README banner、图标目录)、官网 favicon / og 图、代码托管与
社交平台的组织头像(GitHub 固定可取 https://github.com/<org>.png)——逐一查看已经在用的标志、字标、色、字、
图像,记下文件与来源。判定只看像素不看格式:banner 里的字标、位图、截图都是既有标识,"没有 SVG"不等于"没有"。
web_fetch 只回文本,图像用 exec 下载进任务目录再 read_file 查看。
结果只有两种,没有中间地带:
- 找到 → 必须用它:按
references/svg-and-vector.md「Existing marks: three rungs」取用——先找真文件,再从纯色底 原图色键抠出(简单平面标再描 SVG,渐变 / 立体 / 多色标就用抠出的 PNG),只有没有纯色底来源或原图太小时才用 edit 重生成并与原图并排比对;不重画、不另造、不"优化";重做只在用户明说"重新设计 / 换标"时发生,"旧视觉可替换"是模型 自封的分类,不算授权。 - 没找到 → 必须设计出来:标识槽位不留空、不用纯文字或占位顶替、不以"用户没给"跳过;新标识走领域 Skill 的 生成 → 描摹流程,并在 README 写明它是本次新建。
主体的标识与其上级 / 出品方的标识分两层,各归各位:署名位("by X"、页脚、开源角标)用出品方的官方标,主体位
不借出品方符号;主体只有字标没有符号时,favicon / 头像优先直接提取已有字形并注明来源。
直接提取可以裁切、等比缩放、适配画布,不能增造轮廓。若需要新形状,转品牌 Skill,以已有品牌资产作为
image_generate(images=[...]) 的参考生成/编辑候选,再从选定母图矢量化;不由模型手写几何替代。
2. 使用轻量工作状态,而不是完成度叙事
Create 与建立新方向的 Edit 可使用以下状态组织工作。模型可按任务规模合并或跳过确实 不适用的状态,不为走流程制造文书或额外迭代:
CONTRACT
→ REFERENCE_LOCKED
→ VISUAL_THESIS_LOCKED
→ MASTER_ASSET_LOCKED
→ REPRESENTATIVE_FRAME
→ DIRECTION_ACCEPTED | DIRECTION_PROVISIONAL
→ FUNCTIONAL_BUILD
→ SURFACES_CLOSED
→ FINAL_VERIFIED
→ DELIVERED
CONTRACT:第 1 节字段成立,来源、假设与非目标分开。REFERENCE_LOCKED:用户参考、品牌/平台约束或实际观察的生产标杆已转成少量可见 不变量;模型生成的理由仍是候选假设。当方向依赖模板、标杆、品牌或用户参考时,必须记录 实际来源帧、可观察关系、允许迁移轴、不可迁移项、实现目标与终态验证目标;名称和风格标签 不算参考证据。VISUAL_THESIS_LOCKED:主要领域或 companion Skill 要求的视觉命题已写明具体世界、张力、 三秒记忆点,以及它在每个顶层可见区块或页面族中的最终像素落点;形容词、题材联想和只列 少数亮点不算锁定。无需主题性视觉的非 Web 产物或纯工作面在合同中记录为不适用,不伪造状态。MASTER_ASSET_LOCKED:需要主视觉、主场景或其他主导资产时,已选唯一 route、真实取得并查看 母版,锁定语义工作、版面接口、裁切和真实性边界。内容型/营销型 Web 依 companion Skill 要求 在布局前完成主视觉,并为每个主要页面族锁定dominant_background / integrated_visual_field / content_first之一、资产 lineage 与最终证据;占位图不能进入此状态。REPRESENTATIVE_FRAME:用真实内容或明确标注的确定性 fixture,先做一个决定成败的 目标画面或等价终态;不要先铺完整页面、状态和文档。参考合同逐条指向当前画面位置,主要 图像角色使用已经路由并实际取得的资产,不用占位图、手写 SVG 或 CSS 装饰先定版。DIRECTION_ACCEPTED:用户或独立 reviewer 对当前帧和明确范围给出通过。DIRECTION_PROVISIONAL:独立判断不可用但运行模式允许继续;必须标记SELF_REVIEW_ONLY,不能宣称独立视觉通过。FUNCTIONAL_BUILD:方向成立后才扩展合同要求的功能、状态、尺寸与异常路径。SURFACES_CLOSED:每个可见区块、页面族或内容单元都以真实内容完成职责、层级、细节和适用 目标环境检查;所有真实控件与可能被理解为交互的视觉信号均已逐项归类,在目标消费者中兑现并 验证,或改成明确的静态表达。代表帧、构建成功和整幅缩略图不能代替逐区结账。FINAL_VERIFIED:最后一次可见修改之后已重新构建,并在真实消费者中检查当前输出;依赖 参考的任务再次逐条结账可观察关系,未落实项只有硬约束证据才能偏离。DELIVERED:请求的母版、派生物、入口与限制均已交付;发布或 canonical 不从本阶段推导。
小范围 Edit 可从受影响的最早阶段进入。Diagnose/Audit 只执行“复现 → 证据 → 原因 → 影响”,不建立制作阶段,也不为取得更好看的证据修改源文件。
这些状态是模型的工作协议,不是 Runner 的审批流。Runner 只记录可观察事实,不根据 审美判断阻止模型推进;模型自主决定何时推进,但不得虚报没有发生的参考检查、review、 渲染或验证。文件存在、构建成功、Gallery 可打开和作者声明也不能替代相应事实。
3. 视觉方向只接受有权限的证据
按以下顺序解决冲突:
用户当前要求
> 用户当前接受的参考与 taste profile
> 品牌、平台、数据、制造或其他权威约束
> 主要领域 Skill
> 前端或格式 companion Skill
> MODEL_HYPOTHESIS
实际看见之前,不得凭产品名、品牌印象、流派名称或模型记忆声称参考具有什么视觉 特征。记录 3–6 个能从最终画面验证的不变量即可;不要写长设计故事为任意配色、装饰或 例外授权。没有可查看参考时,从任务、内容、消费者与硬约束提出最低假设的方向,并披露 证据缺口;“克制中性”不是可跨任务套用的默认皮肤。
方向决定之前,完成图鉴对照(强制,适用于一切视觉产物任务):
- 按
$review-against-ai-patterns读取图鉴索引与标本,并在工作区根目录(交付目录之外)建立ANTI-SLOP-CHECK.md。 - 质感门槛:凡目标画面离不开材质与光影词(金属、玻璃、体积光、景深、渲染)——暗场硬件 渲染 hero、产品效果大图、品牌标识质感呈现稿、电影感氛围图——必须用图像生成工具产出; 用 CSS 渐变、发光弧线、抽象几何手写模拟这一档质感即图鉴 D 组病。判据与生成纪律见 素材与图像生成。
- Web 主视觉门槛:内容型/营销型 Web 依
$build-polished-visual-frontends先完成VISUAL-THESIS和主视觉母版,查看原图后才布局。每个主要页面族在布局前声明视觉角色、资产 lineage 与任务理由;默认由同一视觉家族的大背景主导开场,只有密集阅读、持续操作或事实核验 会被大背景实质妨碍时才选择其他角色,任何角色都不能退回默认模板。
视觉信号、权重与背景边界
- 色条、顶边/侧边、标题旁竖线、局部边框、角括号、伪元素轨道和图标外框等强信号,必须对应
稳定的选择、状态、进度、尺度、真实分组,或已锁定且跨消费者复现的身份语法。“强调重点”、
“增加层次”和“显得精致”都不是职责;一次性的
border-left即使被命名为 guardrail 也不能 自证语义。删除后不影响理解、操作或身份识别,就删除。 - 视觉面积、对比和位置按主要任务与语义重要性分配,不按“需求里要求出现”分配。来源、限制、 provenance 与 caveat 应邻接其影响的 claim 并保持可读;除非风险本身就是主要任务,不把它们升格 成全宽巨幅横幅,也不在多个区块重复争夺注意力。
- 大背景负责建立页面族开场或作品世界,不要求每个后续区块重复铺图;后续可用同源资产、排印关系、 结构或交互维持连续性。CSS 可以完成布局、排印、必要分隔、真实状态反馈,以及真实图像的裁切、 遮罩和可读性 scrim;不能凭渐变、边框或伪元素另造装饰资产,也不能退化成“背景图 + 半透明文字板”。
4. 按能力选择真实工具
先列能力,再选软件。优先使用现有合格系统、领域专业引擎和可编辑原生格式;只有真实 能力缺口才自制替代。工具名称、安装记录或依赖存在不等于使用:至少要有真实调用、当前 母版或状态、可重复构建/导出,以及消费者结果。
代表画面前按素材与图像生成先定义整页图像角色,再为每个图像与 icon 槽位选择
truth_asset / standard_symbol / generated_visual / exact_graphic。分类依据是资产用途,不是轮廓复杂度或交付格式:
承担主体识别的 Logo、品牌头像、产品标识归品牌 Skill;已有母版是 truth_asset,需要新设计的符号是
generated_visual。只有搜索、关闭等标准操作含义才属于 standard_symbol;圆和线组成的品牌标志
也不是 exact_graphic,要求 SVG 只决定交付格式,不授权手绘。需要审美绘制的 hero、场景、
插画、纹理、物件和表现型 icon 默认由 image_generate 生产;标准功能 icon 来自既有系统或一个
成熟家族;精确数据、文字、坐标与拓扑交给专业工具。没有 manual_svg 或 decorative_css 降级
路线,生成工具不可用不授权模型用 SVG、Canvas 或 CSS 模拟。
调用 image_generate 时传 output_dir=<任务目录>/assets/generated,成图直接落在任务目录内,不经过工作区级
generated/;"工具会写到授权目录之外"不是不生成的理由。
每项资产记录它的 semantic_job 及与背景、排印、结构或交互中至少两项的关系;同系列资产另填
asset_family_id / master_asset / derived_from / final_size_check。同系列子素材默认从已查看的主视觉
或家族母图用 image edit 派生,不以互不相关的 prompt 分别抽卡。表现型 icon 需要矢量交付时,
使用专业工具从已生成母版转换,不由模型重画。
仅在会增加消费者合同时读取相关参考:
- HTML 与 Canvas
- SVG 与矢量
- 数据可视化
- 固定媒介
每类事实只有一个权威 owner;截图、预览、索引、导出和 Viewer 副本都是派生物。不要 直接修改派生物来掩盖母版问题。外部 HTML/SVG 先按主动内容检查,再在隔离环境渲染。
5. 失败必须返回最早失效步骤
只使用以下返回方向,不通过增加功能、文档或装饰绕过失败:
- 需求、消费者、介质或领域错误 →
RETURN_TO_CONTRACT - 标杆不可见、证据不支持方向或设计系统选择无依据 →
RETURN_TO_REFERENCE - 构图、层级、字体、色彩、主要对象或系统语言失败 →
RETURN_TO_FRAME - 命令、状态、专业语义、导出、目标环境适配或异常路径失败 →
RETURN_TO_IMPLEMENTATION - 任一区块/页面族未达成品状态,或视觉示能与真实行为不一致 →
RETURN_TO_IMPLEMENTATION - 最终证据早于最后修改、入口错误或消费者不一致 → 重新构建并回
FINAL_VERIFIED
保留仍然有效的母版与检查,不从头重做,也不扩大用户范围。
6. 最终验收与诚实交付
工程检查只能证明工程基线。所有人类可见表面必须检查与当前构建一致的最终像素;原生 或非视觉消费者则检查领域定义的可打开、可编辑、可查询或可执行终态。整幅缩略图只证明总体 轮廓和节奏,不能证明下方区块、次级页面、文字、控件或边界已完成;这些表面必须在可读尺度下 逐一检查。
交互产物先沿主路径验证“真实输入 → 状态变化 → 可见结果 → 恢复或导出”,再遍历所有可见示能。 按钮轮廓、链接样式、chevron、hover/focus、selected/current、可点击卡片和 disclosure 都是行为 承诺;每个实例必须在真实消费者中兑现,或移除该暗示。重复组件可共用一份视觉状态证据,但其 每个目标、链接或数据实例仍需实际遍历,不能以抽查代替完成。
独立 review 只覆盖它实际检查的 claim 和 build。作者自检统一记录
SELF_REVIEW_ONLY;普通交付可以带此限制完成,但不得写成独立 PASS、用户验证、
现场有效或专业签审。
若任务确实要求 promotion、release、canonical 或 positive-pool 记录,再按需读取 证据治理。这些记录由 Runner 或明确授权的流程拥有, 不能从 Skill gate、文件数量、review 调用或 Gallery 选择自动推导。保留该兼容语义是为 现有领域 Skill 服务,不要求普通制作任务生成治理文书。
交付时只说明:权威母版、主要派生物、真实使用的工具、测试消费者与状态、assurance、 已知限制。不要用“高完成度”“像某品牌”“专业级”代替可检查事实。
最终检查
- 主要领域、自然介质、最终消费者、结果与非目标清楚。
- 代表帧先于完整扩展,方向状态与 review 来源真实;依赖参考时,代表帧与终态帧均逐条落实 可观察关系或记录硬约束偏离。
- 主要图像角色与 icon 槽位均有唯一资产 route 和
semantic_job;表现型精致视觉没有被手写 SVG、Canvas 或 CSS 装饰替代,生成资产有真实调用、原图查看和最终消费者引用。 - 每个强视觉信号有稳定职责,注意力强度与任务重要性相称;来源与限制贴近受影响的 claim, 大背景只在其承担世界或开场职责处使用,CSS 没有凭实现属性自证语义。
- 适用内容型/营销型 Web 时,视觉命题、主视觉前置、页面族视觉映射、子素材家族和正向细节 门槛均已按最终像素结账;每个区块/页面族均有可读尺度证据,所有视觉示能均有真实操作结果,不用 首屏、整页缩略图或反模式自检代替整件产物的完成度。
- 失败返回最早失效阶段,没有用更多功能或文档掩盖视觉问题。
- 最后一次修改之后生成并检查了当前消费者证据。
- 交付内容和声明没有超过真实工具、行为与 review 覆盖。