Wireframe Creator by jmsktm/claude-settings
npx skills add https://github.com/jmsktm/claude-settings --skill 'Wireframe Creator'一位用户体验设计专家,专注于创建低保真线框图以进行快速原型设计和迭代。此技能聚焦于结构、层级和用户流程,避免视觉设计的干扰,从而在投入高保真设计之前快速验证概念。
无论您需要快速绘制落地页草图、应用程序的完整用户流程,还是仪表板布局,此技能都能生成清晰、带有注释的线框图,以传达信息架构和交互模式。
定义页面结构
创建 ASCII 线框图
添加注释
定义用户流程
提供后续步骤
映射用户旅程
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
设计每个界面
展示连接关系
记录交互
定义数据层级
布局面板
设计数据可视化
规划交互
映射完整流程
为每个步骤绘制线框图
连接流程
记录边界情况
| 操作 | 命令/触发器 |
|---|---|
| 落地页线框图 | "为 [产品] 绘制落地页线框图" |
| 应用界面线框图 | "为 [功能] 界面创建线框图" |
| 用户流程 | "为 [任务] 映射用户流程" |
| 仪表板 | "为 [用例] 绘制仪表板线框图" |
| 表单线框图 | "为 [目的] 设计表单" |
| 导航 | "为 [网站] 绘制导航线框图" |
+----------------------------------+
| 页头 |
| [Logo] [导航] [导航] [导航] [行动号召]|
+----------------------------------+
+----------------------------------+
| 主视觉区域 |
| |
| [标题] |
| [副标题] |
| [行动号召按钮] |
| |
+----------------------------------+
+-------+ +-------+ +-------+
| | | | | |
| 卡片 | | 卡片 | | 卡片 |
| | | | | |
+-------+ +-------+ +-------+
+----------------------------------+
| 页脚 |
| [链接] [链接] [社交] [法律信息] |
+----------------------------------+
[输入框标签]
[___________________]
[下拉菜单标签]
[选择 ▼]
[单选选项]
( ) 选项 1
( ) 选项 2
(•) 选项 3
[复选框选项]
[✓] 选项 A
[ ] 选项 B
[✓] 选项 C
[文本区域]
[ ]
[ ]
[ ]
[按钮] [次要按钮]
水平导航:
[Logo] [链接] [链接] [链接] [链接] [按钮]
侧边栏导航:
+--------+
| [Logo] |
| |
| [导航] |
| [导航] |
| [导航] |
| [导航] |
+--------+
汉堡菜单导航 (移动端):
[☰] [Logo] [🔍][👤]
标签页:
[激活标签] [标签] [标签] [标签]
─────────────────────────────
表格:
+--------+----------+--------+
| 表头 | 表头 | 表头 |
+--------+----------+--------+
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
+--------+----------+--------+
卡片网格:
+-------+ +-------+ +-------+
|[图片] | |[图片] | |[图片] |
| 标题 | | 标题 | | 标题 |
| 文本 | | 文本 | | 文本 |
| [链接]| | [链接]| | [链接]|
+-------+ +-------+ +-------+
列表:
• 带图标的项目
• 带图标的项目
• 带图标的项目
[组件名称] - 元素占位符
(...) - 截断/溢出内容
[图片] - 图片占位符
[Logo] - Logo 放置位置
[行动号召] - 行动号召按钮
[---] - 分隔符
→ - 用户流程方向
* - 重要说明
? - 决策点
! - 错误/警告状态
✓ - 成功状态
1. 页头 (固定)
- Logo + 导航 + 行动号召
2. 主视觉区域 (首屏)
- 标题 + 副标题 + 行动号召 + 视觉元素
3. 社会认同
- Logo 或推荐语
4. 功能 (3列)
- 图标 + 标题 + 描述 × 3
5. 工作原理 (分步)
- 步骤 1, 步骤 2, 步骤 3 及视觉展示
6. 定价 (表格或卡片)
- 3个层级,列出功能
7. 最终行动号召
- 标题 + 按钮 + 信任信号
8. 页脚
- 链接、社交媒体、法律信息
+-----+---------------------------+
| 导航 | 顶部栏 [搜索] [用户] |
| [链] +---------------------------+
| [接] | |
| [接] | 主要内容区 |
| [接] | (图表, 表格) |
| [接] | |
| | |
+-----+---------------------------+
步骤 1: 基本信息
[姓名输入框]
[邮箱输入框]
[下一步按钮]
↓
步骤 2: 详细信息
[多个字段]
[返回] [下一步]
↓
步骤 3: 确认
[查看信息]
[编辑] [提交]
↓
成功状态
[✓] 感谢信息
[下一步操作]
线框图规范
项目: [名称]
页面/界面: [落地页 / 仪表板 / 等]
日期: [日期]
用户流程
入口 → 操作 → 结果 → 下一步
线框图
[布局的 ASCII 图]
组件
1. 页头
- 高度: 64px
- 元素: Logo (左), 导航 (中), 行动号召 (右)
- 行为: 滚动时固定
- 移动端: 折叠为汉堡菜单
2. 主视觉区域
- 高度: 100vh
- 布局: 60% 文本 (左), 40% 图片 (右)
- 元素:
* H1 标题 (最多 60 字符)
* 副标题 (最多 120 字符)
* 主要行动号召按钮
* 次要行动号召链接
- 响应式: 在移动端垂直堆叠
3. 功能卡片
- 布局: 3列网格
- 卡片结构:
* 图标 (顶部)
* 标题 (h3)
* 描述 (2-3 行)
* 可选链接
- 响应式: 移动端 1 列,平板 2 列,桌面 3 列
[... 更多组件 ...]
交互
悬停状态:
- 导航链接: 下划线
- 按钮: 背景变暗
- 卡片: 阴影上浮
点击操作:
- 主要行动号召 → 打开注册表单
- 功能卡片 → 展开详情
- 导航链接 → 平滑滚动到对应区块
内容要求
所需文案:
- [ ] H1 标题 (最多 60 字符)
- [ ] 副标题 (最多 120 字符)
- [ ] 3 个功能标题
- [ ] 3 个功能描述
- [ ] 行动号召按钮文本
所需图片:
- [ ] 主视觉图片 (1600x900px)
- [ ] 3 个功能图标 (SVG)
- [ ] Logo (SVG, 白色和彩色版本)
响应式断点
移动端 (<768px):
- 单列布局
- 汉堡菜单导航
- 主视觉内容堆叠
- 更大的触摸目标 (最小 44px)
平板 (768-1024px):
- 2列功能网格
- 部分导航可见
- 平衡的主视觉布局
桌面 (>1024px):
- 完整布局如线框图所示
- 所有导航可见
- 多列网格
状态
默认: 如线框图所示
加载中: 显示骨架屏占位符
错误: 显示错误信息及重试选项
空状态: 显示空状态及行动号召
成功: 显示确认信息
备注
- 优先考虑首屏内容
- 确保行动号召清晰可见
- 测试移动端交互区域
- 考虑无障碍性 (焦点状态、屏幕阅读器)
- 为可能溢出的内容做规划
低保真 (此技能)
中保真
高保真
电商产品页面 : 主图 + 详情 + 行动号召 + 相关产品 SaaS 注册流程 : 带进度指示器的多步骤表单 博客首页 : 精选文章 + 文章网格 + 侧边栏 移动应用引导流程 : 3-4 个可滑动的界面 + 跳过/下一步 管理仪表板 : 侧边栏导航 + 指标卡片 + 数据表格 个人资料页面 : 页头 + 标签页 + 内容区块
每周安装次数
–
代码仓库
GitHub 星标数
2
首次出现时间
–
安全审计
A UX design expert that creates low-fidelity wireframes for rapid prototyping and iteration. This skill focuses on structure, hierarchy, and user flow without the distraction of visual design, enabling quick validation of concepts before investing in high-fidelity design.
Whether you need a quick sketch of a landing page, a complete user flow for an app, or a dashboard layout, this skill produces clear, annotated wireframes that communicate information architecture and interaction patterns.
Define page structure
Create ASCII wireframe
Add annotations
Define user flow
Provide next steps
Map user journey
Design each screen
Show connections
Document interactions
Define data hierarchy
Layout panels
Design data visualizations
Plan interactions
Map complete flow
Wireframe each step
Connect flow
Document edge cases
| Action | Command/Trigger |
|---|---|
| Landing page wireframe | "Wireframe a landing page for [product]" |
| App screen wireframe | "Create wireframe for [feature] screen" |
| User flow | "Map user flow for [task]" |
| Dashboard | "Wireframe dashboard for [use case]" |
| Form wireframe | "Design form for [purpose]" |
| Navigation | "Wireframe navigation for [site]" |
+----------------------------------+
| HEADER |
| [Logo] [Nav] [Nav] [Nav] [CTA]|
+----------------------------------+
+----------------------------------+
| HERO SECTION |
| |
| [Headline] |
| [Subheading] |
| [CTA Button] |
| |
+----------------------------------+
+-------+ +-------+ +-------+
| | | | | |
| Card | | Card | | Card |
| | | | | |
+-------+ +-------+ +-------+
+----------------------------------+
| FOOTER |
| [Links] [Links] [Social] [Legal] |
+----------------------------------+
[Input Field Label]
[___________________]
[Dropdown Label]
[Select ▼]
[Radio Options]
( ) Option 1
( ) Option 2
(•) Option 3
[Checkbox Options]
[✓] Option A
[ ] Option B
[✓] Option C
[Text Area]
[ ]
[ ]
[ ]
[Button] [Secondary Button]
Horizontal Nav:
[Logo] [Link] [Link] [Link] [Link] [Button]
Sidebar Nav:
+--------+
| [Logo] |
| |
| [Nav] |
| [Nav] |
| [Nav] |
| [Nav] |
+--------+
Hamburger Nav (Mobile):
[☰] [Logo] [🔍][👤]
Tabs:
[Active Tab] [Tab] [Tab] [Tab]
─────────────────────────────
Table:
+--------+----------+--------+
| Header | Header | Header |
+--------+----------+--------+
| Cell | Cell | Cell |
| Cell | Cell | Cell |
+--------+----------+--------+
Card Grid:
+-------+ +-------+ +-------+
|[IMG] | |[IMG] | |[IMG] |
| Title | | Title | | Title |
| Text | | Text | | Text |
| [Link]| | [Link]| | [Link]|
+-------+ +-------+ +-------+
List:
• Item with icon
• Item with icon
• Item with icon
[Component Name] - Placeholder for element
(...) - Truncated/overflow content
[IMG] - Image placeholder
[LOGO] - Logo placement
[CTA] - Call to action button
[---] - Divider/separator
→ - User flow direction
* - Important note
? - Decision point
! - Error/warning state
✓ - Success state
1. Header (sticky)
- Logo + Navigation + CTA
2. Hero (above fold)
- Headline + Subheading + CTA + Visual
3. Social Proof
- Logos or testimonials
4. Features (3-column)
- Icon + Headline + Description × 3
5. How It Works (stepped)
- Step 1, Step 2, Step 3 with visuals
6. Pricing (table or cards)
- 3 tiers with features listed
7. Final CTA
- Headline + Button + Trust signals
8. Footer
- Links, social, legal
+-----+---------------------------+
| Nav | Top Bar [Search] [User] |
| [L] +---------------------------+
| [I] | |
| [N] | Main Content |
| [K] | (Charts, Tables) |
| [S] | |
| | |
+-----+---------------------------+
Step 1: Basic Info
[Name Input]
[Email Input]
[Next Button]
↓
Step 2: Details
[Multiple fields]
[Back] [Next]
↓
Step 3: Confirmation
[Review info]
[Edit] [Submit]
↓
Success State
[✓] Thank you message
[Next action]
WIREFRAME SPECIFICATION
Project: [Name]
Page/Screen: [Landing Page / Dashboard / etc.]
Date: [Date]
USER FLOW
Entry → Action → Result → Next Step
WIREFRAME
[ASCII diagram of layout]
COMPONENTS
1. Header
- Height: 64px
- Elements: Logo (left), Nav (center), CTA (right)
- Behavior: Sticky on scroll
- Mobile: Collapses to hamburger menu
2. Hero Section
- Height: 100vh
- Layout: 60% text (left), 40% image (right)
- Elements:
* H1 headline (max 60 chars)
* Subheading (max 120 chars)
* Primary CTA button
* Secondary CTA link
- Responsive: Stacks vertically on mobile
3. Feature Cards
- Layout: 3-column grid
- Card structure:
* Icon (top)
* Headline (h3)
* Description (2-3 lines)
* Optional link
- Responsive: 1 column mobile, 2 tablet, 3 desktop
[... more components ...]
INTERACTIONS
Hover States:
- Nav links: Underline
- Buttons: Darken background
- Cards: Lift shadow
Click Actions:
- Primary CTA → Opens signup form
- Feature cards → Expands details
- Nav links → Smooth scroll to section
CONTENT REQUIREMENTS
Copy Needed:
- [ ] H1 headline (max 60 characters)
- [ ] Subheading (max 120 characters)
- [ ] 3 feature headlines
- [ ] 3 feature descriptions
- [ ] CTA button text
Images Needed:
- [ ] Hero image (1600x900px)
- [ ] 3 feature icons (SVG)
- [ ] Logo (SVG, white and color versions)
RESPONSIVE BREAKPOINTS
Mobile (<768px):
- Single column layout
- Hamburger navigation
- Stacked hero content
- Larger touch targets (min 44px)
Tablet (768-1024px):
- 2-column feature grid
- Partial navigation visible
- Balanced hero layout
Desktop (>1024px):
- Full layout as wireframed
- All navigation visible
- Multi-column grids
STATES
Default: As shown in wireframe
Loading: Show skeleton placeholders
Error: Display error message with retry option
Empty: Show empty state with CTA
Success: Show confirmation message
NOTES
- Prioritize above-fold content
- Ensure clear CTA visibility
- Test mobile interaction zones
- Consider accessibility (focus states, screen readers)
- Plan for content that may overflow
Low-Fidelity (this skill)
Mid-Fidelity
High-Fidelity
E-commerce product page : Hero image + details + CTA + related products SaaS signup flow : Multi-step form with progress indicator Blog homepage : Featured post + grid of articles + sidebar Mobile app onboarding : 3-4 swipeable screens + skip/next Admin dashboard : Sidebar nav + metric cards + data tables Profile page : Header + tabs + content sections
Weekly Installs
–
Repository
GitHub Stars
2
First Seen
–
Security Audits
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
41,300 周安装
GeoPandas 中文教程:Python 地理空间数据分析与可视化指南
168 周安装
Commit-Helper:遵循 Conventional Commits 规范的 Git 提交信息助手
168 周安装
Stable Baselines3 强化学习库使用指南:训练RL智能体、自定义环境与回调
168 周安装
通用PPT生成技能 - 智能模板分析与自动化排版工具,支持图表可视化
168 周安装
ReasoningBank Intelligence:AI自适应学习系统,实现智能代理的元认知与策略优化
固定收益投资组合分析工具 - 债券定价、现金流预测与风险压力测试
168 周安装