mobile-first-website-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile-First Website Design

移动优先网站设计

Create evidence-led marketing surfaces with style-free structure, a separate identity phase, exact image prompts, smallest-to-largest implementation, and replayable release proof.

基于证据打造营销类页面，采用无样式结构、独立的视觉识别阶段、精准的图像提示、从最小到最大尺寸的实现流程，以及可复现的发布验证机制。

When to Use

使用场景

Use for landing pages, campaign pages, product launches, and marketing websites that need evidence-led responsive design, implementation, or release validation. Use product-interface skills for application task flows and broader design skills for cross-media systems.

适用于需要基于证据的响应式设计、开发或发布验证的着陆页、活动页、产品发布页及营销网站。应用任务流设计请使用产品界面相关技能，跨媒体系统设计请使用更通用的设计技能。

Start contract

启动约定

Normalize the brief, factual claims, conversion event, audience, visitor state, section obligations, assets, integrations, release target, and every supported width into canonical JSON. Missing facts are

null

plus a blocker. Never invent them.

Load brief and research and integrations at job start.

将需求简述、事实声明、转化事件、目标受众、访客状态、页面板块要求、资源、集成项、发布目标及所有支持的尺寸规格标准化为规范JSON格式。缺失的信息标记为

null

并视为阻塞项，切勿自行编造。

任务启动时加载需求简述与研究和集成项文档。

Fixed workflow

固定工作流

Diagnose the visitor state and freeze one five-part conversion narrative.
Define every section's question, answer, proof, action, image job, and accessibility obligation.
Research every section through available Refero, Mobbin, Lazyweb, and direct first-party web routes in fixed order.
Record route status, source ID, visible mechanism, relevance, adaptation, and fallback.
Produce exactly three style-free wireframe sequences at the smallest width.
Recompose each sequence through every larger breakpoint in ascending order.
Score complete sequences, run available judgement skills, choose by score and stable-ID tie break, and freeze
```
wireframe_sha256
```
.
Only after that hash exists, create and score three visual identity directions.
Convert every placeholder into a named image job.
Select one exact prompt YAML record and one available tool route per image job.
Generate or edit candidates with an available image capability, inspect rendered pixels with an available pixel-inspection capability, and freeze selected asset bytes.
Style and implement the smallest width first.
Advance through every larger breakpoint, validating each width before the next.
Add one repeated motion thesis with interruptible behavior and reduced-motion parity.
Sweep every integer CSS width and inspect every breakpoint boundary.
Run access, Web Vitals, external judgement, browser, native vision, and replay gates.
Permit at most two bounded repair passes, then emit a full, degraded, or blocked release state.

分析访客状态，确定并固化一套包含五个环节的转化叙事逻辑。
定义每个页面板块的核心问题、解答内容、验证依据、行动指引、图像任务及无障碍设计要求。
按照固定顺序，通过Refero、Mobbin、Lazyweb及直接的官方网站渠道对每个板块进行调研。
记录渠道状态、来源ID、可见机制、相关性、适配方案及备选方案。
针对最小尺寸，生成三套完全无样式的线框流程图。
按照尺寸从小到大的顺序，针对每个断点重新调整每套流程图的布局。
对完整的流程图进行评分，调用可用的评审技能，根据评分及稳定ID平局规则选出最优方案，并固化
```
wireframe_sha256
```
哈希值。
仅在哈希值确认后，创建三套视觉识别方向方案并进行评分。
将所有占位符转换为命名的图像任务。
为每个图像任务选择一份精准的提示YAML记录及一条可用的工具路径。
使用可用的图像生成或编辑能力生成候选素材，通过像素检查能力查看渲染像素，固化选中素材的字节数据。
先对最小尺寸进行样式设计与开发实现。
依次处理更大尺寸的断点，完成当前尺寸的验证后再进入下一尺寸。
添加一套可中断的重复动效方案，并确保与低动效模式的兼容性。
遍历所有整数CSS宽度，检查每个断点的边界情况。
执行无障碍检测、Web Vitals检测、外部评审、浏览器兼容性检测、原生视觉检测及可复现性验证。
最多允许两轮限定范围内的修复，之后输出完整发布、降级发布或阻塞发布的状态。

Structure and style gate

结构与样式验证

Wireframes may contain hierarchy, section order, copy density, proof placement, action priority, semantic order, layout topology, responsive reflow, and image-job placeholders. They may not contain color, typeface, image treatment, texture, gradients, shadows, decorative motifs, icon style, logo treatment, or motion styling.

Run

scripts/validate_packet.py

before identity work. Styling must cite the approved wireframe hash. Load wireframe, then visual identity.

线框可包含层级结构、板块顺序、文案密度、验证依据位置、行动优先级、语义顺序、布局拓扑、响应式重排及图像任务占位符。不得包含颜色、字体、图像处理效果、纹理、渐变、阴影、装饰图案、图标样式、Logo处理或动效样式。

在视觉识别工作开始前运行

scripts/validate_packet.py

脚本。样式设计必须引用已获批的线框哈希值。先加载线框文档，再加载视觉识别文档。

Mobile-first gate

移动优先验证

Start structure, style, implementation, motion, and validation at the smallest width.
Process every unique positive integer width in strictly ascending order.
Record every adaptation or the literal status
```
UNCHANGED
```
.
A larger width may add space, columns, scale, or peripheral detail. It may not remove required content or weaken the primary action.
Duplicate, descending, skipped, or unrecorded widths return
```
BLOCKED_BREAKPOINT_ORDER
```
.

从最小尺寸开始进行结构设计、样式开发、功能实现、动效添加及验证工作。
严格按照从小到大的顺序处理每个唯一的正整数宽度。
记录每次适配调整，若无变化则标记为
```
UNCHANGED
```
状态。
更大尺寸可增加留白、列数、缩放比例或外围细节，但不得移除必要内容或降低主行动按钮的优先级。
重复、降序、跳过或未记录的尺寸将返回
```
BLOCKED_BREAKPOINT_ORDER
```
状态。

Image gate

图像验证

The package carries all 1,000 public prompt strings as uncompressed UTF-8 YAML records under

assets/prompts/

. Each public string is deterministically punctuation-normalized from the byte-exact native source retained in committed evidence. The source prompt path remains the canonical ID. Select domain, lane, and perspective from normalized job fields, load the exact public YAML

prompt

scalar, verify its byte count and SHA-256, then choose a route from

assets/tool-registry.json

Use an available direct image generation or editing capability for supported work. Use Flora

search_docs

and approved Flora

execute

when its current model, canvas, project, technique, or action workflow is required. Use ComfyUI for a local node workflow. Never choose a provider or model on the user's behalf. Load image routing.

包内的

assets/prompts/

目录下存储了全部1000条公开提示字符串，以未压缩的UTF-8 YAML记录形式保存。每条公开字符串均由提交证据中保留的字节级原始源文件经过确定性标点标准化处理得到。源提示路径为标准ID。从标准化任务字段中选择领域、方向及视角，加载精准的公开YAML

prompt

标量，验证其字节数及SHA-256哈希值，然后从

assets/tool-registry.json

中选择工具路径。

对于支持的任务，使用可用的直接图像生成或编辑能力。当需要Flora的当前模型、画布、项目、技术或行动工作流时，使用Flora的

search_docs

及已获批的

execute

功能。本地节点工作流使用ComfyUI。切勿代用户选择服务提供商或模型。加载图像路径文档。

Integration and degradation gate

集成与降级验证

Check Refero, Mobbin, Lazyweb, Flora, Impeccable, TasteSkill, and applicable Emil procedures independently. Allowed unavailable statuses are

UNAVAILABLE_AUTH

UNAVAILABLE_TRANSPORT

UNAVAILABLE_SCHEMA

UNAVAILABLE_SKILL

, and

UNAVAILABLE_DISABLED

Run every named fallback. Never borrow an unavailable tool's verdict. Research, visual, judgement, and performance floors remain mandatory. Use

PASS_RELEASE

when all routes pass,

PASS_RELEASE_DEGRADED

when fallbacks satisfy every floor, and

BLOCKED_CAPABILITY_FLOOR

otherwise.

Flora uses

https://agents.flora.ai/mcp

with native HTTP OAuth. Its top-level tools are

search_docs

and

execute

. Charged generation requires explicit approval naming cost, batch, workspace, and export effects. Load integrations and Emil procedures.

独立检查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流程文档。

Implementation and performance gate

开发与性能验证

Implement the smallest width without a media-query dependency, then add ascending

min-width

rules only when content needs them. Run the all-width sweep, keyboard and pixel checks, accessibility checks, and lab metrics at every declared breakpoint.

At the 75th percentile require LCP

<=2.5s

, INP

<=200ms

, CLS

<=0.1

, and the declared FCP and TTFB budgets. Keep CrUX or PageSpeed field data separate. Record

UNAVAILABLE_FIELD_DATA

when absent. Load implementation and performance.

开发最小尺寸时不依赖媒体查询，仅当内容需要时再添加递增的

min-width

规则。在每个声明的断点处执行全尺寸遍历、键盘操作与像素检查、无障碍检测及实验室指标测试。

在75百分位要求下，LCP需

<=2.5s

，INP需

<=200ms

，CLS需

<=0.1

，同时需满足声明的FCP和TTFB预算。CrUX或PageSpeed的现场数据需单独存储。数据缺失时记录

UNAVAILABLE_FIELD_DATA

状态。加载开发与性能文档。

Judgement and motion

评审与动效

Apply the locked design-engineering, animation, vocabulary, Apple-oriented, opportunity, improvement, prototype, review, UI-library, and toast procedures when their triggers match. Motion must support state, causality, orientation, feedback, or one restrained delight moment. Load composition and motion and judgement.

当触发条件匹配时，执行已锁定的设计工程、动画、术语规范、苹果生态适配、机会识别、优化改进、原型制作、评审、UI库及提示框流程。动效必须支持状态展示、因果关联、方向指引、反馈提示，或仅包含一处克制的愉悦性动效。加载构图与动效和评审文档。

Determinism

确定性要求

Use sorted UTF-8 JSON, stable IDs, fixed query limits, integer scores, UTF-8 byte-order tie breaks, bounded repair, source locks, and SHA-256. Freeze selected generated bytes. Provider reruns are not replay proof. Never store secrets or fabricate web, browser, vision, validator, access, or performance results.

使用排序后的UTF-8 JSON、稳定ID、固定查询限制、整数评分、UTF-8字节顺序平局规则、限定修复、源锁定及SHA-256哈希。固化选中的生成字节数据。服务提供商重新运行结果不视为可复现证据。切勿存储机密信息或伪造网页、浏览器、视觉、验证器、无障碍或性能检测结果。

Package map

包结构说明

validation owns fixtures, evidence, repair, and replay.
source coverage owns revisions, authority, drift, and privacy.
```
scripts/breakpoint_rules.py
```
enforces ascending completeness.
```
scripts/prompt_corpus.py
```
verifies and retrieves exact public prompt bytes.
```
assets/schemas.json
```
defines packet structure.
```
assets/source-lock.json
```
fixes revisions and endpoints.
```
assets/tool-registry.json
```
names triggers and fallbacks.
```
assets/prompt-manifest.json
```
and the uncompressed YAML shards under
```
assets/prompts/
```
bind every prompt.
```
assets/fixtures/
```
contains full, degraded, and named failing packets.
```
evals/
```
binds the eight native fixtures to public behavior, trigger, speed, contract, rubric, mapping, and lineage records.
Run the one-entry local gate with
```
mise run ci
```
; see release validation, failure rejection, and prompt-corpus verification for complete command evidence.

验证模块负责测试用例、证据、修复及可复现性验证。
源覆盖模块负责版本修订、权限管理、内容偏差及隐私保护。
```
scripts/breakpoint_rules.py
```
脚本用于确保尺寸断点的完整性与递增顺序。
```
scripts/prompt_corpus.py
```
脚本用于验证并获取精准的公开提示字节数据。
```
assets/schemas.json
```
定义包的结构规范。
```
assets/source-lock.json
```
用于固定版本修订及接口端点。
```
assets/tool-registry.json
```
记录触发条件及备选方案。
```
assets/prompt-manifest.json
```
及
```
assets/prompts/
```
下的未压缩YAML分片用于绑定所有提示内容。
```
assets/fixtures/
```
目录包含完整、降级及命名的失败测试包。
```
evals/
```
模块将八个原生测试用例与公开行为、触发条件、速度、约定、评分标准、映射及溯源记录绑定。
使用
```
mise run ci
```
命令执行本地验证入口；完整的命令示例请查看发布验证、性能失败驳回及提示语库验证文档。

Release

发布要求

Release only when links and locks resolve, full and degraded fixtures replay byte-identically, every negative fixture returns its named block code, every prompt and tool route verifies, available external validators have no veto, native fallbacks cover unavailable routes, every breakpoint has browser, pixel, access, and performance proof, and the frozen artifact replays without a provider rerun.

仅当满足以下所有条件时方可发布：链接与锁定已解决、完整及降级测试用例可字节级复现、所有失败测试用例返回指定的阻塞代码、所有提示及工具路径验证通过、可用的外部验证器无否决意见、原生备选方案覆盖所有不可用路径、每个断点均有浏览器兼容性、像素、无障碍及性能验证证据，且固化的产物无需重新运行服务提供商即可复现。