前端独立产品设计全流程：基于 AI 的 ASCII、Wireframe 与代码生成工作流

核心特性：

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

适用场景：

• 项目初期快速验证想法
• 团队讨论时快速调整布局
• 需要版本控制的设计文档

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

ASCII vs SVG：如何选择

推荐工作流：

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

核心特性

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

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

工作流程

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

方案提案：呈现 2-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

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

文档输出：创建 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 工作流，你就掌握了独立开发的能力。无论是独立开发、创业，还是在大公司快速验证想法，这套技能都将成为你的核心竞争力。