SuperAPI AI 工具集

dpai-craft

设计与创作

查看项目

更新于 10-16 00:29

技能介绍

用途:对已有界面做视觉与交互层面的打磨,在不改变产品方向、技术栈、组件库、设计令牌、密度与既有视觉语言的前提下,通过小幅且有依据的改动让界面显得更「刻意」。适用于 UI 打磨、审查与实现请求。

主要能力与流程:先明确目标屏幕、组件、流程与状态;在评判前阅读项目的界面规则、设计令牌与邻近组件;当视觉或交互行为重要时检查渲染结果,并对照源码定位每个可见问题背后的实现。优先修复损坏或不清晰的交互状态,再做装饰性打磨。复用现有组件与令牌,仅当项目没有合适原语时才引入新原语,并在项目既有样式系统中实现。需在存在时验证 default、hover、focus、active、disabled、loading、empty、error、selected 等状态。

参考文件:任务相关时只读对应文档——surfaces-and-icons.md 涉及层次、边框、圆角、图像与图标一致性;motion-and-states.md 涉及过渡、反馈、减少动效与状态完整性。

质量要求:优先建立单一清晰视觉层次;用边框表达结构与状态,仅在高度有意义时用阴影;嵌套圆角保持视觉同心;几何居中不当时按视觉对齐图标;每个界面保持单一图标族与一致的描边语言;明确写出过渡属性,禁止 transition: all;动效结束后保留静态提示,动效不能是唯一信号;保持焦点可见并保留原生交互行为;避免仅为「看起来经过设计」而添加渐变、玻璃、发光、过度圆角或动画。

DesainPakeAI 项目:当用户明确要求 DesainPakeAI MCP 工作时,先调用 get_project_context 并保留其 revision;重大视觉改动前阅读设计质量指南;保留公开组件 props 与 data-node-id、data-component、data-part、data-action 取值;变更后运行 verify_preview 并完成 MCP 要求的页面流程。

审查与实现:把审查、审计或点评类请求视为只读;按根因逐条报告,必要时同时给出源码与渲染行为证据,不把对另一种审美的偏好当作缺陷。被要求实现时,做最小且连贯的改动,验证后总结结果及无法检查的状态。官方文本暂未提供。