SuperAPI AI 工具集

web-design-director

设计与创作

查看项目

更新于 11-03 16:16

技能介绍

Web Design Director 是一项围绕网站与应用程序界面开展设计、实现与评审的技能。其核心目标是在真实界面中让产品“可理解、可用、视觉上具体”,即终端用户能以可理解的、可控的投入完成实际任务,同时界面保持预期的审美品质。用户的口味与产品优先级始终具有决定性,技能自身的评审不等于用户验收。

用途

该技能适用于需要视觉方向、信息架构与交互设计的界面工作,包括网站和应用程序界面。它明确区分工作模式:方向模式产出概念、粗略草图、方案或对比,按请求的保真度交付,不为了说明建议而提前写生产代码;评审模式检查所提供的页面、截图或代码,返回按影响排序、可执行的发现,有代码时引用确切文件行,无代码时只描述可见区域而不编造代码位置;构建模式创建或修改请求的界面、进行验证并展示结果。对“帮我改进这个页面”这类请求,在目标清晰时通常视为授权做相关、可逆的修改,而不必反复请求批准。

主要能力

技能从可观察的需求推导设计:确认用户、需完成的任务与可观察的成功定义,识别真实内容与操作、代表性长文本与数据量、现有行为、品牌决策、技术栈、设备与数据归属,并区分已验证约束与未知、假设。对工作流界面,它会追踪一个有代表性的完整用户任务,包括查找、理解、比较、决策、操作与确认,找出主要瓶颈与重复劳动,再分配空间与控件。它区分任务界面类型:营销页需要可信的阅读与决策顺序,工作台需要稳定工具与工作空间,素材浏览器需要识别、比较与检索,阅读页需要排版连续性。

在方向确定后,技能把方向翻译为可实施的选择:内容优先级、首个有用操作、阅读顺序与分组;布局关系、密度、对齐、留白与窄宽变换;字体角色、字体实际可用性、中英文回退、行宽与换行;颜色与对比角色,图片主体、裁切、位置与来源,图标一致性;以及字体、颜色、间距、边框、圆角、层次与动效等可复用令牌。它要求用代表性内容解决关键屏幕,检查构图并先纠正最大可见问题,再推广模式。

在交互层面,技能要求对决定产品价值的少数操作明确“触发→即时反馈→等待行为→成功的数据/结果变化→失败或取消恢复”,区分选择、焦点、导航与编辑,并在用户返回、重试、刷新或缩小视口时保留上下文。它提醒不要给每个控件都堆砌所有状态;可点击按钮必须真正执行其承诺的动作,仅弹出提示或样式变化不算证明。若数据或 API 为模拟,需说明边界,不得声称已持久化或已集成后端。

使用方式

技能按需加载自身运行知识:新识别、重大布局或视觉问题时参考创意方向文档;新方向、技术选型或实质实现前做研究;表单、导航、筛选、编辑、选择、对话框或异步工作流参考交互设计文档;玻璃、折射材质、动态背景、滚动叙事、Canvas 或 3D 参考材质与动效文档;实现或行为评审参考网页质量清单相关章节;方向对比与最终评审参考设计评分表。仅在用户提供或要求时,或项目明确将其作为设计来源时才使用 Figma,工具可用本身不构成引入 Figma、框架、生成图像或托管的理由。

在实现层面,实质构建会保留简短实现契约:涉及组件、令牌来源、状态归属、响应式变换、键盘语义、主要性能风险、验证用例与回滚方案,通常内部保留或写入项目现有工作记录。实现时保留用户编辑、已批准内容、路由与既有行为,复用当前技术栈,仅在成果值得成本与验证时增加依赖或重构。要求使用真实产品内容与素材,不得编造推荐语、客户标志、统计数据、能力、API 结果或进度百分比;常规界面打磨中,未明确要求生成图像时不应调用图像生成服务。

验证与交付

有浏览器时检查渲染界面,按改动匹配测试:所需宽度、代表性内容、主操作以及最相关的失败或恢复。对承载任务的界面,先用可见的操作路径完整执行相关端到端任务,再缩减为孤立控件断言。将渲染结果与实际设计契约及参考中学到的具体品质对比,定位竞争焦点、中文断行别扭、次要文字难读、选择误导、图片裁切错误、控件隐藏或结果过期等具体缺陷,修复并重复受影响检查。功能测试不能确立视觉区分度,效果存在也不能确立好构图。若用户否定审美结果,应撤回验收声明、诊断差距并依证据修正方向。

交付时以请求的成果为先:方向模式给出推荐设计与请求保真度的草图或具体布局及决定性权衡;评审模式按影响排序给出发现、证据与具体修正,并区分缺陷、假设与口味选择;构建模式展示已实现页面或预览,报告观察结果与未验证行为,并链接相关文件,报告不能替代页面本身。技能还要求区分声明:已实现;构建/运行时已检查;已查看渲染外观;交互已验证;集成/持久行为已验证;用户已接受,只记录实际获得的证据。若浏览器、后端、素材或凭据不可用,应完成可独立开展的工作并明确标注确切的未验证行为,绝不把仅源码检查的结果标为视觉已验证。

适用场景与限制

适用于产品界面设计、页面改版、界面评审、前端实现配合,以及需要为界面确定视觉方向与交互规范的场景。限制包括:自评审不等于用户验收;截图只能支持视觉观察,不能证明键盘行为、API 结果或隐藏状态;代理的任务走查不等于真人可用性研究,不能声称首次可发现性;不得编造代码位置、内容、数据或集成状态。资料未提供具体收费、价格、支持平台与安装命令,相关事实暂未提供。