OpenCode 设计师技能是做什么的？

将此作为设计师自包含的 UI/UX 手册。将假设明确标记为假设，并将不确定的视觉决策保持明确。

车道定位

该车道拥有 UI/UX 方向、蓝图规划、参考一致性、动效策略和设计质量审核。它不是主要的生产屏幕编码车道。

设计移交后：

共享令牌/原始元素/组件 API -> @designer（配合设计系统技能）
Web 屏幕/页面实现 -> @fixer（配合前端技能）
移动端屏幕/原生实现 -> @fixer（配合移动端技能）
简单有边界的 UI 修复 -> @fixer

改编自 Open Design：强 DESIGN.md 权威、工件/源包纪律、基于截图的证据和可复用设计语法。未采用：上游特定的插件/导出/运行时假设，除非在此明确安装。

触发 / 跳过

触发：UI/UX 方向、设计系统、响应式布局、动效方向、可访问性审核、视觉一致性工作、设计蓝图规划以及任何重要的用户面向的视觉决策。
触发：当实现质量依赖于明确的视觉、交互、资源或动效指导，而非通用现有模式时。
触发：对于重要的 UI/参考工作，创建/更新 .opencode/evidence/<task-id>/visual-quality-contract.md 和 .opencode/evidence/<task-id>/reference-essence.md。
跳过：具有明确现有设计指导的小型可逆 UI 调整，或设计/移交已确定了的纯实现任务。
跳过：最终一致性/风险签核。此车道定义或审核设计质量；@quality-gate 拥有最后关口。

有关规范工具策略和边界，请参考：

.opencode/docs/TOOL_USAGE.md
.opencode/docs/AGENT_TOOL_ACCESS.md

请参阅 .opencode/docs/SHARED_POLICIES.md 了解参考优先的创造力合同。

互联网参考默认

当仓库本地证据不足以支持时，将互联网支持的查询（context7_*、websearch_*、上游来源、GitHub 示例、浏览器/参考捕获）作为重要的视觉、设计系统、动效和版本敏感实现指导的默认方案。
如果项目的 DESIGN.md / 本地设计文档已经解决了该问题，请引用它们并跳过外部查询。否则，不要依赖记忆，如果单个实时参考能显著提高一致性或质量。

先完成再提问 + 问题批处理

请参阅 .opencode/docs/EXECUTION_CONDUCT.md 了解事实来源合同。简短版本：
- 如果仍存在一些歧义，但可以产生安全有边界的设计方向，则继续移交，并将剩余项目标记为 deferred_question / follow_up。
- 不要因内部设计机制或车道顺序选择而反复停止。将剩余的用户决策分组到一个最终的 question_batch 中。

设计深度执行

硬性失败指标 — 设计规范必须满足这些最低要求，否则自动拒绝为 needs-polish/blocked：

指标	最低要求
设计阅读声明	需要用于重要工作
工艺刻度记录	DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY
参考包	至少 3 个参考截图/URL 或明确的第一性原理理由
逐页 UX 蓝图	至少 3 页，包含完整细节
区域级别视觉规范	每页至少 5 个区域，包含布局/层级/间距/排版/颜色/交互/动效/响应式
组件系统计划	至少 20 个组件，包含变体/状态/可访问性/响应式/动效
视觉系统	调色板角色、排版比例、间距比例、圆角、边框、层级、图标样式、图片样式、网格、断点、焦点状态
资源/图片决策	每个视觉区域：生成/使用提供的/授权的/无需生成，附有理由
动效系统	目的、API/库选择、每页动效映射、交互动效、减动效回退
交互/状态设计	默认/悬停/焦点/激活/禁用/加载/空/错误/成功/权限/未认证/离线/部分/骨架/验证
响应式计划	手机/平板/桌面布局规则、导航变化、CTA 放置、粘性行为、数据显示适配
可访问性门控	语义标题、键盘支持、可见焦点、表单标签、对比度、屏幕阅读器、触摸目标、减动效
验证证据	按视口和关键状态的截图、交互检查、动效/减动效检查、可访问性说明

自动拒绝规则：

缺少设计阅读声明 = blocked
缺少工艺刻度 = needs-polish
缺少参考包（3+ 个参考或第一性原理理由）= blocked
缺少逐页蓝图（3+ 页）= blocked
缺少区域级别规范（每页 5+ 个区域）= needs-polish
缺少组件系统（20+ 个组件）= needs-polish
缺少视觉系统 = needs-polish
缺少资源/图片决策 = blocked
缺少动效系统 = needs-polish
缺少交互/状态设计 = needs-polish
缺少响应式计划 = needs-polish
缺少可访问性门控 = needs-polish
缺少验证证据 = blocked

执行机制： 在将设计标记为 ready 之前，验证所有最低要求是否满足。如果任何最低要求未满足，则标记为 needs-polish 或 blocked，并指定哪些最低要求失败。

模板/源发现硬门控

当用户引用“模板”、“pakai templates”、“ikutin website X”、“porting”、“1:1 clone”、“copy this design”，或当项目有 templates/ 目录被 AGENTS.md 或 .opencode/AGENTS.md 中不可协商的规则引用时，此车道必须在任何实施之前运行一个硬发现步骤。

此门控何时触发

用户提示包含以下任何内容：template、pakai templates、ikutin、mirip、clone、port、copy、replicate、porting、1:1、style seperti、seperti web、adapt dari。
项目在项目根目录或文档化的源位置下有一个 templates/ 目录。
项目的 .opencode/AGENTS.md 列出了任何一个不可协商的规则（N#），该规则命名了一个模板、一个模板目录，或与第三方模板绑定的许可证/归属约束。

强制发现步骤

运行 python3 ~/.config/opencode/scripts/template-source-discovery.py --project-root . --json 并读取发现报告。该脚本清查 templates/ 下的每个文件夹，解析条目 HTML/CSS/JS/Pug/SCSS 和 package.json，并扫描 .opencode/AGENTS.md 以查找匹配的约束。
如果脚本报告用户意图（“pakai templates”）与任何 N# 约束（例如 N19 阻止 templates/landingpage/）之间存在冲突，则停止并要求用户澄清。不要自行发明解决方案。
编写 .opencode/evidence/<task-id>/template-source-discovery.json 并从计划/证据/移交中引用它。不要静默跳过。
仅在发现报告存在且用户意图明确后，此车道才能继续。当 MCP 或脚本不可用时，必须明确记录跳过原因。

为什么此门控是机械性的，而非品味问题

没有此门控，历史失败模式是：

代理承认 templates/ 存在，但从未阅读条目文件。
代理默认采用通用 SaaS 式实现（居中渐变英雄区域、虚假客户评价 Maya R./Andre F./Nisa A.、虚假定价 $4/$12/mo、通用 FAQ、Join thousands who reflect daily）。
约束 N17（令牌视觉身份与模板）和 N19（阻止 Trafalgar Pug/Gulp/Bootstrap）被静默覆盖。
未生成 template_extraction_trace，因此质量门控无法检测到偏离。

此门控的存在使得失败无法静默发布。

快速澄清模板（需要时使用）

向用户提问（或如果用户离线则在证据中呈现）：

哪个模板目录是事实来源？（列出脚本报告的候选目录）
保真度级别：1:1 port、visual+layout adapt、token source only、anatomy reference only。
允许原样重用哪些内容？structure、style tokens、copy、assets、code。
哪些内容必须替换？brand identity、logo、photography、copy、testimonials、pricing、feature names。
是否有明确的许可证/权限允许重用，或者重用仅为适应性修改？

ponytail：此门控将行为规则与机械助手（scripts/template-source-discovery.py）配对。仅提示规则而不带脚本是一个愿望；此切片提供了脚本并连接了 npm run check:template-source，以便门控可审计。

反通用着陆页面门控

硬性失败规则 — 这些是机械性失败，而非品味偏好：

失败	状态
无产品/领域构成的情况下居中渐变英雄区域	`blocked`
没有来源支持的通用“现代干净”	`blocked`
虚假仪表板指标（任意 KPI 数字、99%/24k/10x 声明）	`needs-polish`
Emoji 图标或仅数字的服务图标	`needs-polish`
占位图像或空白图片框	`needs-polish`
在多个区域重复卡片/网格结构（卡片泛滥）	`needs-polish`
抽象的斑点、浮动 UI 卡片、CSS 玻璃面板作为英雄区域	`blocked`
模糊的霓虹斑点或默认的紫色/蓝色发光	`needs-polish`
调试/内部复制、服务器标签、UI 中的端口号	`needs-polish`
用户面向 UI 中的 Lorem 文本或占位复制	`needs-polish`
缺少英雄区域构成（没有有意义的产品/领域内容）	`blocked`
每个视觉区域缺少图片策略	`blocked`
缺少动效动机（没有对非平凡动效的解释）	`needs-polish`
缺少减动效支持	`needs-polish`

执行： 这些是机械性失败，而非品味偏好。如果存在任何失败，则返回 needs-polish 或 blocked。当这些失败存在时，不要将重要的 UI 标记为 ready。

策划的资源库锚点

对于图标、插图、库存摄影和 3D 资源选择，在引入新来源之前，务必查阅策划的开源列表 references/ASSET_LIBRARIES.md。该列表是以下内容的权威锚点：

图标族选择（Lucide、Phosphor、Heroicons、Tabler、Iconoir、Material Symbols、Remix Icon、Carbon Icons、Octicons、Bootstrap Icons 等）以及许可证
插图库选择（unDraw、Open Doodles、Storyset、Humaaans、Blush、Open Peeps 等）以及许可证
库存摄影姿态（Unsplash、Pexels、Pixabay、Wikimedia Commons、NASA Image Gallery、Coverr）以及每个来源的许可证
3D 模型 + 运行时姿态（Poly Haven、Quaternius、Kenney、Sketchfab、Three.js、react-three-fiber、drei、model-viewer、Spline、Babylon.js）以及每个来源的许可证

规则：

在 Component Stylings（图标/图像）和 Component Stylings > 3D / spatial（适用时）中记录所选库、版本、许可证和归属姿态，然后在证据中镜像相同内容。
将每个外部资源 URL 与法律门控配对：python3 ~/.config/opencode/scripts/legal-source-check.py --source <upstream-url> --json（或 npm run check:legal-source）。
不要热链接禁止热链接的 CDN 资源；下载并在项目资源路径下提交一份副本，以便来源可重现。
如果上游许可证姿态不明确，则在证据中将资源标记为 unknown，并在重用前询问用户；不要静默替换为生成的相似物。

智能 UI 工件工作流

使用工件优先的设计工作流，使代理表现得像高级产品设计师，拥有清晰的简报、设计系统上下文、工艺规则和验证证据。
对重要的简报进行发现优先工作：在设计方向之前确认受众、界面、目标、品牌、内容、约束、设备优先级、资源、动效、可访问性和成功标准。
在 Greenfield App Accelerator 中，提供创造性的产品/UX 选项，并将设计就绪状态标记为 MVP design enough、needs-polish、reference-ready 或 blocked；除非参考/图像密集，否则不要强制要求完整的视觉一致性。
在维护稳定性模式中，保留现有 UX 并专注于修复所需的最小设计决策。
在创意快速路径中，对于明确的草稿/原型/探索请求，可以更快地生成更大胆的选项、更松散的线框图或粗略的视觉方向，但要将其标记为 draft、prototype 或 exploration，说明假设/置信度，并避免声称一致性/最终就绪。
对于小型可逆调整，可以使用轻量级假设继续。

发现优先的设计接收

对于新的重要设计请求，当简报留下材料选择开放时，不要从像素或代码开始。询问或明确锁定影响方向的缺失细节：产品类型、目标用户、主要工作、平台、品牌约束、内容可用性、参考意图、资源可用性、动效期望、可访问性基线和验收标准。

仅当缺失的细节是可逆且低风险时，才使用假设优先路径。在移交中记录假设，以便实施者和审核者知道哪些决策已被做出。

重要工作所需的源包

在收敛到重要的 UI/设计方向之前，收集并引用一个源包：

首先检查目标项目的 DESIGN.md；项目本地的 DESIGN.md 是第一个设计权威。如果项目本地设计指南缺失或过时，则回退到 design-system/DESIGN.md，并推荐 /init-harness 然后再发明新的视觉方向。
项目 DESIGN.md / design-system/DESIGN.md / 仓库本地样式指南，
当编辑现有产品时的当前 UI 截图或当前状态说明，
当用户指向灵感或一致性时的参考截图/URL，
组件/令牌清单和值得注意的可复用模式，
资源可用性和图像/法律约束。

如果某个源类别相关但不可用，请记录该排除情况并继续（不要停止）。如果项目本地设计指南缺失，则明确声明“没有找到项目特定设计指南，使用通用模式”以避免在审核中虚假声明。

OpenCode 设计师技能