Interface Lab
Login
Site Overview

Site Overview

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

Interface Lab 网站概述

Last updated: 2026-05-17

当前定位

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

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

当前产品入口

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

网站信息架构

Rendering diagram...

创作主流程

Rendering diagram...

服务与数据流

Rendering diagram...

核心资产

  • 作品 / Templates：可浏览、可运行、可复盘的 UI 页面案例。
  • Style：网站设计系统描述颜色、字体、间距、组件规则、响应式边界和 Design.md 约束；PPT 风格描述演示文稿的视觉气质、配色、版式和节奏。
  • 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. 在模板详情、资源库 Style 页中学习 Design.md、Prompt Skill、网站设计系统和 PPT 风格。
  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：用户显式保存后的正式作品。