从零创建前端界面
将产品需求转化为可运行、可访问且可验证的界面。此技能主要负责在空白项目或明确要求的新区域中构建全新前端。它实现代码、在可行时运行项目，并报告实际验证过的内容。
边界与协作
- 全新前端： 此技能主导执行，即使有参考帮助引导原创设计也是如此。提取设计原则，但不得复制第三方的品牌、内容或资产。
- 审计现有界面： 请使用
audit-frontend-designer-konvert，它仅为只读模式。如需“审计并修正”，则先运行该技能，之后遵循审批合约。 - 应用参考、直接优化现有界面或实施已批准的审计报告： 请使用
design-por-referencia-konvert并遵守其范围、审批及外部依赖规则。 - 在混合项目中，仅实现被授权的全新区域；识别并保留现有集成与界面。请参阅协作指南，以利用其他技能的知识和工具而无需重复。
流程
- 理解请求与上下文。 阅读项目说明、相关文件、现有技术栈和约定。识别产品、目标受众、主要任务、页面、数据、品牌标识、限制条件以及交付位置。区分已知事实与假设；不得虚构用户画像或研究成果。如果某个不可缺少的选择无法推断且会产生不可逆影响，则请求澄清；对于其他决策，申明假设后继续推进。将结果记录在探索与简报中。
- 确定具体方案。 选择相关的用户旅程和状态：初始态、加载态、空态、成功态、错误态及恢复态（若适用）。使用状态与组件按屏幕列出组件和状态，并将审计单元作为完成标准。对于多页面或多类别项目，使用内容结构与导航定义路径。定义与目标受众和目标一致的内容、层次结构、导航和视觉方向，并根据视觉基础确定设计令牌。当两个选项会显著改变最终结果时，使用视觉方向探索。利用现有本地材料，并在可用且相关时使用审计的知识单元和目录。仅引用实际查阅过的参考资料。视觉参考是灵感来源，而非可用性证据。
- 规划构建。 复用现有框架、路由、组件和令牌。在空白项目中，根据技术栈选择选择最简方案以匹配请求和环境；论证新依赖项，在运行前验证版本和脚本。不得假设已获得付费服务、发布、外部账户或真实数据的授权。根据请求保持后端范围、身份验证和集成；如果未提及，则使用合成数据并明确标明限制。
- 实现。 在授权范围内构建实际的内容、语义结构、样式、组件和交互。避免看似有功能但实则无行为的按钮或虚假链接：要么实现所请求的动作，要么明确表明其不可用。使用一致的令牌、可见状态和响应式布局。应用内容、SEO、性能与度量规则：虚构内容需标明，公共页面需基本SEO，未经请求不添加分析工具。参考安全与前端本地化以保护前端，当产品涉及多语言或多区域时，根据已定义的语言环境调整界面。未经必要性和适用授权，不得删除或替换用户代码、数据、集成或文件。
- 验证。 执行适用于项目的检查，尽可能在本地运行界面并打开渲染结果。检查主要任务、内容、导航、键盘操作、焦点、表单、相关状态、窄屏和桌面显示；评估对比度和减少动画（若适用）。当参考技能有可用脚本时，使用其脚本，输出授权结果和合成数据。对于没有先前版本的全新创建，不得捏造前后对比：记录首次截图作为初始参考，仅对比实际存在的状态或版本。参阅验证。
- 交付与报告。 检查完成定义并使用其中的报告模板。报告变更的文件、相关决策和假设、如何运行、已执行的检查及其结果、模拟的功能以及无法验证的内容。在授权输出目录中，将任务、检查区域、决策和已验证的标准记录到
execution-record.json中，遵循执行记录及其验证器。不得存储私有 URL 或提示。未经证据，不得声称进行了用户测试、完全合规性、性能或商业成果。如果浏览器不可用，则明确说明界面未经过视觉检查。
隐私与安全
仅使用授权目标和环境。不得读取或暴露 .env、凭据、会话或不必要的个人数据；使用合成内容并在分享前审查截图。尊重捕获工具的保护和限制：检查会执行 JavaScript，不是不受信任网站的沙箱。仅将产物写入已授权且被 Git 忽略的目录，或者写入检出目录之外；未经必要，不得更改项目隐私配置。不得向第三方发送数据、创建账户或未经授权发布。
质量标准
界面应以清晰性、视觉层次、一致的内容和有用的反馈来支持主要任务。根据上下文关注语义、焦点、无障碍名称、标签和内容重排；不得仅凭自动检查就声称无障碍认证。不得捏造转化指标、用户评价、认证徽章、价格、集成或功能。更倾向于在范围内提供一个完整且可测试的实现，而不是外观令人信服但操作失灵的界面。
完成定义
仅当主要任务在约定范围内端到端可运行，且完成定义中的每一项要么已完成、要么有理由不适用、要么因故未检查时，交付才算就绪。从零创建时最容易出错的点：
- 正常状态之外的状态（加载、错误、空、成功、恢复）无法被观察；
- 焦点被移除或遮挡，标签仅出现在占位符中，错误仅通过颜色指示；
- 对比度和触摸目标未在渲染中进行测量；
- 看似有行为但实际上不工作的按钮和链接；
- 捏造的商业数据、用户评价或集成；
- 在无明确决策记录的情况下添加分析工具或外部字体。
参考资料与示例
| 材料 | 何时使用 |
|---|---|
| 探索与简报 | 构建前：带模板的问题和假设记录。 |
| 技术栈选择 | 空白项目，无定义平台。 |
| 视觉基础 | 可验证的对比度、目标和焦点的令牌与约束。 |
| 视觉方向探索 | 原创方向、实质性选项及渲染确认。 |
| 内容结构与导航 | 新项目中的路径、标签和页面组织。 |
| 状态与组件 | 按屏幕的清单，审计单元作为完成标准。 |
| 内容、SEO、性能与度量 | 公共页面、巴西格式、Core Web Vitals 与隐私。 |
| 安全与前端本地化 | 可变内容、外部资源，以及（若适用）多语言或多区域。 |
| 验证 | 如何执行并记录检查。 |
| 协作 | 何时使用审计工具和执行工具。 |
| 完成定义与交付 | 在报告交付之前查看。 |
| 落地页简报、电商简报和交付报告 | 期望详细程度的合成示例。 |