---

name: skills-si-web-design-workflow description: "面向网页设计师与UI/UX设计师的协作型工作流，用于把需求转为可追溯的用户画像、信息架构、线框说明、设计系统、可访问性与响应式检查、开发交付和可用性测试材料；当需要设计网页或产品界面并形成可编辑规范时触发，不替代用户研究、品牌授权、专业执业复核或实际开发测试。" license: MIT metadata: publisher: Skills-SI origin: original-ai-assisted version: 1.0.0 runtime-tested: false language: zh-CN

网页设计与 UI/UX 协作工作流

本站原创（Skills-SI）｜AI辅助起草｜待独立人工专业复核｜未在任何客户AI宿主中实机执行。 不冒充第三方、平台、监管机构或官方；本包为可编辑协作规范，不是执业意见或成果证明。

协作前置与模式选择

• 先确认本次目标是新站、改版、落地页、产品功能页、设计系统整理，还是交付审阅。
• 先确认现有材料：品牌资产、业务目标、页面清单、技术约束、已有研究、内容来源与截止时间。
• 最多追问三个关键问题，优先问：目标用户和核心任务是什么？本次范围及成功信号是什么？哪些资产或技术约束不可变？
• 资料缺失时在相应位置标记【待提供】，不要以常识补写为既定事实。
• 来源、指标、用户研究、竞品结论或权限尚未核实时标记【待核验】，并写明需由谁及何处核验。
• 选择“探索模式”时输出假设、待验证问题和低保真结构；选择“交付模式”时输出可编辑规范及验收清单。
• 选择“审阅模式”时只指出可观察的问题、影响和建议，不擅自改写业务目标或虚构证据。
• 涉及法律、医疗、金融、合规、造价或建筑页面时，明确写明不构成执业意见，须由持证/执业人员复核。

适用与边界

• 适用于网站、活动页、Web 应用界面、后台、设计规范、开发交接和可用性测试准备。
• 适用于把零散需求转为结构化文档，帮助设计、内容、产品与开发对齐。
• 不将访谈假设、画像推断或测试观察冒充真实用户研究数据。
• 不复制他人受版权保护的页面、组件、插画、文案、源文件或受保护的整体设计表达。
• 不绕过平台限制、监管要求、版权、无障碍义务或安全控制。
• 不协助虚假宣传、歧视性界面、诱导性暗黑模式、刷量、隐瞒风险或侵犯隐私的设计。
• 遇到上述请求，应说明无法协助，并改为提供透明说明、可访问设计、合规审核或原创替代方案。
• 不把静态文档检查称为可用性测试、上线验收、无障碍认证或生产环境验证。

先读取的配套资源

• 开始收集需求时，读取需求简报模板。
• 需要直接套用交付结构时，读取输出模板。
• 执行评审与交付前复核时，读取过程检查清单。
• 需要理解完整的虚构走读时，读取虚构演示。
• 需要确认来源、版本和独立性声明时，读取来源与版本。
• 需要了解复用许可时，读取许可证。

触发判断

使用本 Skill 的情形

• 用户要把网页或产品需求整理成设计简报、用户画像、页面范围或优先级。
• 用户要规划导航、内容层级、用户路径、站点地图或信息架构。
• 用户要文字化页面线框、组件说明、状态规则或内容占位要求。
• 用户要定义颜色、字体、间距、栅格、组件状态和交付标注。
• 用户要检查 WCAG 相关的对比度、键盘、替代文本、焦点和响应式风险。
• 用户要组织设计交付、开发交接、可用性测试脚本或问题记录。

不使用本 Skill 的情形

• 只需生成一张视觉海报、纯插画、品牌商标或不涉及界面流程的艺术创作。
• 要求复制特定品牌、竞品或受版权保护作品的视觉表达、源文件或布局细节。
• 要求出具法律、医疗、金融、监管、建筑或无障碍认证结论。
• 没有目标、受众、页面范围或材料，且对方拒绝提供最小必要上下文。
• 要求编造研究样本、测试记录、转化数据、客户案例或上线效果。

核心工作流

1. 锁定问题与范围

• 输入：业务背景、目标、目标用户、已有页面、内容素材、品牌资产、技术限制与截止时间。
• 动作：用简报模板分开记录“事实”“假设”“待确认”；定义主任务、次任务及不在范围内的事项。
• 输出：一页需求简报、范围清单、待决事项清单和风险提示。
• 检查点：每一个关键结论均能追溯到用户提供材料，或明确标为【待提供】或【待核验】。

2. 建立用户画像与任务假设

• 输入：已授权的研究摘要、客服反馈、分析资料或利益相关方说明。
• 动作：按场景写角色目标、触发条件、顾虑、完成任务的障碍和可观察的成功信号。
• 输出：最多三组“假设性用户画像”和对应的任务路径；无研究证据时标为设计假设。
• 检查点：不写虚构年龄、收入、地域、行为比例或偏好数据；区分已证实洞察和待验证假设。

3. 规划信息架构与站点地图

• 输入：内容盘点、功能列表、用户任务、组织约束、搜索或导航要求。
• 动作：按用户任务而非内部部门命名分组；定义一级导航、二级页、工具页、页内锚点和关键路径。
• 输出：站点地图、导航规则、页面目的表和内容去留建议。
• 检查点：每个页面有唯一主目的；导航命名不依赖内部术语；孤立页面、重复入口和死链风险已标出。

4. 写页面线框文字说明

• 输入：页面目的、主任务、内容优先级、组件库与响应式约束。
• 动作：从上到下描述区域、信息层级、主行动、次行动、异常状态、空状态和移动端重排。
• 输出：页面线框文字说明，可由设计师在任意绘图工具中落图。
• 检查点：首屏回答“这是何物、对谁有用、下一步做什么”；每个行动有清晰结果或反馈。

5. 建立设计系统最小规范

• 输入：品牌资产、现有组件、内容密度、平台能力和可访问目标。
• 动作：定义语义色令牌、字体角色、字号层级、间距尺度、圆角、阴影、栅格和组件状态。
• 输出：可编辑设计系统规范、令牌表、组件状态表与使用禁忌。
• 检查点：颜色不只靠名称表达语义；状态覆盖默认、悬停、按下、焦点、禁用、加载、成功、警告、错误与空状态。

6. 嵌入可访问性审阅

• 输入：页面说明、颜色令牌、组件交互、文案、图像用途和媒体内容。
• 动作：使用 WCAG 作为需核对的来源类别【待核验：请在官方渠道核对现行版本】；逐项核对对比度、键盘、替代文本和焦点。
• 输出：问题清单、修复建议、复核责任人和状态记录。
• 检查点：不能只依赖颜色、鼠标、占位符或自动工具；动态提示、错误反馈和焦点顺序被人工走读。

7. 检查响应式与内容韧性

• 输入：桌面与移动构想、断点策略、真实或代表性内容、图片规则与组件约束。
• 动作：检查窄屏重排、长文本、放大、横竖屏、低速加载、触控目标、表格与溢出处理。
• 输出：断点检查表、各页面重排说明和需开发确认的行为。
• 检查点：不以单一设备截图代替检查；重要任务不因屏宽、文字长度或输入错误而不可完成。

8. 准备设计交付与开发标注

• 输入：定稿设计、资产清单、令牌、页面说明、组件行为和验收标准。
• 动作：为每页标注结构、内容来源、交互触发、状态、尺寸逻辑、断点变化、可访问要求和数据依赖。
• 输出：交付索引、开发标注说明、资产授权清单和验收问题单。
• 检查点：不把截图当作唯一规格；模糊点转为可问可答的规则；只报告真实存在的文件路径。

9. 编排可用性测试与回收问题

• 输入：测试目标、原型或可操作页面、受试者招募范围、任务、观察口径和知情安排。
• 动作：写中性脚本，按任务观察而不诱导；按严重度、证据、影响与建议记录问题。
• 输出：测试脚本、问题记录表、优先级建议和后续验证计划。
• 检查点：不伪造参与者、录音、完成率或结论；测试资料先取得适当授权并减少收集个人信息。

常见任务分支

分支 A：新网站需求澄清

• 输出结构：目标与边界 → 受众与场景 → 主任务 → 页面范围 → 内容与资产 → 约束 → 风险与待确认。
• 适用动作：用 templates/brief.md 收集信息，并将未经证实内容保留为假设。

分支 B：企业官网或内容站的信息架构

• 输出结构：内容盘点 → 一级导航 → 页面树 → 每页目的 → 关键路径 → 命名原则 → 迁移/下线建议。
• 适用动作：按访客任务组织内容，单列内部部门诉求与用户任务冲突处。

分支 C：转化型落地页线框说明

• 输出结构：首屏价值说明 → 信任信息 → 关键利益点 → 流程说明 → 常见顾虑 → 主行动 → 表单与异常反馈 → 页脚信息。
• 适用动作：先写信息优先级和行动结果，再决定视觉样式；避免虚假紧迫感和不可证实承诺。

分支 D：设计系统补全

• 输出结构：基础令牌 → 排版 → 布局与间距 → 组件清单 → 状态矩阵 → 内容规则 → 无障碍要求 → 变更记录。
• 适用动作：保留既有品牌限制，新增令牌必须写用途、示例和禁用情形。

分支 E：可访问性与响应式审阅

• 输出结构：范围与版本 → 检查环境 → 发现项 → 影响用户 → 严重度 → 建议 → 责任人 → 复测状态。
• 适用动作：将 WCAG 及当地适用要求作为待核对来源，不声称认证或法律合规。

分支 F：开发交接包

• 输出结构：交付索引 → 页面与组件链接/路径 → 令牌表 → 行为说明 → 断点规则 → 资产授权状态 → 验收项 → 已知限制。
• 适用动作：每个交互写触发条件、可见变化、错误处理和恢复方式，而非仅写“同设计稿”。

分支 G：可用性测试准备与复盘

• 输出结构：目标 → 参与者条件 → 主持开场 → 任务卡 → 追问 → 观察记录 → 问题表 → 优先级 → 改版验证。
• 适用动作：使用中性语言，记录原话和行为证据，避免将个人偏好泛化为全部用户结论。

质量与合规检查

• 字体：逐一核对字体文件、网页嵌入、商用范围、字重、语种覆盖和再分发许可；状态不明则标【待核验】。
• 图片：核对来源、作者署名、使用地域/期限/媒介、人物肖像、素材二次编辑和 AI 生成资产的权利链。
• 图标：核对图标库许可、商标性图形、品牌使用规范、描边/填充版本及是否允许打包交付。
• 内容：核对主张、价格、时限、数据、案例和政策描述的授权与来源；无法核实的内容不用肯定语气。
• 隐私：避免在原型、截图和测试表中保留真实姓名、联系方式、账号、访问令牌或内部数据。
• 包容性：避免基于性别、年龄、地域、健康状况、职业或其他特征的刻板假设；给出等效路径。
• 安全：不把敏感操作隐藏在模糊确认、默认勾选或不可撤回流程中；提醒开发方复核权限和数据处理。
• 高风险领域：页面涉及法律、医疗、金融、合规、造价或建筑时，重申不构成执业意见，须由持证/执业人员复核。

交付格式

• 默认交付为可编辑 Markdown，按页面、组件或问题单拆分，保留【待提供】与【待核验】标记。
• 默认使用 Markdown 表格列出令牌、页面树、交接项、测试任务和问题记录，便于版本比较。
• 只有用户明确确认所需格式，且相关工具真实可用时，才生成 DOCX、XLSX 或 PPTX。
• 生成二进制文档后，先核对文件真实存在、可打开且内容与 Markdown 一致，再报告真实存在的文件路径。
• 工具不可用、格式未确认或文件未成功生成时，继续提供 Markdown，不虚报已生成附件或链接。
• 交付结尾列出：范围、材料来源、未决项、授权待核验项、复核责任和下一步。