# #WorkBuddy# 我不会切图也能出界面：把一张草图变成能跑的网页原型，我只用了一句话

我们组常有个尴尬需求：做个**内部小工具的前端**——一个查询页、一个录入框、一个看板。活不大，但每次都得有人"切图"：开编辑器、写 HTML/CSS、调布局、找图标、对齐、再调……半天就没了，而这半天本来该用在逻辑上。

我以前就是那个半天。直到这回我试了个工作流：**不发设计稿、不发规格书，直接把一张草图（甚至随手画的方框）丢给 WorkBuddy，说"照这个做个能跑的页面"，它出单文件 HTML，我浏览器一开就能看。**

先说清楚：WorkBuddy 装好登录就能用，**不用配前端环境、不用装 Node、不用开调试端口**，这点对后端同学尤其友好。下面是我"旧办法 vs 新办法"的真实对比，以及几个让我返工的坑。

---

## 我以前怎么干（旧办法）

1. 新建 `index.html`，手写 `<div>` 骨架
2. 翻半天 CSS，调 flex 布局、调间距
3. 找图标：引个图标库，或自己画 SVG
4. 配色凭感觉，调三遍还是丑
5. 本地起个服务看效果，发现错位，再改

一个内部小页面，半天起步，而且我并不享受这个过程。

## 我现在怎么干（新办法）

1. 画张草图（mspaint 拉几个方框都行），或者直接打字描述布局
2. 发给 WorkBuddy："照这个做个单文件 HTML 页面，深色风格，字段有 XX"
3. 它出 `.html`，我双击用浏览器打开看
4. 不对的地方一句话改，确认后搬进项目

同一件事，**三分钟出可看原型**。下面是我这次的具体三步。

---

## 第一步：给"草图或描述"，别给规格书

我那次的输入极糙——mspaint 画了个登录页：上方标题、中间两个输入框、一个按钮。配一句：

```
照这张草图做一个单文件 HTML 登录页：
深色背景、标题"内部系统"、两个输入框（账号/密码）、一个登录按钮。
所有样式内联，不引外部资源，双击就能在浏览器打开。
```

注意我加了"所有样式内联、不引外部资源"——这是后面踩坑换来的经验，先说死省得返工。

![image.png](https://developer.qcloudimg.com/http-save/yehe-12778039/3fbe48ec38fa87ef7153109d22c27a12.png)

## 第二步：打开看，而不是盯着代码审

它给的是一整段带 `<style>` 的 HTML。我**不逐行读**，直接存成 `.html` 双击打开：

```
把上面的代码存成 login.html，我自己在浏览器看效果。
先别解释，等我说哪里要改。
```

这一步心态很重要：原型阶段，**看效果比读代码快**。肉眼一扫就知道"按钮太靠左、输入框太宽"，比对着 CSS 猜直观十倍。

![image.png](https://developer.qcloudimg.com/http-save/yehe-12778039/c41736ada41f3de51ee71dfbf86ee227.png)

## 第三步：用"人话"迭代，不做"程序员"

看到问题我就说人话：

```
按钮居中、输入框宽度统一到 320px、标题和输入框之间留 24px 间距。
改完把新代码整段给我。
```

它改完我再看。来回两三轮，一个能拿去给同事评审的登录页就成了。这中间我**一行 CSS 没写**。

![image.png](https://developer.qcloudimg.com/http-save/yehe-12778039/ee3e0b379dc67431502c1011946d94fa.png)

---

## 三个让我返工的坑

### 坑一：要得太笼统，出来四不像

最早我只说"做个好看的登录页"，它自由发挥，配色字体全按它喜好来，跟我想要的"内部系统克制风"完全两路。

教训：**给约束，不给自由**。布局（几个区块）、配色（深/浅、主色）、字段（具体有哪些），这三样先定，它才不会跑偏。原型是"照着做"，不是"帮你想"。

### 坑二：它引了外部图标/字体，离线打不开

有次它为了好看引了个 CDN 图标库和谷歌字体。我电脑有网好看，发同事断网一开，**图标变方块、字体掉链**。

教训：**强制"单文件、样式内联、系统字体栈"**。跟"零依赖才能到处跑"是同一个道理——原型要能丢给任何人直接开，不能绑网络。

### 坑三：直接让它改我正经项目

原型顺手了，我曾想让它直接改项目里的真页面。结果它"顺手"把我的目录结构也调了，差点翻车。

教训：**原型归原型，验证归验证**。先在独立 `.html` 里定稿，确认无误，再 manually 把结构和样式搬进项目。AI 出的原型是"参考答案"，不是"直接覆盖真文件"的刀。

---

## 我现在的标准动作

这类内部小界面，我现在一律先走"草图/描述 → 单文件原型 → 浏览器看 → 人话迭代"四步，定稿后再落地。WorkBuddy 的 Skill 机制也能把"单文件内联、系统字体、先原型后落地"这些偏好固化，下次一句话触发。

## 什么时候该这么干，什么时候别

- **适合**：内部工具前端、活动页、看板、任何"要快点看到样子"的界面。
- **不适合**：要严谨组件化、要接框架（React/Vue）的正经产品前端——那该走工程化，原型只用来对齐需求。
- **铁律**：凡是让它改你项目里的真文件，先在独立副本验证、确认再搬。原型再顺，落刀前你都是那道关。

写这篇时我想，这类工具没让我变成前端，它只是把我"为了看个样子而半天切图"的成本削掉了。样子定得快，和同事对齐就快，真正写逻辑的时间反而多了。

> 本文为个人真实使用体验分享，所有操作步骤均在本机 Windows 环境实测复现。

我们组常有个尴尬需求：做个内部小工具的前端——一个查询页、一个录入框、一个看板。活不大，但每次都得有人"切图"：开编辑器、写 HTML/CSS、调布局、找图标、对齐、再调……半天就没了，而这半天本来该用在逻辑上。

**#WorkBuddy# 我不会切图也能出界面：把一张草图变成能跑的网页原型，我只用了一句话**

前端

开发工具

架构设计

我用一句话把草图变成可运行的网页原型，省下半天切图时间。对比旧办法，WorkBuddy只需描述或草图，三分钟出单文件HTML，浏览器直接看。注意给约束、禁外部资源、独立验证再落地，适合内部工具快速对齐，不适合正式产品工程化。

代码解释

WorkBuddy 

Windows

ReAct 

2026上云采购 | AI焕新·智启新局

workbuddy

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

**#WorkBuddy# 我不会切图也能出界面：把一张草图变成能跑的网页原型，我只用了一句话**-腾讯云开发者社区-腾讯云

#WorkBuddy# 我不会切图也能出界面：把一张草图变成能跑的网页原型，我只用了一句话

#WorkBuddy# 我不会切图也能出界面：把一张草图变成能跑的网页原型，我只用了一句话

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐