### [Paper](https://dkwy.com/)

**Published:** 2026-05-06T08:06:09

**Author:** 蛋壳

**Excerpt:** Paper 是一个现代设计平台，通过将代码直接构建到创意画布中，从根本上重新构想设计师的工作方式。与传统设计工具在设计和开发之间创建分离不同，Paper 让设计师使用真实的 CSS flexbox 创建布局，生成生产就绪的 React 代码组件，并应用高级视觉效果如动画 shader。该平台集成了多个 AI 图像生成模型（Flux 2、OpenAI Image Edit、Nano Banana Pro），同时让设计师保持完全控制。团队可以在共享文件上实时协作，每个设计元素都可以精确导出——从布局到交互式 shader 效果。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 效果和复杂的颜色处理，创建独特的品牌资产、营销材料和视觉设计，无需在多个工具之间切换。
-   **设计师-开发者协作：**通过实时编辑、代码导出和共享设计文件，实现设计和工程团队之间的无缝协作，作为产品视觉的单一真实来源。
-   **品牌与标识设计：**构建包含颜色管理、字体控制和可重用组件的全面品牌系统。提取和维护调色板，设计一致的视觉系统，并在团队间共享。



---