img-to-html

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Img → HTML

O que é

是什么

Skill para transformar um mock de interface (PNG/JPG/WebP) numa recriação HTML fiel, passo a passo.

Entrada: uma imagem de referência (anexada no chat, path, ou URL). Se faltar, peça.

Saída: pasta

design-systems/<slug>/

com a referência copiada, o wireframe, o index.html
e uma pasta assets/
com o CSS, o JS e as mídias geradas.

O entrypoint final deve se chamar exatamente index.html
. Não use outro nome para o HTML principal.

<slug>

= nome curto do mock em kebab-case (ex.:

chatgpt-glass-dash

). Se o usuário não indicar, derive do nome do arquivo ou pergunte.

用于将界面 mock（PNG/JPG/WebP）逐步转换为高保真的 HTML 复刻的 Skill。

输入： 一张参考图（作为聊天附件、path 或 URL 提供）。如果未提供，则向用户询问。

输出： 文件夹

design-systems/<slug>/

，其中包含复制后的参考图、wireframe、index.html
，以及一个 assets/
文件夹，用于存放生成的 CSS、JS 和媒体资源。

最终 entrypoint 必须严格命名为 index.html
。HTML 主文件不得使用其他名称。

<slug>

= mock 的简短 kebab-case 名称（例如：

chatgpt-glass-dash

）。如果用户未指定，则从文件名推导或询问用户。

Por que em etapas

为什么分阶段

Recriar a tela inteira de uma vez falha (cores, glass, ícones e fontes misturam erros). O fluxo é bottom-up: cada camada só começa depois da anterior aprovada pelo usuário. O wireframe define o que existe e seu plano indica quando e como implementar cada região. Assets entram conforme sua função: imagens que compõem o fundo são feitas junto dele.

一次性重新创建整屏会失败（颜色、glass、图标和字体会混杂错误）。流程采用 bottom-up：每一层只会在上一层获得用户批准后开始。wireframe 定义有哪些内容，其实施计划则说明何时以及如何实现每个区域。Assets 按功能进入流程：构成背景的图片与背景一并制作。

Pipeline

1. reference → $to-wireframe format=ascii → wireframe.txt + plano → [usuário aprova ambos]
2. fundo completo (CSS e/ou imagens)       → [usuário aprova]
3. estrutura e componentes + fontes       → [usuário aprova]
4. assets restantes (ícones, imagens etc.) → [usuário aprova, se houver]
5. revisão final integrada                → [usuário aprova]

1. reference → $to-wireframe format=ascii → wireframe.txt + plano → [usuário aprova ambos]
2. fundo completo (CSS e/ou imagens)       → [usuário aprova]
3. estrutura e componentes + fontes       → [usuário aprova]
4. assets restantes (ícones, imagens etc.) → [usuário aprova, se houver]
5. revisão final integrada                → [usuário aprova]

Gate de aprovação (vale para todas as etapas)

审批门（适用于所有阶段）

Ao terminar uma etapa:

Mostre o resultado (path +
```
open
```
no macOS e/ou screenshot no browser).
Pergunte se está correto / se mudaria algo.
Pare. Não inicie a etapa seguinte.

Só avance com confirmação explícita ("aprovado", "pode seguir", "ok"). Se o usuário pedir correção: edite, mostre de novo, aguarde nova aprovação.

A aprovação do plano autoriza a sequência proposta, sem substituir os gates de implementação. Se não houver assets restantes, indique isso no plano e omita a etapa 4; depois da aprovação da etapa 3, siga para a revisão final.

完成一个阶段后：

展示结果（path，以及 macOS 上的
```
open
```
和/或 browser 截图）。
询问是否正确/是否需要调整。
停止。 不要开始下一阶段。

只有在获得明确确认（“aprovado”、“pode seguir”、“ok”）后才能继续。如果用户要求修改：进行编辑，再次展示结果，并等待新的批准。

对计划的批准表示可以按所提出的顺序执行，但不能取代各实施阶段的审批门。如果不存在剩余 assets，应在计划中注明并省略阶段 4；阶段 3 获得批准后，直接进入最终审查。

Layout da pasta

文件夹结构

design-systems/<slug>/
  reference.[ext]      # cópia da imagem de entrada
  wireframe.txt        # planta tipada criada por $to-wireframe format=ascii; plano apresentado junto
  index.html           # markup — só estrutura, sem <style>/<script> inline
  assets/
    styles.css         # todo o CSS
    app.js             # todo o JS (só se o mock precisar de comportamento)
    crops/             # recortes da reference
    *.png / *.mp4 …    # imagens, ícones, vídeos gerados

design-systems/<slug>/
  reference.[ext]      # cópia da imagem de entrada
  wireframe.txt        # planta tipada criada por $to-wireframe format=ascii; plano apresentado junto
  index.html           # markup — só estrutura, sem <style>/<script> inline
  assets/
    styles.css         # todo o CSS
    app.js             # todo o JS (só se o mock precisar de comportamento)
    crops/             # recortes da reference
    *.png / *.mp4 …    # imagens, ícones, vídeos gerados

Stack: HTML + CSS + JS separados

技术栈：分离的 HTML + CSS + JS

Sem build, sem bundler, sem framework, sem
node_modules
, sem dev server — abre com

open index.html

e funciona.

index.html

carrega os outros dois:

<link rel="stylesheet" href="assets/styles.css">

<head>

<script src="assets/app.js" defer></script>

Nada de
<style>
ou
<script>
inline no HTML, e nada de
```
style="…"
```
nos elementos. Todo CSS vive em
```
assets/styles.css
```
.
Um
```
styles.css
```
só. Se ele passar de ~1500 linhas, aí sim quebre por região (
```
assets/nav.css
```
,
```
assets/cards.css
```
) e adicione os
```
<link>
```
correspondentes — mas o default é um arquivo.
```
assets/
```
é a única pasta auxiliar: CSS, JS, imagens, ícones, vídeos e os crops moram todos lá.
Sem Tailwind, sem CDN de framework. CSS puro, com custom properties no
```
:root
```
para o design system (cores, radius, sombras, tipografia).
Cada região do wireframe vira uma classe CSS (
```
.nav
```
,
```
.hero
```
,
```
.card
```
,
```
.card2
```
, …) e cada tag tipada vira uma classe utilitária (
```
.h1
```
,
```
.t2
```
,
```
.btn
```
,
```
.lnk
```
, …). Mesmo id no wireframe = mesma classe.
Conteúdo repetido (lista de cards, itens de nav) é escrito direto no HTML. Só crie
```
app.js
```
se o mock exigir comportamento real; não gere markup por loop de JS.
Paths sempre relativos:
```
assets/{id}.png
```
.

Se o usuário pedir React/Vite explicitamente, aí sim mude a stack.

无 build、无 bundler、无 framework、无
node_modules
、无 dev server——使用

open index.html

打开即可运行。

index.html

加载另外两个文件：在

<head>

中使用

<link rel="stylesheet" href="assets/styles.css">

，并使用

<script src="assets/app.js" defer></script>

。

HTML 中不得包含内联的
<style>
或
<script>
，元素上也不得使用
```
style="…"
```
。所有 CSS 均位于
```
assets/styles.css
```
中。
只使用一个
```
styles.css
```
。如果其超过约 1500 行，此时才按区域拆分（
```
assets/nav.css
```
、
```
assets/cards.css
```
）并添加对应的
```
<link>
```
，但默认使用单一文件。
```
assets/
```
是唯一的辅助文件夹：CSS、JS、图片、图标、视频和 crops 均存放在此。
不使用 Tailwind，也不使用框架 CDN。使用纯 CSS，并在
```
:root
```
中通过 custom properties 定义 design system（颜色、radius、阴影、排版）。
wireframe 中的每个区域都对应一个 CSS 类（
```
.nav
```
、
```
.hero
```
、
```
.card
```
、
```
.card2
```
……），每个类型化标签都对应一个工具类（
```
.h1
```
、
```
.t2
```
、
```
.btn
```
、
```
.lnk
```
……）。wireframe 中相同的 id 对应相同的类。
重复内容（cards 列表、nav 项等）直接写入 HTML。只有当 mock 确实需要真实行为时才创建
```
app.js
```
；不要通过 JS 循环生成 markup。
路径始终使用相对路径：
```
assets/{id}.png
```
。

如果用户明确要求 React/Vite，则再切换技术栈。

Etapa 1 — Wireframe ASCII tipado + plano

阶段 1——类型化 ASCII wireframe + 计划

Objetivo: a planta estrutural da tela — quais regiões existem e que texto tem dentro delas — acompanhada de um plano curto de implementação por região.

O wireframe é o contrato com o HTML: cada região e cada tag tipada vira depois uma classe CSS (mesmo id = mesmo visual). A criação, o vocabulário tipado, o aninhamento e a revisão estrutural pertencem exclusivamente a

$to-wireframe

. Não replique essas regras nesta skill.

目标是屏幕的结构蓝图——包含哪些区域，以及每个区域内有哪些文本——并附上一份按区域划分的简短实施计划。

wireframe 是与 HTML 之间的契约：每个区域和每个类型化标签之后都会变成一个 CSS 类（相同 id = 相同视觉表现）。创建过程、类型化词汇、嵌套方式和结构审查仅由

$to-wireframe

负责。不要在此 Skill 中重复这些规则。

Criar o wireframe

创建 wireframe

Criar
```
design-systems/<slug>/
```
e copiar a imagem para
```
reference.[ext]
```
.

Invocar a skill $to-wireframe
com

format=ascii

image=design-systems/<slug>/reference.[ext]

output=design-systems/<slug>/wireframe.txt

Manter
```
wireframe.txt
```
como o contrato canônico desta execução. Não gerar SVG nesta etapa.
Não alterar o wireframe depois da entrega do
```
$to-wireframe
```
; qualquer correção estrutural volta para
```
$to-wireframe
```
com a mesma imagem e
```
format=ascii
```
.

创建
```
design-systems/<slug>/
```
，并将图像复制为
```
reference.[ext]
```
。

调用 $to-wireframe
，参数为

format=ascii

、

image=design-systems/<slug>/reference.[ext]

和

output=design-systems/<slug>/wireframe.txt

。

将
```
wireframe.txt
```
保留为本次执行的规范契约。此阶段不生成 SVG。
```
$to-wireframe
```
交付后不要修改 wireframe；任何结构修正都应使用同一图像和
```
format=ascii
```
重新调用
```
$to-wireframe
```
。

Plano de implementação (na mesma aprovação)

实施计划（与 wireframe 一同审批）

Depois de receber o ASCII do

$to-wireframe

, indique para cada região a etapa de implementação e a técnica prevista. Agrupe regiões iguais. Apresente o plano na mensagem, em uma tabela curta. Ele não é adicionado ao ASCII: etapas e técnicas não fazem parte dos ids/classes nem do texto da interface.

Exemplo de plano (adaptar à referência):

Região / elemento	Etapa	Técnica prevista
Fundo da tela + arte decorativa	2	Gradiente CSS + ilustração transparente
Nav, hero e cards	3	HTML/CSS; família e peso definidos antes do ajuste fino
Fundo ilustrado de um card	3	Imagem + CSS, junto da superfície do card
Área de mídia	3 / 4	Estrutura na 3; imagem de conteúdo na 4
Ícones e avatares	4	Assets gerados a partir dos recortes
Tela completa	5	Comparação integrada e correções finais

Escolha visualmente entre CSS, imagem ou composição dos dois, considerando fidelidade, esforço e facilidade de ajustar posição/escala. Cores, gradientes e formas simples favorecem CSS; arte e texturas complexas favorecem imagem; camadas separadas ajudam quando precisam de ajustes independentes. Uma imagem de fundo única também é válida quando reproduz melhor a composição. Preserve textos e controles como HTML.

Classifique imagens pela função, não pelo formato: fundo da tela → etapa 2; fundo de componente → etapa 3; imagem de conteúdo, ícone ou avatar → etapa 4. Nenhuma superfície deve ser aprovada com parte essencial do seu fundo ainda pendente. Planejar esses assets na etapa 1 não significa recortá-los ou gerá-los ali.

Faça somente a revisão do plano: ele cobre todas as regiões do wireframe e distingue assets de fundo dos assets restantes? Depois mostre

wireframe.txt

junto do plano e aplique o gate único para estrutura + sequência/técnicas propostas.

收到

$to-wireframe

生成的 ASCII 后，针对每个区域说明实施阶段和预期技术。将相同区域归为一组。在消息中以简短表格呈现计划。该计划不会添加到 ASCII 中：阶段和技术不属于 ids/classes，也不属于界面文本。

示例计划（根据参考图调整）：

区域/元素	阶段	预期技术
屏幕背景 + 装饰艺术	2	CSS 渐变 + 透明插图
Nav、hero 和 cards	3	HTML/CSS；先确定字体系列和字重，再进行精细调整
某个 card 的插画背景	3	图片 + CSS，与 card 表面一同实现
媒体区域	3 / 4	第 3 阶段完成结构；第 4 阶段加入内容图片
图标和头像	4	根据裁剪图生成 assets
完整屏幕	5	综合对比和最终修正

在保真度、工作量和位置/缩放调整的便利性之间进行权衡，从 CSS、image 或两者组合中做出视觉选择。简单颜色、渐变和形状更适合 CSS；复杂艺术和纹理更适合 image；需要独立调整时则适合拆分图层。若单张背景图能更好地复现构图，也可采用该方案。文本和控件应保留为 HTML。

按功能而非格式对图片分类：屏幕背景 → 阶段 2；组件背景 → 阶段 3；内容图片、图标或头像 → 阶段 4。任何表面都不得在其关键背景仍处于待处理状态时提交审批。在阶段 1 规划这些 assets 并不意味着要在该阶段裁剪或生成它们。

仅对计划进行审查：它是否覆盖 wireframe 的所有区域，并区分了背景 assets 与其余 assets？然后将

wireframe.txt

与计划一起展示，并应用针对结构 + 提议顺序/技术的统一审批门。

Etapa 2 — Fundo completo (CSS e/ou imagens)

阶段 2——完整背景（CSS 和/或图片）

Pré-requisito: wireframe e plano aprovados.

Criar
```
index.html
```
(esqueleto mínimo com o
```
<link>
```
para
```
assets/styles.css
```
e
```
<body>
```
vazio) e
```
assets/styles.css
```
(reset curto +
```
:root
```
com as custom properties que já der para definir).
Recriar o fundo completo com a técnica escolhida no plano: CSS, imagem única ou composição de camadas. Produzir agora as imagens necessárias, usando o procedimento de assets abaixo; não deixá-las para a etapa 4. Quando houver várias camadas independentes, gere-as no mesmo lote paralelo e só componha o fundo depois que todas terminarem.
Sem navbar, cards ou conteúdo. O
```
<body>
```
pode receber elementos decorativos quando necessários para compor o fundo; também podem ser usados backgrounds CSS e pseudo-elementos.
Ajustar posição, escala, recorte, transparência e mistura entre camadas. Abrir o arquivo no browser (
```
open index.html
```
) e comparar o fundo composto com a referência.
Gate.

前置条件：wireframe 和计划已获批准。

创建
```
index.html
```
（最小骨架，在其中加入指向
```
assets/styles.css
```
的
```
<link>
```
，并使用空的
```
<body>
```
）和
```
assets/styles.css
```
（简短 reset + 在
```
:root
```
中设置目前能够确定的 custom properties）。
使用计划中选定的技术重新创建完整背景：CSS、单张图片或多层组合。现在生成所需的图片，并使用下文的 assets 流程；不要将这些图片留到阶段 4。当存在多个相互独立的图层时，在同一批次中并行生成，待全部完成后再合成背景。
不添加 navbar、cards 或内容。必要时可在
```
<body>
```
中加入装饰性元素，也可使用 CSS backgrounds 和伪元素。
调整图层之间的位置、缩放、裁剪、透明度和混合方式。在 browser 中打开文件（
```
open index.html
```
），并将合成背景与参考图进行比较。
审批门。

Etapa 3 — Estrutura e componentes + fontes

阶段 3——结构和组件 + 字体

Aqui entram a estrutura e os textos do wireframe (markup no

index.html

, estilo no

assets/styles.css

): primeiro o chrome (

nav

— top bar e/ou sidebar), depois cada tipo de card (

card

card2

, …) e as demais regiões. Imagens que compõem o fundo de um componente entram junto dele; as independentes usam o mesmo lote paralelo do procedimento de assets. Um gate só, no fim.

此处加入 wireframe 中的结构和文本（markup 位于

index.html

，样式位于

assets/styles.css

）：先处理 chrome（

nav

，即 top bar 和/或 sidebar），然后处理每种 card 类型（

card

、

card2

……）及其他区域。构成组件背景的图片与组件一同实现；相互独立的图片则按照 assets 流程使用同一并行批次。最后只需一个审批门。

Fontes antes do ajuste fino

精细调整前先确定字体

Para cada tipo de tag distinto (
```
h1
```
…
```
t3
```
,
```
btn
```
,
```
lnk
```
, …), identificar família + peso. Se a skill/API local
```
find-font
```
estiver disponível, usar crop de uma linha com
```
text=
```
case-sensitive; caso contrário, escolher por julgamento visual a Google Font mais próxima e informar a aproximação.
Aplicar o
```
<link>
```
do Google Fonts no
```
index.html
```
ou
```
@font-face
```
no
```
styles.css
```
, com
```
font-family
```
/
```
font-weight
```
nas classes correspondentes. Mesmo id de tag = mesma tipografia.
Confirmar o carregamento das fontes antes de ajustar quebras de linha, dimensões e espaçamentos. Não adiar a escolha da família/peso para a revisão final.

Meta: cada superfície indistinguível da referência. Iterar medindo, não chutando:

cores (eyedropper / sample de pixels na
```
reference
```
)
gradientes (ângulo + stops)
transparência (glass vs opaco)
bordas / rim light (direção, soft vs hairline)
glow / sombra externa e inset
radius, padding, espaçamento entre elementos
tipografia já aplicada (família/peso, tamanho, altura de linha e espaçamento)

Fluxo por superfície (nav primeiro, depois card a card):

Crop da referência (ou lab side-by-side no browser).
Amostrar pixels (fill, rim TL/BR, texto, meta).
Escrever o markup no
```
index.html
```
e a classe em
```
assets/styles.css
```
; valores reutilizados viram custom property no
```
:root
```
.
Screenshot recreate vs crop; ajustar até bater.

Somente os assets atribuídos à etapa 4 continuam como placeholders, com dimensões reservadas. Fundos e fontes dos componentes já devem estar completos. Com as regiões implementadas e comparadas → gate.

对每种不同的标签类型（
```
h1
```
…
```
t3
```
、
```
btn
```
、
```
lnk
```
……），确定字体系列 + 字重。如果本地 skill/API
```
find-font
```
可用，则使用一行文本的 crop，并传入区分大小写的
```
text=
```
；否则根据视觉判断选择最接近的 Google Font，并说明该近似方案。
在
```
index.html
```
中添加 Google Fonts 的
```
<link>
```
，或在
```
styles.css
```
中使用
```
@font-face
```
，并在对应类中设置
```
font-family
```
/
```
font-weight
```
。标签类型中相同的 id 必须使用相同排版。
在调整换行、尺寸和间距之前，确认字体已成功加载。不得将字体系列/字重的选择推迟到最终审查阶段。

目标：每个表面都应与参考图难以区分。通过测量进行迭代，而不是靠猜测：

颜色（eyedropper /
```
reference
```
中的像素采样）
渐变（角度 + stops）
透明度（glass 与不透明）
边框 / rim light（方向，soft 与 hairline）
glow / 外阴影与 inset
radius、padding、元素间距
已应用的排版（字体系列/字重、字号、行高和字间距）

按表面逐一推进（先 nav，再逐个 card）：

裁剪参考图（或在 browser 中并排查看）。
采样像素（填充、TL/BR 边缘 rim、文本、meta）。
在
```
index.html
```
中编写 markup，在
```
assets/styles.css
```
中编写对应类；重复使用的值应成为
```
:root
```
中的 custom property。
截取 recreate 与 crop 的对比图；调整直至匹配。

仅分配给阶段 4 的 assets 继续使用 placeholder，并预留尺寸。组件的背景和字体此时应已完整。实现并比较所有区域后 → 审批门。

Etapa 4 — Assets restantes

阶段 4——剩余 assets

Implementar os

[ico:]

[img:]

[av:]

e demais assets que o plano deixou para esta etapa. Reutilizar os assets de fundo já aprovados; não regenerá-los apenas para cumprir esta etapa. Preparar todos os recortes da etapa e gerar os assets independentes em paralelo pelo procedimento abaixo; depois comparar o conjunto e apresentar o gate. Se não houver pendências, omitir esta etapa conforme o plano.

实现计划中留到此阶段的

[ico:]

[img:]

[av:]

及其他 assets。复用已经获批的背景 assets；不要仅为了完成本阶段而重新生成它们。预先准备本阶段所需的所有裁剪图，并按照下述流程并行生成相互独立的 assets；随后比较整体效果并提交审批门。如果没有待处理项，则按照计划省略本阶段。

Procedimento de assets (usado nas etapas 2, 3 e 4)

assets 流程（用于阶段 2、3 和 4）

Fazer todos os crops necessários na
```
reference
```
→
```
assets/crops/{id}.png
```
antes de iniciar qualquer geração.
Separar os requests em lotes: assets sem dependência entre si e com arquivos de destino distintos pertencem ao mesmo lote. Um asset que depende de uma imagem recém-gerada, ou de uma composição ainda não aprovada, fica no lote seguinte.
Regenerar cada lote com GPT Image 2 via OpenRouter (
```
gpt2
```
) em paralelo. Para ícones ou camadas recortadas, pedir PNG com fundo transparente; para um fundo completo, preservar o fundo necessário. Adaptar o prompt à arte (foto, textura, 3D etc.); não impor estilo flat a todo asset. Inicie cada comando em segundo plano e execute
```
wait
```
antes de encaixar qualquer resultado. Exemplo para dois ícones independentes:

bash

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id}.png \
  --filename design-systems/<slug>/assets/{id}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id-2}.png \
  --filename design-systems/<slug>/assets/{id-2}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

wait

Rodar a partir do cwd do repo de skills (ou paths absolutos). Para um único asset, rode o mesmo comando sem

e sem

wait

. Ajustar

--aspect-ratio

ao crop ou à camada de destino. Ao gerar um fundo a partir do mock, pedir apenas a arte de fundo, sem reproduzir textos, cards ou controles sobrepostos. Requer

OPENROUTER_API_KEY

(

.env

do projeto ou

~/.env

Depois do
```
wait
```
, encaixar cada resultado no HTML via
```
<img src="assets/{id}.png">
```
(ou
```
background-image
```
) e comparar com a ref.
Se algum falhou: preparar somente os assets afetados para um novo lote, com prompt ajustado; não regenerar os que já passaram.
Avaliar os assets na composição da etapa que os utiliza; o gate é o dessa etapa, sem uma aprovação extra por arquivo.

在生成任何内容之前，先完成所有必要裁剪：
```
reference
```
→
```
assets/crops/{id}.png
```
。
将请求拆分为批次：彼此无依赖且目标文件不同的 assets 属于同一批次。依赖新生成图片或尚未获批合成结果的 asset，应放入下一批次。
通过 OpenRouter（
```
gpt2
```
）使用 GPT Image 2 并行重新生成每个批次。对于图标或裁剪出的图层，要求提供透明背景的 PNG；对于完整背景，则保留所需背景。根据素材类型（照片、纹理、3D 等）调整 prompt；不要对所有 assets 强加 flat 风格。每个命令都应在后台启动，并在嵌入任何结果前执行
```
wait
```
。以下为两个相互独立图标的示例：

bash

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id}.png \
  --filename design-systems/<slug>/assets/{id}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

uv run ~/.agents/skills/openrouter-img/scripts/generate_image.py \
  --prompt "Recreate this UI icon/asset exactly. Flat, clean edges. Transparent background. No extra padding, no mockup frame." \
  --input-image design-systems/<slug>/assets/crops/{id-2}.png \
  --filename design-systems/<slug>/assets/{id-2}.png \
  --model gpt2 --resolution 1K --aspect-ratio 1:1 &

wait

在 skills 仓库的 cwd（或使用绝对路径）中运行。对于单个 asset，运行相同命令，但不加

和

wait

。根据 crop 或目标图层调整

--aspect-ratio

。从 mock 生成背景时，只要求生成背景艺术，不要复现叠加其上的文本、cards 或控件。需要

OPENROUTER_API_KEY

（项目

.env

或

~/.env

）。

```
wait
```
后，通过
```
<img src="assets/{id}.png">
```
（或
```
background-image
```
）将每个结果嵌入 HTML，并与参考图比较。
如果某个 asset 生成失败：只将受影响的 assets 放入新批次，并使用调整后的 prompt；不要重新生成已经通过的 assets。
在使用这些 assets 的阶段中评估其合成效果；审批门属于该阶段，不应为每个文件额外设置一次审批。

Etapa 5 — Revisão final integrada

阶段 5——综合最终审查

Comparar uma screenshot da tela completa com a referência, no mesmo viewport, com fontes e assets carregados.
Conferir a cobertura do wireframe/plano e corrigir diferenças de integração: sobreposição de camadas, recortes, alinhamentos, quebras de linha e espaçamentos após a entrada dos assets.
Verificar paths relativos e os comportamentos implementados, se houver. Informar aproximações ou pendências reais.
Mostrar a tela completa e os arquivos finais → Gate. Esta etapa consolida o resultado; fontes e fundos já foram implementados nas etapas anteriores.

在相同 viewport 下，对完整屏幕的 screenshot 与参考图进行比较，确保字体和 assets 已加载。
检查 wireframe/计划的覆盖情况，并修正集成差异：assets 加入后产生的图层重叠、裁剪、对齐、换行和间距问题。
验证相对路径和已实现的行为（如果有）。说明近似之处或实际遗留问题。
展示完整屏幕和最终文件 → 审批门。 本阶段用于整合结果；字体和背景已在前几个阶段完成实现。

Não fazer

不要做

Pular gates ou "adiantar" várias etapas num único turno.
Na etapa 1: medir, croppar, fazer OCR, desenhar arte, ou refinar o wireframe além da revisão única.
Adiar imagens essenciais de fundo para a etapa 4, ou deixar a escolha de fontes para a revisão final.
Inventar textos ilegíveis no wireframe.
Desenhar caixa de componente sem label de região, ou achatar cards-filho em texto solto dentro do pai.
Marcar nav ativo como
```
[lnk:]
```
(use
```
[btn:]
```
/ variante).
Tratar ícones/imagens com Lucide/placeholder "parecido" quando o plano pede asset gerado da ref.
Escrever CSS inline (
```
<style>
```
no HTML ou
```
style="…"
```
no elemento) — todo estilo vai para
```
assets/styles.css
```
.
Criar
```
package.json
```
, bundler, framework ou espalhar arquivos fora de
```
assets/
```
.

跳过审批门，或在单个回合中“推进”多个阶段。
在阶段 1：进行测量、裁剪、OCR、绘制美术内容，或对 wireframe 进行超出单次审查之外的细化。
将关键背景图片推迟到阶段 4，或将字体选择推迟到最终审查。
在 wireframe 中臆造无法辨认的文本。
绘制没有区域标签的组件框，或将子 cards 压平成父元素中的散乱文本。
将激活的 nav 标记为
```
[lnk:]
```
（应使用
```
[btn:]
```
/变体）。
当计划要求从 ref 生成 asset 时，使用 Lucide/“相似”的 placeholder 代替图标/图片。
编写内联 CSS（HTML 中的
```
<style>
```
或元素上的
```
style="…"
```
）——所有样式都应放入
```
assets/styles.css
```
。
创建
```
package.json
```
、bundler、framework，或将文件散落在
```
assets/
```
之外。