From helloagents
Enforces UI design contracts from DESIGN.md/plan.md and supplements baseline for explicit UI workflows, activated project visual changes, design system refactoring, and visual verification with code mapping and acceptance checks.
npx claudepluginhub hellowind777/helloagents --plugin helloagentsThis skill uses the workspace's default tool permissions.
本 skill 不是 UI 质量的唯一来源。当前已加载的 HelloAGENTS UI 质量基线负责所有 UI 任务的基础水准；本 skill 在显式 UI 工作流和复杂 UI 任务中，补充更明确的契约执行、实现映射与视觉验收。
Transforms approved specs into reviewable UI design documents for pages, components, interactions, and frontend surfaces. Applies atomic design, design tokens, WCAG AA, Nielsen heuristics, and information architecture. For unapproved designs or hf-ui-review revisions.
Creates distinctive, non-generic UI designs with aesthetic direction and wireframes, or polishes existing UI code post-implementation. Use for UI design, layouts, wireframing, cleanup, or componentization.
Produces distinctive production-grade UI for components, pages, or visual interfaces. Handles screenshot-driven iteration for visual complaints.
Share bugs, ideas, or general feedback.
本 skill 不是 UI 质量的唯一来源。当前已加载的 HelloAGENTS UI 质量基线负责所有 UI 任务的基础水准；本 skill 在显式 UI 工作流和复杂 UI 任务中，补充更明确的契约执行、实现映射与视觉验收。
.helloagents/ 在本 skill 中统一按项目级存储路径理解：会话证据使用当前 state_path 所在目录下的 artifacts/*.json；若 project_store_mode=repo-shared，DESIGN.md 与方案包按当前上下文中已注入的项目知识/方案目录解析。
已进入显式 UI 规划/实现/验证路径、全局模式中的 UI 任务，或当前项目已激活且任务涉及整页新建、跨多个组件的视觉重做、设计系统改造、需要截图验收的界面任务时，读取本 skill。 标准模式未激活项目中的普通 UI 请求，仍只受当前已加载的 HelloAGENTS UI 质量基线约束；修复 bug、调整文案、改业务逻辑等不涉及视觉变更的任务，不读取本 skill。在已有设计系统中工作时，保留已建立的模式、结构和视觉语言。
进入 UI 相关的规划、实现、验证时，按以下顺序做设计决策：
plan.md 或 PRD 中已确认的 UI 决策.helloagents/DESIGN.md（按当前项目存储模式解析）plan.md / PRD / DESIGN.md 中已确认的 UI 决策视为强约束，而不是建议contract.json 启用 ui.styleAdvisor，复用当前会话 artifacts/advisor.json 记录设计方向复查证据；若启用 ui.visualValidation，用当前会话 artifacts/visual.json 记录视觉验收证据.helloagents/DESIGN.md（按当前项目存储模式解析），不要把一次性页面细节全部写成项目级契约先理解上下文，再做出大胆且有意图的设计决策：
执行顺序要求：
.helloagents/DESIGN.md（按当前项目存储模式解析）时，进入真实 UI 任务先读取它，再展开方案或实现plan.md / PRD 中的 UI 决策为最高优先级.helloagents/DESIGN.md（按当前项目存储模式解析）不存在时，先按 templates/DESIGN.md 创建最小设计契约（至少覆盖产品表面、设计 token、组件与模式、状态覆盖、无障碍要求、禁止事项），再继续大规模实现DESIGN.md 的任务，基于以上规则，结合任务需求和项目上下文做出设计决策并执行以下规则关于构图和信息架构，按页面类型适用。
第一屏构图：
Hero 区域：
页面叙事：
选择有表现力、有目的的字体。展示字体与正文字体配对要有对比（衬线+无衬线，或粗+细）。避免默认字体栈。优先考虑可变字体（减少请求数、支持精细调节）和当前流行的高质量字体。
选择清晰的视觉方向，用 token 体系建立一致性。大胆的主色 + 锐利的强调色，优于胆怯的均匀分配。暗色主题使用降低饱和度的色调变体，不是简单反转。优先使用感知均匀的色彩空间（如 OKLCH）生成和谐的色阶。
有意识的空间运用。非对称、重叠、对角线流动、破格元素都是好工具。建立一致的间距系统，保持全局节奏。优先使用目标平台当前最新的布局能力实现响应式设计。
用动效创造存在感和层次，不是噪音。一个精心编排的入场动画（带交错延迟）优于散落的微交互。时长参考：即时反馈 < 100ms，微交互 150-300ms，复杂过渡 ≤400ms。至少 2-3 个有意图的动效。动画必须可中断，不阻塞用户输入。支持减弱动效偏好设置。优先使用平台原生动画能力，复杂场景再引入动画库。
不依赖纯色背景。渐变网格、噪点纹理、几何图案、透明叠层、戏剧性阴影、颗粒覆盖——选择匹配整体美学的手法营造纵深感。
每个异步操作必须覆盖四种状态：加载中、成功、错误、空数据。缺少任何一种都是交互缺陷。错误信息必须具体且可操作（说明原因 + 如何修复），不接受"出错了"这类泛化提示。
实现复杂度必须匹配设计目标。需要强表现力的界面，可以用更丰富的实现；需要克制的界面，就保持简洁和精确。不要为了效果堆效果，也不要为了求稳把设计做平，而是根据上下文做出意外但合理的选择——展现真正的创造力。
plan.md / PRD / DESIGN.md 决策与实现一致；新增稳定设计决策已同步回 DESIGN.md对以下维度各打 1-10 分，低于 8 分的维度必须迭代改进：
3-5 轮迭代后仍低于 8 分的维度，记录原因并与用户讨论。
如果有浏览器工具可用（Playwright MCP 等）：
ui.visualValidation.required=true，调用 scripts/visual-state.mjs write 写当前会话 artifacts/visual.json，记录 reason、tooling、screensChecked、statesChecked、status 与 summary无浏览器工具时，仔细审查生成的代码，确认样式、布局、动效的实现与设计意图一致。
若当前契约要求 ui.visualValidation.required=true，仍需用结构化结论调用 scripts/visual-state.mjs write 写当前会话 artifacts/visual.json，并明确标记所用 tooling 与已检查的 screens / states。