菜单
ASCII Mockups Skill - Guide for creating ASCII mockups in UI element descriptions on prooph board. Covers visual state representation and documenting UI variations using text-based wireframes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ascii-mockups |
| description | ASCII Mockups Skill - Guide for creating ASCII mockups in UI element descriptions on prooph board. Covers visual state representation and documenting UI variations using text-based wireframes. |
This document describes how to create effective ASCII mockups for UI elements in prooph board.
ASCII mockups go inside a bash code block under a ## ASCII Mockup heading:
## ASCII Mockup
```bash
┌─────────────────────────────────────┐
│ Time Tracker │
├─────────────────────────────────────┤
│ 09:23:45 │
│ Time in progress │
├─────────────────────────────────────┤
│ [ Pause ] [ Clock Out ] │
└─────────────────────────────────────┘
```
- clocked in: true
Time is ticking
```yaml
trackingId: track1
```
## ASCII Mockup
```bash
┌─────────────────────────────────────┐
│ Time Tracker │
├─────────────────────────────────────┤
│ │
│ 09:23:45 │
│ Time in progress │
│ │
│ Started: 09:00 AM │
│ │
├─────────────────────────────────────┤
│ [ Pause ] [ Clock Out ] │
└─────────────────────────────────────┘
```
Use cases:
Overview of:
- days worked in current month
- total hours worked this month
- total overtime
## ASCII Mockup
```bash
┌─────────────────────────────────────────────┐
│ Time Entries Dashboard │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Days │ │ Hours │ │ Overtime │ │
│ │ Worked │ │ Worked │ │ Hours │ │
│ │ 15 │ │ 120.5 │ │ +8.5 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────┘
```
Use cases:
Document different UI states with separate mockups:
- clocked in: true
Time is ticking
## ASCII Mockup
```bash
┌─────────────────────────────────────┐
│ Time Tracker │
├─────────────────────────────────────┤
│ 09:23:45 │
│ Time in progress │
└─────────────────────────────────────┘
```
- clocked in: false
Time is not ticking
## ASCII Mockup
```bash
┌─────────────────────────────────────┐
│ Time Tracker │
├─────────────────────────────────────┤
│ PAUSED │
│ ⚠️ On break │
├─────────────────────────────────────┤
│ [ Continue ] │
└─────────────────────────────────────┘
```
Use cases:
## ASCII Mockup
```bash
┌─────────────────────────────────────┐
│ Time Tracker │
│ (Blocked State) │
├─────────────────────────────────────┤
│ 09:23:45 │
│ Time in progress │
└─────────────────────────────────────┘
```
For list/overview screens, markdown tables are often more practical than ASCII mockups:
## List View
| Name | Email | Status | Last Activity |
|------|-------|--------|---------------|
| Anna M. | anna@example.com | Active | 2026-03-05 |
| Bob K. | bob@example.com | Inactive | 2026-02-28 |
Use when:
Focus on the elements that matter for this process step. Don't include every UI detail.
✅ Good: Simple, clear structure
┌──────────────────┐
│ Time Tracker │
├──────────────────┤
│ 09:23:45 │
│ [Pause] [Out] │
└──────────────────┘
❌ Avoid: Pixel-perfect with too much detail
┌─────────────────────────────────────────────┐
│ ☰ My App 🌐 User ▾ 🔔 3 │
├─────────────────────────────────────────────┤
...
If the mockup documents a specific state, make the state clear:
- clocked in: true
Or add a label in the mockup:
│ (Blocked State) │
Pick a mockup style and stick with it across the model:
┌─┐│├┤└┘[ Button ]⚠️ 🔔 🌐 (sparingly)❌ Bad: Every CSS class, spacing, and color noted
✅ Better: Show layout and key elements only
Keep mockups in sync with actual UI changes. Outdated mockups create confusion.
Animal Shelter Academy - A BusinessSeriesModeling experiment where stories become training grounds for Event Modeling. Follow Caramelo's journey, interview stakeholders, uncover the operational reality behind the narrative, and learn that the story people remember and the processes they live are often two sides of the same truth.
Add a complete schema to commands, events, or information elements based on example data or event modeling context.
Example Data Skill - Guide for adding example data to Command, Event, and Information elements in prooph board. Covers YAML examples with concrete values and documenting state changes.
Event Modeling Skill - Core guidelines for creating Event Models on prooph board. Covers event-first modeling strategy, command eligibility tests, element types, lane and slice structure, anti-patterns, and self-validation. Use this skill to understand the rules of Event Modeling on prooph board.
Prooph Board Navigation Skill - Parses deeplinks, retrieves chapter data via MCP, focuses on referenced elements or slices, and generates deeplinks for precise user navigation.
Generate hand-drawn style SVG wireframes with sketchy aesthetics. Includes validation rules to prevent layout overlap and ensure proper element spacing.