用 AI 独立完成前端设计：ASCII 原型、SVG 线稿与代码生成

文件会自动存到 ascii-ui-design/ 文件夹，支持沉浸式、模块化等多种布局风格，还会附上设计说明。我一般在项目早期用它快速把想法摊出来，或者团队讨论时当场改布局——比画板还快。

让设计更精准：Wireframe 线稿

ASCII 原型虽然快，但毕竟太糙。真要作为开发参考，还得看 SVG 线稿。

我的习惯是：想法出来了先用 ASCII 验证，方向没错再生成 SVG 线稿。Wireframe Design Skill 能够基于 ASCII 草图或文字描述，输出像素级精确的纯线条 SVG——没有颜色填充，只用 #333 和 #999，尺寸、间距、圆角都很明确。

它的工作过程大致分几步：

1. 需求分析——提取平台、产品类型、核心功能等关键信息。
2. 方案提案——给出两三种不同的布局思路，优缺点一目了然。
3. 搜索设计规范——用内置的 /ui-ux-pro-max 查找特定平台的最佳实践：

   python3 .claude/skills/ui-ux-pro-max/scripts/search.py "ios mobile layout" --stack html-tailwind
   python3 .claude/skills/ui-ux-pro-max/scripts/search.py "touch targets" --domain ux
   

4. 生成 SVG 线稿——输出极简线条，后续可以导入 Figma 继续编辑。
5. 输出说明文档——包含文件列表、布局拆解、交互流程等，方便交接。

选个顺手的代码生成器

线稿定下来，下一步就是把设计转成代码。这里有几个常见选择，各自有适用的场景。

Anthropic 官方版 frontend-design

优势是与 Claude 深度集成，基础扎实，上手快。但生成的配色容易带 AI 味（蓝紫渐变、大块背景），复杂布局的组件支持也有限。适合内部工具或快速出原型的阶段。

GLM 版本 frontend-design-glm

中文排版和字体处理更好，组件风格更贴近 B 端常见库（比如 Ant Design 那类）。和 Claude Code 的集成度稍低，部分功能需要智谱 AI 的服务。做中文 Web 应用或后台管理系统时，我会优先考虑它。

ui-ux-pro-max

这是设计资源最全的一个：包含 57 种 UI 风格、95 套配色、56 种字体搭配、24 类图表模板、98 条 UX 最佳实践，而且覆盖 HTML+Tailwind、React、Vue、Svelte、SwiftUI 等 8 种技术栈。用它做出来的交互动效很细腻，但学习曲线也高一些——有时为了效果会不那么严格地使用组件，得自己再规整。

没有哪个是银弹，根据项目阶段和关键需求选一个最顺手的就行。

实际跑一遍：工单列表页

拿一个客服系统的工单列表页重构为例，技术栈是 Vue3 + Ionic8 + Capacitor。整个流程拆成六个步骤，前后共一个工作日左右。

需求分析（10 分钟）
核心诉求：列表展示工单编号、标题、状态、优先级；支持按状态筛选（全部 / 处理中 / 已完成）；支持标题搜索；下拉刷新、上拉加载。

ASCII 原型（30 分钟）
直接告诉 AI：

/ascii-design 设计一个 iOS 端工单列表页，包含：
- 顶部导航栏：返回按钮、标题"我的工单"、搜索图标
- 搜索栏：展开式，搜索输入框
- 筛选标签：[全部][处理中][已完成]
- 工单列表：卡片式布局
- 浮动按钮：右下角"+"号

输出的文本草图很快就能确认布局，不用等任何人。

SVG 线稿（1 小时）
基于 ASCII 原型生成精准的 iOS 风格线稿：

/wireframe-design 生成工单列表页的 SVG 线稿
- 平台：iOS
- 主色调：蓝色系
- 卡片式设计

线稿明确每个元素的尺寸、间距，开发时可以直接照搬参数。

UI 代码生成（2 小时）
选 ui-ux-pro-max 出代码，样式带 Tailwind，整体简洁：

/ui-ux-pro-max 根据 wireframe-design 生成工单列表页
- 技术栈：Vue3 + Ionic8 + Tailwind CSS
- 风格：现代简约，卡片式布局
- 配色：蓝色系

功能开发（4 小时）
在生成的结构上接入真实接口，处理登录态和状态管理：

<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface Ticket {
  id: string;
  title: string;
  status: string;
  priority: string;
}

const tickets = ref<Ticket[]>([]);
const loading = ref(false);

const loadTickets = async (filter: string = 'all') => {
  loading.value = true;
  const response = await fetch(`/api/tickets?filter=${filter}`);
  tickets.value = await response.json();
  loading.value = false;
};

onMounted(() => {
  loadTickets();
});
</script>

测试优化（2 小时）
过一遍 iPhone SE、iPhone 14 Pro、iPad 几种尺寸；补上过渡动画；处理空列表和加载失败的 UI；虚拟列表和图片懒加载也顺手做进去。

整套流程走下来，重点是利用不同技能的定位快速迭代：ASCII 草图负责方向验证，SVG 线稿锁定设计细节，最后再用代码生成器把设计落地。如果你也受限于团队成员不全，或者自己想快速把想法跑起来，不妨试试这个组合。