Start from a product goal, PRD, current screen, screenshot, readable Figma material, or brand reference. UIDesigner produces an HTML-first artifact with the responsive behavior, states, accessibility, and assets the product needs.从产品目标、PRD、现有界面、截图、可读取的 Figma 材料或品牌参考出发，UIDesigner 会产出以 HTML 为主、包含响应式、运行状态、可访问性和资源的设计成果。製品目標、PRD、現画面、画像、読み取れる Figma 資料、ブランド資料から、レスポンシブ・状態・アクセシビリティ・素材を備えた HTML 中心の成果物を作ります。Parta de objetivo, PRD, tela atual, captura, material legível do Figma ou referência de marca. O UIDesigner entrega um artefato HTML-first com responsividade, estados, acessibilidade e recursos.
UIDesigner traces the workflow, source material, and existing structure before shaping an interface you can inspect, revise, package, or hand to engineering.
Turn a PRD, requirement, or business process into clear information architecture, interaction flow, and interface states.
Work from screenshots, readable Figma material, or an existing site while preserving the real product structure.
Design tables, filters, charts, loading, empty, error, and permission states around realistic data and actions.
Define reusable tokens and components, or audit an interface for hierarchy, consistency, responsiveness, and accessibility.
UIDesigner maps the real tasks and states first, then produces a reviewable HTML artifact with the interactions needed to test the design.
Share the goal, users, PRD, current screen, Figma material, or brand reference.
Review the workflow, information hierarchy, components, and required runtime states.
Use the editable HTML result to review layout, behavior, responsive rules, and content.
Deliver assets, state notes, accessibility decisions, and an implementation-ready artifact.
The design records whether decisions came from a PRD, current screen, screenshot, Figma material, or a stated assumption.
Product materials stay on your machine by default; enabled model or connected services receive what their calls require.
Review states, responsive behavior, accessibility, assets, and the final package before engineering starts.
See security →An HTML-first, editable interface artifact with responsive behavior, product states, accessibility decisions, assets, and handoff notes based on your source material.以 HTML 为主、可编辑的界面产物，包括响应式行为、产品运行状态、可访问性决定、资源和交付说明。HTML 中心の編集可能な UI、レスポンシブ挙動、製品状態、アクセシビリティ判断、素材、引き渡しメモを納品します。Um artefato de interface HTML-first e editável, com responsividade, estados, acessibilidade, recursos e notas de entrega.
Yes. It can use readable Figma material, screenshots, current screens, existing sites, PRDs, and brand references, while recording which source informed each decision.可以。它能读取可访问的 Figma 材料、截图、现有界面、站点、PRD 和品牌参考，并标明每项决定的来源。はい。読み取れる Figma、画像、現画面、既存サイト、PRD、ブランド資料を使い、判断の出典を記録します。Sim. Ele usa material legível do Figma, capturas, telas, sites, PRDs e referências de marca, registrando a fonte de cada decisão.
UIDesigner focuses on the interface artifact and handoff. ProductDeveloper can take the approved design into the repository, implement it, run tests, and provide verification evidence.UIDesigner 负责界面产物与交付；确认后可由 ProductDeveloper 进入代码仓库实现功能、运行测试并提供验证证据。UIDesigner は UI と引き渡しを担当し、承認後は ProductDeveloper がリポジトリで実装・テスト・検証します。O UIDesigner cuida da interface e da entrega; o ProductDeveloper pode implementar o design aprovado, testar e fornecer evidências.
Free, open source, runs on your machine.
