UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin

Docs

Platform
Site OverviewDevelopment LogCollaboration Guide
Template Library
Prompt BoardStyle Board
Agent Workflow
Agent Deep DiveProject Workflow AgentAgent Output PathPrompt Agent EvalsDesign System PanelsKnowledge Base GuideDeepSeek Agent Incident Notes
UI DESIGN LABDocumentation

Read public Markdown docs; admins can maintain them in editor pages.

Site Overview

Site Overview

Current positioning, product surfaces, core assets, access model, and version boundaries.

Back to docs

Chapter preview

当前定位当前产品入口网站信息架构创作主流程服务与数据流核心资产主要使用路径Agent 工作流现状权限模型数据与持久化当前边界文档维护规则术语表

UI DESIGN LAB 网站概述

Last updated: 2026-05-17

当前定位

UI DESIGN LAB 是一个面向 UI 创作、前端落地和 AI 生成复用的工作台。当前版本把社区作品、资源库、文档中心、我的项目和 Agent 创作页连成一条工作流：先从真实 UI 模板中学习结构和风格，再把可复用资产组合进新项目，保存为可继续迭代的作品，最后可以把作品发布回社区。

这份文档用于概述当前网站能做什么、主要入口在哪里、权限如何划分，以及哪些部分仍属于待完善边界。

当前产品入口

  • 首页 /{locale}：展示平台价值、社区作品墙和从灵感到生成的三步路径。
  • 社区 /{locale}/templates：公开模板/作品库，卡片内嵌真实 HTML 预览；预览 iframe 使用 sandbox="allow-scripts" 以支持 React/Vite、WebGL 和动效作品，同时不开放 same-origin。
  • 资源库 /{locale}/library：把已发布 Prompt Skills、Design Systems、文档和素材工作流入口收进同一个页面；账号设置页右侧提供资源库快捷入口，原有 /skills 和 /design-systems 详情路由仍保留用于深链和详情阅读。
  • 文档中心 /{locale}/docs：公开阅读网站概述、开发日志、模板库、Prompt 看板、Style 看板、Agent 深度解析和 Agent 工作流文档。
  • 我的项目 /{locale}/account：作为账号空间第一访问入口，展示用户显式保存后的生成作品，支持删除和发布到社区操作。
  • 项目创作 /{locale}/create/new：Pro/admin 可用的实时 Agent 工作台，支持网站/PPT/移动应用模式入口、统一输入框、素材输入、模型选择、右侧 Skills 推荐卡片、网页规划节点、预览和版本化修改。
  • 账号设置 /{locale}/account/settings：独立管理登录状态、Pro 权限、邀请码兑换、资源库快捷入口和退出登录。
  • 管理后台 /{locale}/admin：只对 Admin 显示入口，用于生成邀请码、管理注册用户，并维护创作者、Skills、模板和相关内容。

    • 网站信息架构

    Rendering diagram...

    创作主流程

    Rendering diagram...

    服务与数据流

    Rendering diagram...

    核心资产

    • 作品 / Templates：可浏览、可运行、可复盘的 UI 页面案例。
    • Design Systems：全局视觉语言，描述颜色、字体、间距、组件规则、响应式边界和 Design.md 约束。
    • Prompt Skills：局部创作能力，描述布局、动效、阴影、图标、WebGL、素材处理等可迁移技巧。
    • 素材 / Assets：图片、文件、链接和代码片段等项目上下文，会进入 Agent 生成链路。
    • Workflow Drafts：Agent 每次生成或修改产生的草稿版本，保存在 workflow_run_versions。
    • Generated Pages：用户点击 Save work 后发布到“我的项目”的正式作品，保存在 generated_pages，可删除或发布为社区模板。
    • Community Templates：公开社区中的模板记录，保存在 templates；用户从 My Projects 发布时会复制 HTML、Prompt、Design.md、技能关系和推断标签。
    • Docs：团队长期维护的 Markdown 文档，用于记录产品边界、工作流和版本变化。

    主要使用路径

    1. 从首页或社区进入模板，观察真实预览、页面结构和视觉方向。
    2. 在模板详情、资源库或设计系统页中学习 Design.md、Prompt Skill 和全局规则。
    3. 进入项目创作页，输入 brief，选择模型、Skills，并添加图片、链接、文件或代码参考。
    4. Agent 生成 Overview、Skills、Design System、网站架构、内容输入、约束和 Full Prompt，并在 Preview 窗口里用 代码 / Preview tabs 展示代码与最终预览。
    5. 用户确认后点击 Save work，把 workflow 草稿发布为“我的项目”中的正式作品。
    6. 从作品分析页返回 /create/new?work=<generatedPageId>，继续修改同一作品或发布为新作品。
    7. 在“我的项目”中删除不需要的作品，或把已保存作品发布到社区模板库。

    Agent 工作流现状

    /[locale]/create/new 是当前版本的核心生成入口，采用 workflow-draft first 模型：

    • 网站模式：Agent 先把需求拆成 Overview、Skills、Design System、网站架构、内容输入和约束。技术栈展示在 Overview 中，约束节点专注 Do、Don't do、反例和验收标准；随后编译 Full Prompt，并在同一个 Preview 窗口中生成代码 tab 与最终预览 tab。
    • PPT 和移动应用模式：当前只作为未来入口展示，后续会拥有各自的工作流节点和预览方式。
    • 修改模式：已有结果后，用户继续输入修改要求，Agent 按 Design System、Full Prompt、Preview 内代码 tab、Preview tab 顺序创建新版本。
    • 实时反馈：前端通过 /api/generate/workflow/stream 的 SSE 事件更新节点、连线、卡片内容和预览。
    • 素材输入：链接、代码、文件和图片会通过素材 API 进入上下文；私有文件存储在 workflow-assets bucket。
    • 生成稳定性：模型输出拆成 Brief JSON 和 HTML 文本两步，减少长 HTML 导致 JSON 截断或解析失败。
    • 显式保存：Agent 生成只写 workflow 草稿；只有用户点击 Save work 后，结果才进入 generated_pages。

    权限模型

    • Free：可浏览首页、社区模板、公开资源库内容、公开文档和基础账号页。
    • Pro：可查看完整 Prompt，复制/下载 Skill，使用生成工作区、Agent 工作流、素材上传和作品保存能力。
    • Admin：拥有 Pro 能力，并可看到管理入口；可进入后台生成邀请码、管理注册用户、维护内容和文档源文件。

    文档编辑页仍然写入仓库内 Markdown 文件。docs/SITE_CONCEPT.md、docs/DEVELOPMENT_LOG.md 和 docs/TEMPLATE_LIBRARY.md 的编辑入口只开放给 Admin，避免公开用户误改站点说明资料。

    数据与持久化

    当前版本依赖 Supabase：

    • profiles：用户角色、套餐和语言偏好。
    • skills：Prompt Skills 与 Design System Skill 的核心记录。
    • templates 及关联表：社区模板、标签、创作者和设计系统映射。
    • generated_pages：显式保存后的正式作品，带 HTML、Prompt、Design.md、模型信息和 workflow 回链。
    • generated_page_skills：正式作品关联的 Skills。
    • workflow_runs：一次 Agent 工作流运行。
    • workflow_run_assets：Agent 素材的元数据、提取文本、摘要和私有存储路径。
    • workflow_run_versions：每次初次生成或修改后的草稿版本。
    • workflow-assets：owner-only 的私有 Storage bucket。

    当前边界

    • Admin 仍以表单录入为主，列表编辑、发布/下架和删除流程还不完整。
    • 生成能力还没有额度账本；用户发布到社区后还缺少审核、下架、编辑和版本管理流程。
    • Auth、Pro 权限、后台写入、下载和 Agent 工作流缺少系统化 E2E 测试。
    • 部署环境和只读文件系统下的文档编辑策略仍需进一步规划。
    • 当前 seed 只保留少量 Design System 和 Prompt Skill 样本；扩充技能库应通过新的 migration/seed 流程完成。

    文档维护规则

    • 新增一级导航、公开入口或核心工作流时，同步更新“当前产品入口”和“主要使用路径”。
    • 改变 Pro/admin 权限、文档编辑策略或 Supabase RLS 时，同步更新“权限模型”和“数据与持久化”。
    • 改动 /[locale]/create/new、Agent 模式、SSE 事件、素材处理或显式保存模型时，同步更新 docs/PROJECT_WORKFLOW_AGENT.md。
    • 功能完成、重要修复、权限变化和文档结构变化应记录到 docs/DEVELOPMENT_LOG.md。
    • 这份文档保持“网站概述”定位：写清当前版本，不写成营销文案。

    术语表

    • 作品：一个可浏览、可保存、可继续修改的 UI 页面案例。
    • 模板：公开社区中的作品样本，通常带 HTML 预览、Prompt 和设计说明。
    • Design System：控制页面整体一致性的全局规则。
    • Prompt Skill：可复用的局部创作指令。
    • Agent：根据 brief、素材、模型和 Skills 生成或修改项目的工作流。
    • Full Prompt：生成页面时使用的完整指令。
    • Design.md：记录视觉规则、组件结构和响应式要求的设计说明文档。
    • Workflow Version：Agent 生成或修改后形成的草稿版本。
    • Generated Page：用户显式保存后的正式作品。