前端工程师的 AI 设计工作流：从 ASCII 原型到代码生成

核心特性：自动保存到 ascii-ui-design/ 文件夹，支持沉浸式、模块化等多种布局风格，提供完整设计说明和版本管理。

适用场景：项目初期快速验证想法、团队讨论时快速调整布局、需要版本控制的设计文档。

2.2 Wireframe Design Skill —— 专业级设计原型

ASCII vs SVG：如何选择

推荐工作流：

想法 → ASCII 原型（快速验证） → SVG 线稿（设计定稿） → 代码实现

核心特性

Wireframe Design Skill 能够基于 ASCII 原型或文字描述，生成高保真的 SVG 线稿：

• 像素级精确：尺寸、间距、圆角都准确表达
• 可缩放：放大不失真，适合各种屏幕尺寸
• 可编辑：可用 Figma 等工具进一步编辑
• 开发友好：直接提供设计参数，减少沟通成本

工作流程

Step 1: 需求分析 提取关键信息：平台、产品类型、核心功能、约束条件。

Step 2: 方案提案 呈现 2-3 种不同的设计方案，对比优缺点。

Step 3: 搜索设计规范 使用 /ui-ux-pro-max 技能查找平台规范：

# iOS 布局指南
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

Step 4: 生成 SVG 线稿 生成极简风格的线稿，无填充色、无颜色（仅 #333 和 #999）、无图标。

Step 5: 文档输出 创建 README.md，包含文件列表、布局结构、组件分解、交互流程。

三、Frontend Design Skills 选择策略

3.1 三种主流 Frontend Design Skills 对比

Anthropic 官方版 frontend-design

优势：官方支持，与 Claude 深度集成；基础扎实，涵盖常见设计模式；简洁易用，上手快速。

局限性：AI 味明显（蓝紫配色、渐变背景）；组件有限，复杂布局支持不足。

适用场景：简单内部工具、原型快速验证、学习阶段。

GLM 版本 frontend-design-glm

优势：中文优化，对中文排版和字体处理更好；组件遵循更严格；审美更符合 B 端产品。

局限性：与 Claude Code 集成度较低；最佳效果需要使用智谱 AI 服务。

适用场景：中文为主的 Web 应用、B 端产品、后台管理系统。

ui-ux-pro-max

数据规模：

• 57 种 UI 风格：glassmorphism、minimalism、brutalism 等
• 95 个配色方案：覆盖各行业
• 56 种字体搭配：全部集成 Google Fonts
• 24 种图表类型：专门针对 Dashboard
• 98 条 UX 最佳实践：响应式布局规则等
• 8 种技术栈：HTML+Tailwind、React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter

优势：设计资源最丰富，拥有最大的设计数据库；风格最多样，覆盖从极简到炫酷的各种风格；多技术栈支持，不限于 Web；交互最好，微交互、动画效果最佳。

局限性：学习曲线较高；有时为了更好效果会不严格使用组件。

适用场景：需要独特设计风格的产品、多技术栈项目、C 端产品。

3.2 选择建议

四、完整 OPC 工作流实战

4.1 工作流总览

1. 需求分析（10 分钟）
   ↓
2. ASCII 原型绘制（30 分钟）
   ↓
3. SVG 线稿生成（1 小时）
   ↓
4. UI 代码生成（2 小时）
   ↓
5. 功能开发（4 小时）
   ↓
6. 测试优化（2 小时）

总计：约 1 个工作日 完成一个完整功能模块。

4.2 实战案例：构建工单列表页

场景描述

为客服系统重构工单列表页，技术栈：Vue3 + Ionic8 + Capacitor。

第一步：需求分析（10 分钟）

核心需求：

• 显示工单列表（编号、标题、状态、优先级）
• 支持筛选（全部、处理中、已完成）
• 支持搜索（按标题搜索）
• 下拉刷新、上拉加载

第二步：ASCII 原型（30 分钟）

使用 ASCII Design Skill 绘制原型：

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

第三步：SVG 线稿（1 小时）

基于 ASCII 原型，使用 Wireframe Design Skill 生成 SVG 线稿：

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

第四步：UI 代码生成（2 小时）

选择合适的前端设计技能生成代码：

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

第五步：功能开发（4 小时）

基于生成的 UI 代码，添加实际功能：

<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）
• 优化交互动画（添加过渡效果）
• 测试边界情况（空列表、加载失败）
• 性能优化（虚拟列表、图片懒加载）

总结

通过三大 AI 设计 Skill 的组合——ASCII Design Skill、Wireframe Design Skill 和 Frontend Design Skills，前端开发者完全可以独立完成从产品设计到界面开发的完整流程。

核心价值：

1. 效率革命：从传统流程的 1-2 周缩短到 1-2 天，效率提升 10 倍
2. 创意自由：想法和代码之间没有隔阂，创意直接落地
3. 技能升级：从'只会写代码'到'能设计能开发'
4. 成本降低：不依赖外部设计和产品资源，一人成军

技能选择建议：

• 入门学习：从 ASCII 原型开始，掌握布局思维
• 快速验证：使用 Anthropic 官方版，快速出原型
• 专业应用：选择 ui-ux-pro-max，获得专业级设计效果
• 中文项目：考虑 GLM 版本，更好的中文支持和组件遵循
• B 端产品：GLM 版本或 ui-ux-pro-max + 组件库
• C 端产品：ui-ux-pro-max，追求最佳视觉效果和交互体验

掌握这套 OPC 工作流，你就掌握了独立开发的核心竞争力。无论是创业还是在大公司快速验证想法，这套技能都将显著提升你的产出能力。