界面、原型、组件和代码检查都围绕开放 Web 标准
Penpot 是面向产品界面、交互原型和设计系统的开源平台。设计师可以绘制响应式界面、建立组件与共享库，开发者则能查看基于 CSS、HTML、SVG 和 JSON 等开放标准的属性，减少从画板到代码时的猜测。
它提供浏览器云端服务，也支持自托管。团队可以评论、共享原型和维护设计令牌，适合网页与应用界面；但它不是海报模板站，照片修图、复杂插画和印刷排版仍应使用对应工具。
先做一个小流程，验证组件变体和响应式布局
- 从登录或设置页等三到五屏流程开始试用；
- 组件名称按语义和状态组织，不按画板位置命名；
- 在真实浏览器宽度检查 Grid、Flex 与文字溢出；
- 交接时同时保留设计文件、令牌和开发说明。
试用不要直接导入完整设计系统。选一个登录、忘记密码和设置页面组成的小流程，建立按钮、输入框与提示组件，制作默认、悬停、禁用和错误状态，再连接原型测试交互。
响应式界面应使用约束、Grid 或 Flex 规则，而不是为每个宽度复制一张静态画板。把同一组件放进窄屏和宽屏容器，输入长中文、英文与异常数据，检查换行、溢出和层级是否仍合理。
设计令牌只有与开发命名一致时才真正减少沟通
设计令牌需要与前端变量共同命名，例如颜色角色、间距等级和圆角用途。只在设计端建立一套漂亮名称、开发端另起一套，会增加映射成本；先约定少量基础令牌，再逐步扩展组件。
需要快速手绘讨论时，Excalidraw 更轻；需要精确 SVG 源文件可用 Inkscape。Penpot 更适合可点击产品原型、团队评审和设计系统，不必替代所有视觉工具。
云端协作上手快，自托管则需要团队承担运维
云端版适合快速验证，涉及内部项目时要检查团队权限、分享链接和导出方式。自托管带来控制权，也意味着维护数据库、文件存储、邮件、备份和升级；先在测试实例完整恢复一次再迁移。
设计交付不应只有一条可失效链接。重要项目保留可导出的设计文件、组件说明、令牌清单与关键流程截图，开发完成后再对照真实页面验收；设计稿是协作依据，不是最终产品本身。
