Orkas Orkas
Download GitHub
HTML-first UI design HTML 优先的 UI 设计

UIDesigner Turn a product goal or screenshot into UI you can keep revising. 把产品目标或截图变成可以持续修改的 UI。

UIDesigner transforms product goals, PRDs, existing screens, screenshots, inspectable Figma or design material, and brand references into HTML-first, continuously editable, independently packageable interface deliverables. Ordinary single pages follow a low-latency path; specialized design-system, accessibility, runtime, source-fidelity, and review capabilities load only when needed. UIDesigner 把产品目标、PRD、现有界面、截图、可读取的 Figma/设计稿材料和品牌参考转成 HTML 优先、可持续修改、可独立打包的界面产物。普通单页走低延迟路径，复杂设计系统、可访问性、运行时、源稿保真和审查能力只在需要时加载。

Download Orkas and design a screen 下载 Orkas，设计第一个界面
  • HTML is the default artifact 默认交付 HTML
  • References remain traceable 参考来源可追溯
  • Revisions update one canonical artifact 后续修改更新同一份产物
UI Responsive product dashboard 响应式产品看板

Redesign this onboarding dashboard from the screenshot and PRD. Keep the brand colors, improve hierarchy, and make the task list work on desktop and mobile. 根据截图和 PRD 改版新手引导看板，保留品牌色、增强信息层级，并让任务列表适配桌面和移动端。

HTML artifact HTML 产物 responsive

Your first workspace 你的第一个工作区

Acceptance 验收 desktop + mobile
✓ Hierarchy, focus, and responsive layout 层级、焦点与响应式布局 Deterministic checks complete 确定性检查完成 pass
Artifact ownership 明确产物归属 Standalone design defaults to one stable HTML artifact; repo implementation uses the real app files as canonical. 独立设计默认使用一份稳定 HTML 产物；仓库内实现以真实应用文件为准。
Minimal capability loading 按需加载能力 Starts with the smallest design execution path and adds source, system, accessibility, live-data, or formal review only when triggered. 从最小设计执行路径开始，只在触发时加入源稿、设计系统、可访问性、实时数据或正式审查能力。
Source fidelity 源稿保真 Observed content and visual rules stay distinct from inferred placeholders and proposed creative decisions. 实际观察到的内容和视觉规则与推断占位及创意建议明确区分。
Continuous revision 持续修改 Follow-ups patch the same canonical artifact and preserve unrelated user edits. 后续请求修改同一份标准产物，并保护用户无关改动。
Usage example 使用示例

From the current Orkas page and content map to a responsive Agent design system. 从当前 Orkas 页面与内容地图，到响应式 Agent 页面系统。

YOU UI request UI 需求
“Redesign the official-Agent landing pages shown in these screenshots. Keep Orkas chrome and tokens, make every Agent easy to switch, give the usage example real visual weight, and deliver editable HTML for 1440 px and 320 px.” “改版截图里的官方 Agent 落地页。保留 Orkas 顶部栏和 Token，让每个 Agent 都容易切换，增强使用示例的视觉分量，并交付适配 1440px 与 320px 的可编辑 HTML。”
current-agent-pages.png content-map.md theme.css 1440 + 320
ui-artifacts/official-agent-pages/index.htmlresponsive artifact响应式产物
Page job页面任务Explain one Agent and convert to download讲清一个 Agent，并引导下载Keep保留Orkas chrome, type, violet CTAOrkas 顶部栏、字体、紫色 CTAChange改变Agent switcher and realistic artifactsAgent 导航与真实产物展示
orkas.ai/agents/commander
OrkasCommanderDeepResearcherContentWriter
COMMANDERGive one goal.
Get one complete result.给出一个目标。
得到一个完整结果。
Orkas 中
Commander · DeepResearcher
COMMANDEROne goal.
One delivery.一个目标。
一份交付。
ARTIFACT.JSONformat: html
viewports: 1440, 320
source: screenshot + content map
revision: in-place
  • ✓ semantic navigation
  • ✓ visible focus
  • ✓ bilingual text fit
  • ✓ reduced motion
✓ 1440px✓ 320px✓ keyboard order✓ 0 overflow
index.htmlartifact.jsonvalidation-notes.md
UI work UI 工作

Design, redesign, systematize, or review. 新设计、改版、系统化或审查。

01

Single screens and pages 单页与单屏设计

Turn a clear product goal into a complete HTML interface with realistic content, states, responsive behavior, and reachable actions. 把明确产品目标做成完整 HTML 界面，包含真实内容、状态、响应式行为和可达操作。

  • landing page
  • dashboard
  • form and workflow
02

Screenshot and source redesign 截图与源稿改版

Inspect screenshots, Figma exports, PDFs, design JSON, existing HTML, or brand material and preserve source truth. 检查截图、Figma 导出、PDF、设计 JSON、已有 HTML 或品牌材料，并保护源稿事实。

  • fidelity work
  • keep/change boundary
  • brand reference
03

Systems and formal review 设计系统与正式审查

Add design-system, accessibility, color, live-data, complex-runtime, craft, or review specialists only when the task needs them. 只有任务需要时，才加入设计系统、可访问性、色彩、实时数据、复杂运行时、工艺或评审专才。

  • multi-screen system
  • accessibility audit
  • launch review
How it works 工作方式

Lock the artifact, route minimally, build, validate. 锁定产物、最小路由、构建、验证。

01

Resolve output and ownership 明确输出与归属

Default to HTML unless another final format is explicit; decide whether standalone artifact or repo files are canonical. 除非明确指定其他格式，否则默认 HTML；明确独立产物还是仓库文件为标准对象。

02

Choose the smallest design path 选择最小设计路径

Load source-fidelity or specialist capabilities only when they materially change the work. 只有对结果有实质影响时，才加载源稿保真或其他专项能力。

03

Build the complete interface 构建完整界面

Use product-specific content, accessible states, intentional layout, and implementation-ready structure. 使用产品专属内容、可访问状态、经过设计的布局和可实施结构。

04

Validate proportionately 按风险验证

Check deterministic structure and interaction; claim runtime, visual, or fidelity evidence only when actually executed. 检查确定性结构和交互；只有实际执行后才声称运行时、视觉或保真证据。

Design boundaries 设计边界

UI ownership stays clear across imagery, video, engineering, and live data. 图片、视频、工程与实时数据之间的 UI 归属保持清晰。

UI, not raw raster or video production 负责 UI，不替代图片或视频制作

ImageStudio handles raw still-image generation and edits; VideoStudio handles motion. UIDesigner integrates matching assets into the interface. ImageStudio 负责图片生成与编辑，VideoStudio 负责动态制作；UIDesigner 把匹配素材集成进界面。

Design, not full product engineering 负责设计，不替代完整产品研发

UIDesigner owns UI design artifacts and bounded repo UI work. Broader application logic, backend, migration, and engineering delivery belong with ProductDeveloper. UIDesigner 负责 UI 设计产物和有限仓库界面工作；更广的逻辑、后端、迁移和工程交付交给 ProductDeveloper。

Live data never stores secrets in the artifact 实时数据产物不保存秘密

Credentials, cookies, auth headers, tokens, and raw provider responses are not persisted in refreshable interfaces. 可刷新界面不保存凭据、Cookie、鉴权头、Token 或原始供应商响应。

Works with the team 团队协作

Carry the accepted design into engineering, imagery, and launch content. 把已接受设计继续推进到工程、图片和发布内容。

Commander can coordinate the full product surface 指挥官可协调完整产品表面

UIDesigner creates the interface, ImageStudio provides exact-fit still assets, ContentWriter refines source-faithful copy, and ProductDeveloper implements accepted behavior in the real app. UIDesigner 设计界面，ImageStudio 提供匹配图片，ContentWriter 优化忠于资料的文案，ProductDeveloper 在真实应用实现已接受行为。

Commander ImageStudio ProductDeveloper

Start directly with a UI request UI 需求可直接开始

Provide the UI or UX request, optional local app path, optional existing artifact directory, and any design references. 提供 UI/UX 需求，可选本地应用路径、已有产物目录和设计参考。

Turn the next product goal into editable UI. 把下一个产品目标变成可编辑 UI。

Download Orkas and give UIDesigner a PRD, screenshot, current screen, Figma material, brand reference, or clear interface goal. 下载 Orkas，把 PRD、截图、现有界面、Figma 材料、品牌参考或明确界面目标交给 UIDesigner。

Download Orkas — free 免费下载 Orkas
HTML-first · Source-aware · Continuously editable HTML 优先 · 理解源稿 · 可持续修改