Paper

代码原生设计平台，结合布局工具与动画 shader 和高级 AI 功能，用于创建生产就绪的设计和交互体验。

社区:

UI 与 UX 设计 AI 设计生成 AI 照片与图像编辑 AI 网站设计 AI 平面设计

访问官网

Atoms - 用 AI 构建网站与应用，无需编码

Atoms

Sponsor

无需编码，几分钟内验证创意、搭建网站和应用，获取首批客户。

概览
替代方案
数据分析

Atoms - 用 AI 构建网站与应用，无需编码

产品概览

什么是Paper？

Paper 是一个现代设计平台，通过将代码直接构建到创意画布中，从根本上重新构想设计师的工作方式。与传统设计工具在设计和开发之间创建分离不同，Paper 让设计师使用真实的 CSS flexbox 创建布局，生成生产就绪的 React 代码组件，并应用高级视觉效果如动画 shader。该平台集成了多个 AI 图像生成模型（Flux 2、OpenAI Image Edit、Nano Banana Pro），同时让设计师保持完全控制。团队可以在共享文件上实时协作，每个设计元素都可以精确导出——从布局到交互式 shader 效果。Paper 支持从早期构思到生产交接的全面设计工作流程。

主要功能

代码原生设计画布
使用真实的 CSS flexbox 布局创建设计，渲染效果与代码完全一致。通过 Copy as React 功能将设计导出为生产就绪的 React 组件，或转换为 Tailwind CSS，以 1:1 的保真度保留每个设计决策。
动画 Shader 与视觉效果
访问可编程 shader 效果库，包括网格渐变、液态金属、凹槽玻璃、半调和脉冲边框。直接在画布上创建动态图形和动态视觉效果，然后导出为视频或轻量级代码。
集成 AI 图像工具
使用 Flux 2、OpenAI Image Edit 1.5、Nano Banana Pro 和 Seedream 在画布内生成、编辑和增强图像。移除背景、放大图像、提取调色板，并在整个过程中保持完全的创意控制。
高级颜色与字体管理
支持现代色彩空间（sRGB、P3 色域、OKLCH、LAB、LCH）、可变字体自定义轴、光学尺寸调整和全面的文本格式控制。一键直接从图像中提取调色板。
实时团队协作
多个团队成员可以同时编辑同一文件，具有实时光标可见性和即时更新。添加评论、@协作者，并通过灵活的权限控制共享文件。
全面的导出选项
将设计导出为 React 代码、Tailwind CSS、SVG、PNG、WebP、AVIF 或 MP4 视频。每种导出都保持设计的完整意图，无论是交互式 shader、动画还是响应式布局。

使用场景

产品设计与组件系统 : 使用真实的 flexbox 设计 UI 组件，开发者可以直接集成到生产代码库中。构建和维护与开发工作流程无缝同步的设计系统和组件库。
Web 应用界面设计 : 使用基于 CSS 的布局工具创建响应式 Web 界面，然后导出为生产就绪的 React 或 Tailwind 代码。消除设计到开发的交接，确保像素级完美实现。
动效与交互设计 : 开发动画 shader 效果、动态图形和交互式视觉体验。将动画导出为视频或嵌入代码，用于 Web 应用和数字体验。
视觉与图形设计 : 应用高级视觉滤镜、shader 效果和复杂的颜色处理，创建独特的品牌资产、营销材料和视觉设计，无需在多个工具之间切换。
设计师-开发者协作 : 通过实时编辑、代码导出和共享设计文件，实现设计和工程团队之间的无缝协作，作为产品视觉的单一真实来源。
品牌与标识设计 : 构建包含颜色管理、字体控制和可重用组件的全面品牌系统。提取和维护调色板，设计一致的视觉系统，并在团队间共享。