Uyghur-to-Chinese Translation Tool — UI Design Skill

Purpose

Produce a complete, review-ready interface design (not a backend
implementation) for a product that recognizes Uyghur text from user input
(text or image) and translates it to Chinese through a two-model parallel
pipeline plus an evaluation step that auto-selects the best output.

The deliverable is an Ardot design file (.ardot) showing the full
pipeline as one scrollable workbench page. Model/OCR engineering is out of
scope for the design — only the UI surface, states, and copy are produced.

When to use

• User requests designing a Uyghur/Chinese translation tool, recognizer, or
  "维吾尔文识别翻译软件".
• User describes any of: input + recognition + dual translation + evaluation
• best-result-output flow, even if framed generically.
• User wants a mockup of a multi-model translation comparison or a
  translation-quality evaluation screen.

Do not use this skill to actually call translation/OCR APIs or to write
model code — steer those to engineering and keep the canvas work to design.

Pre-work: clarifying scope

Before drawing, confirm the deliverable is a design mockup. If the user
also expects working model calls, state clearly that the canvas deliverable
is the interface design and the model layer is a handoff. Then proceed.

Design language (defaults)

Establish a modern SaaS workbench aesthetic:

• Canvas: white #FFFFFF page; section surfaces #F9F9FB.
• Primary brand: purple #5046E5 (use for the preferred model hy3 and
  primary actions).
• Secondary model: teal #0EA5A4 (randomly-selected model).
• Success / best-result: green #10B981 (selection, final output).
• Warning / in-progress: amber #F59E0B.
• Text: near-black #18191C for headings, #5A6068/#8A8F98 for muted.
• Radius: 12px cards, 8px buttons, 100px pills/chips.
• Shadows: ultra-light only — 0 1px 2px rgba(15,20,25,0.04) and
  0 4px 12px rgba(15,20,25,0.06). No hard-offset or colored shadows.
• Font: Sarasa Gothic SC (Chinese). Available styles: Regular, Bold,
  Semi Bold, Light, Extra Light. No Medium — substitute Semi Bold.
• Uyghur text: render with textDirection: "RTL" so Arabic script reads
  correctly. Preserve the Uyghur string verbatim.

For a fuller token list and the per-module component breakdown (exact node
names, copy, and layout), load references/module-spec.md.

Page structure (top → bottom)

Build the page as a single vertical frame (#2:2-style root), width 1440,
with padding {l:48, r:48, t:0, b:56} and gap:0. Insert the following
top-level sections in order:

1. Top navigation — brand logo + "维译通 / 维吾尔文智能识别翻译" title;
   menu (工作台 / 历史记录 / 模型管理 / 帮助); settings icon + user avatar.
2. Pipeline stepper — 4 steps with connecting arrows:
   ① 识别 → ② 双模型翻译 → ③ 评估选优 → ④ 输出结果 (step 4 uses green ✓).
3. Input module — title row + a text/image tab switcher; text mode =
   multiline textarea with placeholder; image mode = dashed dropzone ("点击或拖拽图片…").
   Footer row: language auto-detect chip + char count + 清空 / 开始识别与翻译 button.
   Only show the active tab's panel; hide the other (mutually exclusive).
4. Recognition module — status badge ("识别中" amber dot) + Uyghur source
   display (RTL) in a light panel + meta row (识别置信度 / 字符数 / 复制原文).
5. Dual-model translation — section title + two side-by-side cards
   (horizontal gap:20): hy3 (首选模型, purple) and a random model
   (e.g. Qwen2.5-MT, teal, "本次随机选取"). Each card: model name + role tag,
   translation output panel, 语义保真度 score, 采纳 button.
6. Evaluation & selection — evaluator-model selector (e.g. GPT-4o) +
   comparison table with 3 metric rows (语义保真度 / 通顺度 / 术语准确), each
   with two score bars + values, plus a 综合得分（加权）row; a green
   recommendation banner naming the winner and why.
7. Best-result output — green-highlighted card: winner tag ("由 hy3 提供")
   + Uyghur source + large best Chinese translation + meta (综合置信度 / 端到端耗时)
   + 复制译文 / 导出 buttons.

Ardot drawing rules (critical)

These pitfalls were hit and fixed while building the reference design — avoid
them:

• Plan the whole page first, then draw in sections (nav+stepper → input →
  recognition → dual-model → evaluation → result). Keep each batch_edit
  ≤ 25 ops.
• Bindings expire after each batch. Never reuse a binding name (e.g.
  pageFrame, evalCard) in a later batch. Use the real node ID returned by
  the previous insert (e.g. 2:2, 2:150) as the parent in subsequent calls.
  Referencing an expired binding silently re-parents nodes to the page root.
• Verify every insert landed under the intended parent with one
  batch_read of the suspected parent before continuing; a single wrong
  parent breaks the whole subtree.
• Mutually-exclusive tabs: set visible:false on the inactive panel
  rather than stacking both visible.
• Uyghur strings must use textDirection:"RTL" or they render LTR/garbled.
• Font weight: Sarasa Gothic SC has no Medium; use Semi Bold.
• End with capture_layout(problemsOnly:true) on the root and a full-page
  capture_screenshot to self-verify; fix ≤ 4px noise, max 2 iterations/section.

Reference flow

1. create_design (once) → wait for ready.
2. search_style_guide (keywords: AI translation tool, clean SaaS, calm blue)
   → build_style_guide (style bento-attio-flat-modern, composition
   shadow-system-3tier). Keep it light for readability of long text.
3. Draw sections per the structure above; use real node IDs as parents.
4. Validate (layout + screenshot); adjust spacing/tokens only.
5. Present the result and offer dark mode / break-out pages as follow-ups.

Bundled resources

• references/module-spec.md — detailed per-module component spec (node
  names, exact copy, sizes, colors, sample Uyghur↔Chinese pairs) for faithful
  reproduction.