构建高完成度视觉前端

核心目标

让用户直接完成任务，让视觉、交互和专业对象来自同一组清楚的决定。让成熟工具解决已经 解决的问题，把模型的判断留给当前产品独有的任务、构图和体验。

遵循三个原则：

1. 任务决定形态。 不因交付是 HTML 就默认应用壳、dashboard、landing page、卡片网格或 16:9。
2. 一套视觉语言。 控件、导航、列表、面板、专业画布和反馈必须像同一个产品。
3. 标准能力交给工具。 模型主要设计任务模型、工作顺序、整体构图和必要的连接层。

主要领域 Skill 决定内容模型、专业语义和领域门槛；visual-artifact-design 决定共享流程与 证据；本 Skill 只负责浏览器中的视觉方向、技术组合、工具边界和最终像素。用户当前要求与 已接受参考优先，其次是既有品牌、平台和领域约束。题材联想不能为任意颜色或装饰提供理由。

什么算好，八条判据（后文以代号引用）：

• J1 主角与胆量：每个交付面能指认主角时刻，且有一个超出安全默认、能一句话说出的决定。
• J2 删测：删掉后页面不变差的元素，必须删。
• J3 一句话可述：整个产物能被一句话描述（“这是一张……的页”）；说不出即没有方向。
• J4 具体胜过修辞：每个宣称可验证；用事实、真数字和真对象替代形容词。
• J5 主视觉先行：内容型／营销型 Web 先用真实成图锁定世界、空间与取景，再围绕它排版； 不允许先完成模板图槽，再用一张可拆换的图补空。
• J6 细节成系统：字体、标点、边界、图标、状态、运动与目标环境适配共同实现同一视觉命题； “没有命中反模式”不等于已精致。
• J7 逐区成品：每个可见区块和页面族都有明确职责、任务特有的内容关系与完成态；不能精修 首屏后，把其余部分留成默认组件、文字倾倒或模板余料。
• J8 示能诚实：任何看起来可点击、可选择、可展开或可切换的东西都兑现相应行为与反馈； 静态内容不借用按钮、选中态、悬停态或可点击卡片的视觉暗示。

1. 先读懂任务，再决定画什么

新建方向或大改前，先写一张短决策卡：

任务: 谁在什么场景完成哪一件主要事情
主要对象: 页面中真正需要看、读、编辑或操纵的对象
自然形态: 页面、工作台、长文、画布、地图、图解、游戏或其他形态
领域惯例: 该领域真实从业者交付此物时的成品形态与表达习惯；偏离惯例必须写出理由
参考与偏好: 实际看见的参考，以及用户明确喜欢和拒绝的特征
表达强度: quiet | editorial | expressive
视觉系统: 哪一套成熟设计语言负责字体、控件、表面、图标和反馈
专业引擎: 哪个领域工具负责图表、地图、排版、媒体、画布或其他核心对象
衔接合同: 两者如何共享 token、状态、字体、颜色、焦点、图例和导出
目标画面: 最能决定方向的尺寸、内容密度和关键状态

真实参考依次来自用户提供的画面、已接受的同项目产物、实际生产产品和成熟公共系统。参考先 回答领域惯例：该领域真实从业者交付这类产物时，成品长什么样、用什么表达；产物先像该领域的 真实交付物，再谈风格取向。必须看到真实画面再提取 3, 6 个可观察特征；品牌印象、文章描述和 模型记忆不算视觉证据。需要自行 研究时，只查看覆盖主要风险的少量真实工作态、密集态和合同所列目标环境，不照搬独特版式、资产或 文案。按需读取审美路由。

表达强度由任务和参考决定：

强度	常见任务	默认表现
quiet	产品、数据、地图、技术工作	让主要对象与状态主导；层级来自比例、字重、间距和关系
editorial	内容网站、字体、演示、出版	用排版、图像角色、节奏和叙事顺序形成方向
expressive	品牌、营销、插画、游戏	可使用强色彩和动效，但每个强信号都承担传播、叙事或玩法职责

内容型／营销型 Web 的前置参考分流