pen.dev

学完本节你能做什么

• 在浏览器中直接使用设计画布进行 UI 原型绘制，并自动生成对应的 HTML/CSS 代码。
• 将设计稿快速转化为可运行的代码片段，减少手动编写样式的时间。
• 通过可视化编辑与代码同步，提升前端开发与设计协作效率。

前置条件

• 确保使用现代浏览器（Chrome 90+、Edge 90+、Firefox 90+ 或 Safari 15+）。
• 无需安装任何软件或插件，pen.dev 为纯 Web 应用。
• 建议准备一个需要快速验证的 UI 设计思路（如按钮、卡片、导航栏等简单组件）。

分步操作

步骤 1：进入 pen.dev 主界面

1. 在浏览器地址栏输入 https://www.pen.dev/ 并回车。
2. 等待页面加载完成，你会看到左侧为设计画布，右侧为代码编辑器（默认显示 HTML 和 CSS 面板）。

步骤 2：在画布上创建基本元素

1. 点击左侧工具栏中的 矩形 图标（或按下快捷键 R）。
2. 在画布上按住鼠标左键并拖动，绘制一个矩形框（例如 200px × 100px）。
3. 松开鼠标后，矩形出现在画布上，同时右侧代码编辑器自动生成对应的 <div> 和 CSS 样式。

步骤 3：调整元素样式

1. 选中画布上的矩形（单击该元素，出现蓝色边框表示选中）。
2. 在右侧属性面板（位于代码编辑器上方）中，修改以下属性：

• 背景色：点击色块，输入 #4A90E2 或直接选择蓝色。
• 圆角：在 border-radius 输入框中输入 8px。
• 文本：在 content 输入框中输入 按钮，并设置字体大小为 16px、颜色为 #FFFFFF。

3. 观察画布实时更新，同时右侧 CSS 代码自动同步变化。

步骤 4：生成并导出代码

1. 完成设计后，点击右上角 导出 按钮（图标为向下箭头）。
2. 在弹出的菜单中选择 复制 HTML 或 复制 CSS。
3. 将复制的代码粘贴到你的项目文件中（如 index.html 或 style.css），或直接点击 下载 保存为 .html 文件。

预期结果

• 你可以在画布上完成一个简单的 UI 组件（如按钮、卡片）的设计，并直接获得可直接运行的 HTML/CSS 代码。
• 代码与画布实时同步，无需手动编写样式，减少 50% 以上的重复性 CSS 编写工作。
• 导出的代码可以直接在浏览器中打开，无需额外依赖库。

常见问题与排查

注意事项

• pen.dev 目前仅支持基础的 HTML/CSS 生成，不包含 JavaScript 交互逻辑。
• 画布上的元素坐标与尺寸基于绝对定位生成，导出后如需适配不同屏幕，需手动添加媒体查询。
• 设计复杂组件（如表格、表单）时，建议先在画布上搭建结构，再手动调整代码以优化语义化。
• 每次导出仅包含当前画布上的元素，不会保留历史版本。