mobile-first-website-design

移动优先的网站设计

打造以证据为依据的营销页面：结构不含样式，身份设计单独进行，图像提示词精确，从最小尺寸到最大尺寸逐步实现，并提供可重放的发布证明。

适用场景

适用于需要基于证据进行响应式设计、实现或发布验证的落地页、活动页面、产品发布页面和营销网站。应用任务流程请使用产品界面技能；跨媒体系统请使用更广泛的设计技能。

启动约定

资源门槛：使用此处列出的软件包文件前，先运行 mise run validate。

将简报、事实性声明、转化事件、受众、访客状态、各版块要求、素材、集成、发布目标以及每个支持的宽度规范化为规范 JSON。缺失的事实填写为 null，并注明阻塞项。切勿自行编造。

在任务开始时加载简报与调研和集成。

固定工作流

1. 诊断访客状态，并确定一条由五部分组成的转化叙事。
2. 明确每个版块要回答的问题、答案、证明、行动、图像作用和无障碍要求。
3. 按固定顺序，通过可用的 Refero、Mobbin、Lazyweb 和直接访问一方网站的路径，为每个版块进行调研。
4. 记录路径状态、来源 ID、可见机制、相关性、调整方式和回退方案。
5. 在最小宽度上恰好制作三个不含样式的线框序列。
6. 按从小到大的顺序，在每个更大的断点上重新组合各序列。
7. 为完整序列评分，运行可用的评判技能，按评分和稳定 ID 的平局规则选出方案，并冻结 wireframe_sha256。
8. 只有在该哈希存在后，才能创建并评估三个视觉身份方向。
9. 将每个占位符转换为具名图像任务。
10. 为每个图像任务选择一条精确的提示词 YAML 记录和一条可用的工具路径。
11. 使用可用的图像能力生成或编辑候选图，使用可用的像素检查能力检查渲染像素，并冻结所选素材的字节内容。
12. 从最小宽度开始进行样式设计和实现。
13. 逐步扩展到每个更大的断点；验证当前宽度后，才进入下一个宽度。
14. 添加一个可中断的重复动效主题，并确保减少动态效果时行为保持一致。
15. 扫描每个整数 CSS 宽度，并检查每个断点边界。
16. 运行无障碍、Web Vitals、外部评判、浏览器、原生视觉和重放门槛检查。
17. 最多允许两轮有界修复，然后输出完整、降级或阻塞的发布状态。

结构与样式门槛

线框可以包含层级、版块顺序、文案密度、证明材料的位置、操作优先级、语义顺序、布局拓扑、响应式重排和图像任务占位符。不得包含颜色、字体、图像处理效果、纹理、渐变、阴影、装饰图案、图标样式、Logo 样式或动效样式。

身份设计前运行 mise run validate-packet。样式设计必须引用已批准的线框哈希。加载线框，然后加载视觉身份。

移动优先门槛

• 从最小宽度开始构建结构、样式和实现，并开展动效设计与验证。
• 严格按升序处理每个唯一的正整数宽度。
• 记录每项调整，或记录字面状态 UNCHANGED。
• 更大宽度可以增加留白、列数、缩放或外围细节，但不得移除必需内容或弱化主要操作。
• 重复、降序、跳过或未记录的宽度均返回 BLOCKED_BREAKPOINT_ORDER。

图像门控

资源门控：使用此处所列的软件包文件前，先运行 mise run validate。

软件包在 assets/prompts/ 下以未压缩的 UTF-8 YAML 记录形式携带全部 1,000 条公开提示词字符串。每条公开字符串都根据提交证据中保留的逐字节精确原生来源，以确定性方式进行标点规范化。来源提示词路径仍是规范 ID。根据规范化后的作业字段选择领域、通道和视角，加载精确的公开 YAML prompt 标量，验证其字节数和 SHA-256，然后从 assets/tool-registry.json 中选择路由。

对于受支持的工作，使用可用的直接图像生成或编辑能力。如果当前模型、画布、项目、技术或操作工作流有要求，则使用 Flora search_docs 和经批准的 Flora execute。本地节点工作流使用 ComfyUI。绝不替用户选择提供商或模型。加载图像路由。

集成与降级门控

资源门控：使用此处所列的软件包文件前，先运行 mise run validate。

分别检查 Refero、Mobbin、Lazyweb、Flora、Impeccable、TasteSkill 以及适用的 Emil 程序。允许的不可用状态为 UNAVAILABLE_AUTH、UNAVAILABLE_TRANSPORT、UNAVAILABLE_SCHEMA、UNAVAILABLE_SKILL 和 UNAVAILABLE_DISABLED。

运行每一项指定的回退方案。绝不借用不可用工具的判定结果。研究、视觉、判断和性能底线仍为必需项。所有路由均通过时使用 PASS_RELEASE；回退方案满足所有底线时使用 PASS_RELEASE_DEGRADED；否则使用 BLOCKED_CAPABILITY_FLOOR。

Flora 使用 https://agents.flora.ai/mcp 和原生 HTTP OAuth。其顶层工具为 search_docs 和 execute。收费生成需要明确批准，并说明费用、批次、工作区和导出影响。加载集成和Emil 程序。

实现与性能门控

资源门控：使用此处所列的软件包文件前，先运行 mise run validate。

先实现最小宽度，不依赖媒体查询；之后仅在内容需要时，才添加按 min-width 升序排列的规则。在每个声明的断点运行全宽度扫描、键盘和像素检查、无障碍检查及实验室指标测试。

第 75 百分位要求 LCP <=2.5s、INP <=200ms、CLS <=0.1，并满足声明的 FCP 和 TTFB 预算。将 CrUX 或 PageSpeed 实地数据单独记录。缺少数据时，记录 UNAVAILABLE_FIELD_DATA。加载实现与性能。

判断与动态效果

资源门控：使用此处所列的软件包文件前，先运行 mise run validate。

当触发条件匹配时，应用已锁定的设计工程、动画、词汇、Apple 导向、机会、改进、原型、评审、UI 库和 toast 程序。动态效果必须支持状态、因果关系、方向感、反馈，或一个克制的惊喜时刻。加载构图与动态效果和判断。

确定性

使用排序后的 UTF-8 JSON、稳定 ID、固定查询限制、整数评分、UTF-8 字节序平局规则、有界修复、来源锁定和 SHA-256。冻结选定的生成字节。提供商重新运行不能作为回放证明。绝不存储机密，也绝不捏造网页、浏览器、视觉、验证器、访问或性能结果。

软件包映射

• 验证负责管理测试样例、证据、修复和重放。
• 来源覆盖范围负责管理修订版本、权威性、漂移和隐私。
• mise run breakpoint-rules 强制执行升序完整性要求。
• mise run prompt-corpus 验证并检索精确的公开提示词字节。
• assets/schemas.json 定义数据包结构。
• assets/source-lock.json 固定修订版本和端点。
• assets/tool-registry.json 指定触发条件和回退方案。
• assets/prompt-manifest.json 和 assets/prompts/ 下未压缩的 YAML 分片共同绑定每条提示词。
• assets/fixtures/ 包含完整、降级和具名失败数据包。
• evals/ 将 8 个原生测试样例绑定到公开行为、触发条件、速度、契约、评分标准、映射和溯源记录。
• 使用 mise run ci 运行单入口本地门禁；完整的命令证据请参阅发布验证、失败拒绝和提示词语料验证。

发布

仅当链接和锁定项均可解析、完整和降级测试样例都能按字节完全一致地重放、每个负向测试样例都返回其指定的阻断代码、每条提示词和工具路由都通过验证、可用的外部验证器均未提出否决、原生回退方案覆盖不可用的路由、每个断点都有浏览器、像素、无障碍和性能证明，并且冻结后的制品无需重新运行提供方即可重放时，才可发布。

工厂执行契约

符合要求的结果是：设计并验证一个移动优先页面，确保其转化路径在各种响应式断点下均可用。更改最小范围的归属内容，同时保留当前移动优先页面的行为。

1. 使用 mise run ci 冻结当前软件包，并记录其摘要。
2. 运行 mise run domain-research-policy，然后评判当前移动优先页面的来源和反证。
3. 针对指定的移动优先页面操作运行 mise run agentic-request。将语义选择交由模型处理。
4. 运行 mise run decision-policy、mise run ci 和行为评估。回到失败范围最小的归属项。
5. 运行 mise run invocation-policy -- <receipt>，并说明每项任务的执行情况，或说明不使用该任务的领域专属理由。
6. 可选择运行 mise run improvement-policy。只有在受保护维度均未退化时，才保留一项变更维度。

只有在需要其契约时，才通过 mise run use-case-policy 加载 assets/use-case-contract.json，并通过 mise run evals 加载 evals/evals.json。

Mise 负责可重复的机制、顺序、回执和检查。模型负责代码无法提供的解读、因果判断、创意工作和直接感知。遇到权威性缺失、证据过时或门禁失败时，立即停止。