npx skills add https://github.com/constellos/claude-code --skill 'UI Wireframing'一种移动优先的 ASCII 线框图方法,用于在实现前规划 UI 布局。
线框图是 UI 开发工作流程的第一步。在编写任何代码之前,先在 WIREFRAME.md 文件中创建组件和页面布局的视觉 ASCII 表示。这确保了在结构、层次结构和交互模式上达成一致。
始终从最小的视口(375px 移动端)开始。首先为移动端限制进行设计,然后逐步增强以适应更大的屏幕:
在组件或页面目录中创建 WIREFRAME.md 文件:
components/
└── feature-card/
├── WIREFRAME.md # 线框图文档
├── feature-card.tsx # 实现
└── index.ts
app/
└── dashboard/
├── WIREFRAME.md # 页面线框图
└── page.tsx
在绘制之前,列出关键元素:
## 组件
- 包含徽标和导航的页眉
- 包含标题和行动号召的英雄区域
- 功能卡片(桌面端 3x 网格)
- 包含链接的页脚
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
使用 ASCII 艺术从移动端视口开始:
## 移动端布局 (375px)
┌─────────────────────────────────────┐
│ [Logo] [☰ Menu] │
├─────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ Feature 1 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 2 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 3 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ Links | Privacy | Terms │
│ © 2025 Company │
└─────────────────────────────────────┘
展示布局如何适应:
## 平板电脑布局 (768px)
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] │
├─────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────────────────┤
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │
│ │ Description │ │ Description │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ Feature 3 │ │
│ │ Description │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────┘
包含所有列的完整布局:
## 桌面端布局 (1024px+)
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] [CTA] │
├────────────────────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │ Feature 3 │ │
│ │ Description │ │ Description │ │ Description │ │
│ │ text here │ │ text here │ │ text here │ │
│ └────────────────┘ └────────────────┘ └────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ Links | Privacy | Terms © 2025 Company │
└────────────────────────────────────────────────────────────────┘
记录交互元素和数据流:
## 交互
### 导航
- 移动端:汉堡菜单打开全屏覆盖层
- 平板电脑+:水平导航栏可见
### 行动号召按钮
- onClick:导航到 /signup
- Hover:缩放 1.02,阴影增加
### 功能卡片
- Hover:带有阴影的抬起效果
- Click:导航到 /features/{id}
## 数据要求
- `features[]`: 功能对象数组
- `id`: string
- `title`: string
- `description`: string
- `icon`: IconName
Corners: ┌ ┐ └ ┘
Lines: │ ─
T-joints: ├ ┤ ┬ ┴ ┼
Button: [ Button Text ] or [ → ]
Input: [_______________]
Checkbox: [✓] Label or [ ] Label
Radio: (●) Selected or ( ) Unselected
Dropdown: [Option ▼]
Icon: [☰] [✕] [→] [←] [↑] [↓]
Image: ┌─────────┐
│ IMG │
└─────────┘
Padding: │ ← 16px → │
Gap: [Card] ← 24px → [Card]
Margin: ↑ 32px margin
# 组件/页面名称线框图
## 概述
组件/页面用途的简要描述。
## 组件
- 组件 1:描述
- 组件 2:描述
## 移动端布局 (375px)
[ASCII 线框图]
## 平板电脑布局 (768px)
[ASCII 线框图]
## 桌面端布局 (1024px+)
[ASCII 线框图]
## 交互
### 元素名称
- 事件:行为
## 数据要求
- `propName`: type - 描述
## 状态
### 加载中
[加载状态的 ASCII]
### 空状态
[空状态的 ASCII]
### 错误
[错误状态的 ASCII]
## 无障碍访问说明
- 键盘导航:Tab 键顺序,焦点状态
- 屏幕阅读器:ARIA 标签,语义化 HTML
- 颜色对比度:最小 4.5:1 比例
在进入实现阶段之前:
线框图批准后,继续使用 ui-design 技能,通过复合组件和 TypeScript 接口实现静态 UI。
每周安装量
0
仓库
GitHub 星标数
6
首次出现
Jan 1, 1970
安全审计
Mobile-first ASCII wireframe methodology for planning UI layouts before implementation.
Wireframing is the first step in the UI development workflow. Create visual ASCII representations of component and page layouts in WIREFRAME.md files before writing any code. This ensures alignment on structure, hierarchy, and interaction patterns.
Always start with the smallest viewport (375px mobile). Design for mobile constraints first, then progressively enhance for larger screens:
Create WIREFRAME.md files in the component or page directory:
components/
└── feature-card/
├── WIREFRAME.md # Wireframe documentation
├── feature-card.tsx # Implementation
└── index.ts
app/
└── dashboard/
├── WIREFRAME.md # Page wireframe
└── page.tsx
Before drawing, list the key elements:
## Components
- Header with logo and navigation
- Hero section with title and CTA
- Feature cards (3x grid on desktop)
- Footer with links
Start with the mobile viewport using ASCII art:
## Mobile Layout (375px)
┌─────────────────────────────────────┐
│ [Logo] [☰ Menu] │
├─────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ Feature 1 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 2 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Feature 3 │ │
│ │ Description text │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ Links | Privacy | Terms │
│ © 2025 Company │
└─────────────────────────────────────┘
Show how layout adapts:
## Tablet Layout (768px)
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] │
├─────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ │
│ [ Get Started → ] │
│ │
├─────────────────────────────────────────────────┤
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │
│ │ Description │ │ Description │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ Feature 3 │ │
│ │ Description │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────┘
Full layout with all columns:
## Desktop Layout (1024px+)
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Nav] [Nav] [Nav] [CTA] │
├────────────────────────────────────────────────────────────────┤
│ │
│ Hero Image │
│ │
│ Welcome to Our App │
│ ───────────────── │
│ Subtitle text here │
│ │
│ [ Get Started → ] │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
│ │ Feature 1 │ │ Feature 2 │ │ Feature 3 │ │
│ │ Description │ │ Description │ │ Description │ │
│ │ text here │ │ text here │ │ text here │ │
│ └────────────────┘ └────────────────┘ └────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ Links | Privacy | Terms © 2025 Company │
└────────────────────────────────────────────────────────────────┘
Document interactive elements and data flow:
## Interactions
### Navigation
- Mobile: Hamburger menu opens full-screen overlay
- Tablet+: Horizontal nav bar visible
### CTA Button
- onClick: Navigate to /signup
- Hover: Scale 1.02, shadow increase
### Feature Cards
- Hover: Lift effect with shadow
- Click: Navigate to /features/{id}
## Data Requirements
- `features[]`: Array of feature objects
- `id`: string
- `title`: string
- `description`: string
- `icon`: IconName
Corners: ┌ ┐ └ ┘
Lines: │ ─
T-joints: ├ ┤ ┬ ┴ ┼
Button: [ Button Text ] or [ → ]
Input: [_______________]
Checkbox: [✓] Label or [ ] Label
Radio: (●) Selected or ( ) Unselected
Dropdown: [Option ▼]
Icon: [☰] [✕] [→] [←] [↑] [↓]
Image: ┌─────────┐
│ IMG │
└─────────┘
Padding: │ ← 16px → │
Gap: [Card] ← 24px → [Card]
Margin: ↑ 32px margin
# Component/Page Name Wireframe
## Overview
Brief description of the component/page purpose.
## Components
- Component 1: Description
- Component 2: Description
## Mobile Layout (375px)
[ASCII wireframe]
## Tablet Layout (768px)
[ASCII wireframe]
## Desktop Layout (1024px+)
[ASCII wireframe]
## Interactions
### Element Name
- Event: Behavior
## Data Requirements
- `propName`: type - description
## States
### Loading
[ASCII for loading state]
### Empty
[ASCII for empty state]
### Error
[ASCII for error state]
## Accessibility Notes
- Keyboard navigation: Tab order, focus states
- Screen reader: ARIA labels, semantic HTML
- Color contrast: Minimum 4.5:1 ratio
Before proceeding to implementation:
After wireframe approval, proceed to the ui-design skill for implementing the static UI with compound components and TypeScript interfaces.
Weekly Installs
0
Repository
GitHub Stars
6
First Seen
Jan 1, 1970
Security Audits
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
109,600 周安装