Wireframes without the distraction.

no-fi is an agent skill that draws UI as plain text, so a team argues about layout and flow instead of color and type.

╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
║ │ ACME BANK    [ Overview ]  Send  Cards  Settings  [ + ]  Inbox (3)  (AN) │ ║
║ └──────────────────────────────────────────────────────────────────────────┘ ║
║                                                                              ║
║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
║ │ Good morning, Ana                                       Account ****4821 │ ║
║ └──────────────────────────────────────────────────────────────────────────┘ ║
║                                                                              ║
║ ┌──────────────────────┐  ┌──────────────────────┐  ┌──────────────────────┐ ║
║ │ BALANCE              │  │ SPENT THIS MONTH     │  │ SAVED                │ ║
║ │                      │  │                      │  │                      │ ║
║ │ $12,480.00           │  │ $2,315.40            │  │ $860.00              │ ║
║ │ ^ +2.1% this month   │  │ v -3.4% this month   │  │ of $1,000 goal       │ ║
║ │ ▂▃▂▄▅▄▆▇▆█▇█         │  │ [======----] 62%     │  │ [=========-] 86%     │ ║
║ └──────────────────────┘  └──────────────────────┘  └──────────────────────┘ ║
║                                                                              ║
║ ┌───────────────────────────────────┐  ┌───────────────────────────────────┐ ║
║ │ RECENT ACTIVITY                   │  │ SPENDING BY CATEGORY              │ ║
║ │                                   │  │ (one █ is $100)                   │ ║
║ │ Today  Cafe Nero          -$4.50  │  │ Food     ██████▍           $640   │ ║
║ │ Today  Salary (Acme)     +$3,200  │  │ Housing  ████████████    $1,200   │ ║
║ │ Mon    Netflix           -$15.99  │  │ Travel   ███▏              $310   │ ║
║ │ Sun    Grocer Co         -$82.10  │  │ Fun      █▋                $165   │ ║
║ │                                   │  │                                   │ ║
║ │ [ See all transactions ]          │  │ [ View report ]                   │ ║
║ └───────────────────────────────────┘  └───────────────────────────────────┘ ║
║                                                                              ║
║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
║ │ UPCOMING BILLS                                                           │ ║
║ │                                                                          │ ║
║ │ Mar 28  Electric          $74.00     [ Pay ]                             │ ║
║ │ Mar 30  Mobile            $32.00     [ Pay ]                             │ ║
║ │ Apr 01  Rent           $1,200.00     [ Pay ]                             │ ║
║ └──────────────────────────────────────────────────────────────────────────┘ ║
║                                                                              ║
║ ┌──────────────────────────────────────────────────────────────────────────┐ ║
║ │ (!) 1 transfer needs approval: Jo Kim, $250.00              [[ Review ]] │ ║
║ └──────────────────────────────────────────────────────────────────────────┘ ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

Fintech dashboard

Overview screen with KPI cards, trends, a category chart, and an alert.

Uses 13 elements

Screen
Card
Primary button
Button
Icon button
Alert
Badge
Avatar
Tabs
Delta
Progress
Bar chart
Sparkline

Six rules that keep every wireframe readable.

Plain characters
Letters, digits, and punctuation, plus box-drawing for borders and block characters for progress bars and charts. No emoji, no tabs.
Double outside, single inside
The outer container is ╔═╗ and every box inside it is ┌─┐.
Fixed width
80 characters or fewer, and every box the same width on every row.
Describe, don't decorate
No color, fonts, or icons. Name visuals in words below the drawing.
Draw it like the UI
An input is one line, a textarea has a grip, a badge is a pill. Use the vocabulary, don't invent symbols.
Validate before sharing
The checker fails on broken borders, unsupported characters, nested double lines, and bars that disagree with their percentage or value.

One vocabulary that looks like the interface it describes.

44 elements in 7 groups. Inputs and textareas are different shapes. A badge is a pill. An alert is a box with an icon, not a stray character.

╔═══════════╗
║           ║
║  A screen ║
║           ║
╚═══════════╝

Screen

Double lines mean the outer frame.

┌───────────┐
│ Title     │
│           │
└───────────┘

Card

Single lines mean a nested box. Blank line between stacked cards.

```
SETTINGS
════════
```
Heading
Capitals. Underline with a double rule for a major section.

┌───────────┐
│ Title     │
├───────────┤
│ Body      │
└───────────┘

Divider

A rule between groups.

┌─────────────────┐
│ [image: avatar] │
└─────────────────┘

Placeholder

Say what goes there.

```
xxxxxxxx  xxxxx
xxxxxx  xxxxxxx
```
Skeleton
Content that has not arrived yet.
```
[ Freeze ] <-- asks first
```
Annotation
Design notes live outside the UI.
```
Email *
[ ana@acme.co______ ]
```
Input
One line. Label above, value inside.

┌──────────────────┐
│ Add a note...    │
│                  │
│               // │
└──────────────────┘

Textarea

Taller than an input. The grip tells them apart.

```
[? Search______]
```
Search
A question mark marks it as search.
```
[ All types    v ]
```
Select
v marks the menu.

[ All types    v ]
┌────────────────┐
│ All types      │
│ > Income       │
│ Expenses       │
└────────────────┘

The open state of a select.

```
[x] Email
[ ] SMS
```
Checkbox
x means checked.
```
(*) Daily
( ) Weekly
```
Radio
Star means selected.
```
[ON ]  [OFF]
```
Toggle
Always four characters wide.
```
[----o-------]  $200
```
Slider
o is the handle.
```
Name *
```
Required
Star after the label.
```
[ $900.00_______ ]
(!) Over your limit
```
Field error
Sits under the field it belongs to.
```
[[ Save ]]
```
Primary button
Double brackets. One per view.
```
[ Cancel ]
```
Button
Single brackets. Secondary actions.
```
[ + ]  [ ... ]
```
Icon button
A symbol alone. Name it in a note.
```
[- Continue -]
```
Disabled
Say why, in a tooltip or note.

┌────────────────────────┐
│ (!) Needs approval     │
└────────────────────────┘

Alert

Icon, message, optional action.

┌──────────────────┐
│ (ok) Saved     x │
└──────────────────┘

Toast

Brief. Always closes with x.

┌────────────────┐
│ FREEZE CARD? x │
├────────────────┤
│ Are you sure?  │
│ [ Cancel ]     │
└────────────────┘

Modal

Sits inside the screen it covers.

[ Pay ]
   ^
┌──────────────┐
│ From savings │
└──────────────┘

Tooltip

Caret points at the trigger.

```
( Paid )  ( Pending )
Inbox (3)
```
Badge
Pill for status, bare number for a count.
```
<Food x>  <May x>
```
Tag
x removes it.
```
(AN)  Ana Novak
```
Avatar
A person or account.
```
[ Active ]  Other
```
Tabs
Active tab is bracketed.
```
Home > Cards > Visa
```
Breadcrumb
Greater-than between levels.
```
< 1 [2] 3 4 >
```
Pagination
Current page in brackets.
```
*-----*-----o
One   Two   Three
```
Stepper
Star is reached, o is still ahead.
```
v Delivery
    (*) Instantly
> Advanced
```
Accordion
v is open, > is closed.
```
Export CSV >
```
Link
Greater-than after the label.

┌────────┬───────┐
│ NAME v │ TOTAL │
├────────┼───────┤
│ Cafe   │ $4.50 │
└────────┴───────┘

Table

Sort arrow beside the sorted column.

```
^ +2.1%
v -3.4%
```
Delta
Arrow and signed number.

[=======---] 70%
[ ▮▮▮▮▯▯▯▯ ] 50%
[ ████▒▒▒▒ ] 50%

Progress

Three styles. The fill matches the percent.

Food  ██████▍       $640
Rent  ████████████  $1,200

Bar chart

State the unit of one █. The partial block is the remainder.

(one row is $25)
     ▄▄▄
███  ███
███  ███
───  ───
Mon  Tue

Column chart

State what one row is worth. The partial top is the remainder.

$40 │       *
$20 │  *  *   *
 $0 │ *
    └──────────
     1  2  3  4

Line chart

Label the top, middle, and bottom of the axis.

```
▃▂▃▄▆█▇▅▄▃▂▂
```
Sparkline
A trend with no axis.
```
[FFFFFFHHHHHHHHTTOOOO]
F Food  H Home  T Trip
```
Stacked bar
One letter per share. Legend below.

Mon  ░░▒▒▓▓██▓▓▒▒
Fri  ▒▒▓▓████▓▓░░

Low ░ ▒ ▓ █ High

Heatmap

Always draw the legend.

+ more to come

Real screens, drawn in text before anything else.

7 screens, built to use the whole vocabulary. All 44 elements appear in at least one. Open a card to see which elements it uses.

╔═══════════════════════════════════════════════╗
║ SEND MONEY                        Step 1 of 3 ║
║ ═════════════════════════════════════════════ ║
║                                               ║
║ *---------o---------o                         ║
║ Details   Review    Done                      ║
║                                               ║
║ To *                                          ║
║ [ Jo Kim__________________________ ]          ║
║                                               ║
║ Amount *                                      ║
║ [ $900.00_________________________ ]          ║
║ (!) Over your $500 daily limit                ║
║                                               ║
║ Note (optional)                               ║
║ ┌───────────────────────────────────────────┐ ║
║ │ Add a note for Jo...                      │ ║
║ │                                           │ ║
║ │                                    //     │ ║
║ └───────────────────────────────────────────┘ ║
║                                               ║
║ ┌───────────────────────────────────────────┐ ║
║ │ (i) Transfers over $200 need approval.    │ ║
║ └───────────────────────────────────────────┘ ║
║                                               ║
║ [ Cancel ]                     [- Continue -] ║
║                                       ^       ║
║                ┌────────────────────────────┐ ║
║                │ Fix the amount to continue │ ║
║                └────────────────────────────┘ ║
╚═══════════════════════════════════════════════╝

Send money

A form with a field error, a disabled action, and the tooltip that explains why.

Uses 12 elements

Screen
Card
Heading
Input
Textarea
Required
Field error
Button
Disabled
Alert
Tooltip
Stepper

╔═══════════════════════════════════════════════╗
║ NOTIFICATIONS                                 ║
║ ═════════════════════════════════════════════ ║
║                                               ║
║ Email alerts                            [ON ] ║
║ Push alerts                             [OFF] ║
║                                               ║
║ Notify me about                               ║
║ [x] Large transactions                        ║
║ [x] Failed payments                           ║
║ [ ] Marketing                                 ║
║                                               ║
║ Alert me above                                ║
║ [-----o------]  $200                          ║
║                                               ║
║ v Delivery                                    ║
║     (*) Instantly      ( ) Daily digest       ║
║     Quiet hours  [ 22:00 v ]  to  [ 07:00 v ] ║
║ > Advanced                                    ║
║                                               ║
║ Storage used                                  ║
║ [ █████████████▒▒▒▒▒▒▒ ] 65%                  ║
║                                               ║
║ ┌───────────────────────────────────────────┐ ║
║ │ (i) Changes apply to all devices.         │ ║
║ └───────────────────────────────────────────┘ ║
║                                               ║
║ [- Reset -]                        [[ Save ]] ║
╚═══════════════════════════════════════════════╝

Notification settings

Toggles, checkboxes, radios, a slider, accordions, and a progress bar.

Uses 13 elements

Screen
Card
Heading
Select
Checkbox
Radio
Toggle
Slider
Primary button
Disabled
Alert
Accordion
Progress

╔══════════════════════════════════════════════════════════════════════════════╗
║ Home > Accounts > Checking ****4821                                          ║
║                                                                              ║
║ TRANSACTIONS                                                                 ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║                                                                              ║
║ [? Search transactions_________]   [ All types v ]              Export CSV > ║
║                                    ┌────────────────┐                        ║
║                                    │ All types      │                        ║
║                                    │ > Income       │                        ║
║                                    │ Expenses       │                        ║
║                                    └────────────────┘                        ║
║ <Food x>  <This month x>   Clear all >                                       ║
║                                                                              ║
║ ┌──────────┬─────────────────────────────────┬──────────────┬──────────────┐ ║
║ │ DATE v   │ NAME                            │ STATUS       │       AMOUNT │ ║
║ ├──────────┼─────────────────────────────────┼──────────────┼──────────────┤ ║
║ │ Mar 28   │ (CN) Cafe Nero                  │ ( Paid )     │       -$4.50 │ ║
║ │ Mar 28   │ (AC) Acme Payroll               │ ( Paid )     │   +$3,200.00 │ ║
║ │ Mar 27   │ (NF) Netflix                    │ ( Pending )  │      -$15.99 │ ║
║ │ Mar 26   │ (GC) Grocer Co                  │ ( Paid )     │      -$82.10 │ ║
║ │ Mar 25   │ (JK) Jo Kim                     │ ( Failed )   │     -$250.00 │ ║
║ │ Mar 24   │ (EC) Electric Co                │ ( Paid )     │      -$74.00 │ ║
║ └──────────┴─────────────────────────────────┴──────────────┴──────────────┘ ║
║                                                                              ║
║ Showing 6 of 42                                          < 1 [2] 3 4 ... 7 > ║
╚══════════════════════════════════════════════════════════════════════════════╝

Transactions

Search, an open filter menu, tags, a sortable table with badges and avatars, and pagination.

Uses 16 elements

Screen
Card
Heading
Input
Search
Select
Menu
Button
Badge
Tag
Avatar
Breadcrumb
Pagination
Accordion
Link
Table

╔══════════════════════════════════════════════════════════════════════════════╗
║ SPENDING REPORT                                           [ Last 30 days v ] ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║ [ Spending ]  Income  Savings                                                ║
║                                                                              ║
║ $2,315.40   v -3.4% vs April                                                 ║
║                                                                              ║
║ Weekly spend                                                                 ║
║ $450 │                                                                       ║
║      │             *               *                                         ║
║      │                                     *                                 ║
║ $225 │     *               *           *                                     ║
║      │ *               *       *                                             ║
║      │         *                                                             ║
║   $0 │                                                                       ║
║      └────────────────────────────────────────                               ║
║       Mar 1       Mar 10      Mar 19      Mar 28                             ║
║                                                                              ║
║ Top merchants   (one █ is $100)                                              ║
║ Rent Co      ████████████   $1,200                                           ║
║ Grocer Co    ████▏            $410                                           ║
║ Cafe Nero    █▊               $180                                           ║
║ Electric Co  ▊                 $74                                           ║
║                                                                              ║
║ By category                                                                  ║
║ [FFFFFFHHHHHHHHTTOOOO]                                                       ║
║ F Food 30%   H Housing 40%   T Travel 10%   O Other 20%                      ║
║                                                                              ║
║ Budget used                                                                  ║
║ [ ▮▮▮▮▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯ ] 62%                                                 ║
╚══════════════════════════════════════════════════════════════════════════════╝

Spending report

A line chart, a bar chart, a stacked bar, a delta, and budget progress.

Uses 10 elements

Screen
Heading
Select
Button
Tabs
Delta
Progress
Bar chart
Line chart
Stacked bar

╔══════════════════════════════════════════════════════════════════════════════╗
║ ACTIVITY PATTERNS                                                            ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║                                                                              ║
║ Average spend per weekday  (one row is $25)                                  ║
║                     ███  ▄▄▄                                                 ║
║                ▂▂▂  ███  ███                                                 ║
║      ▆▆▆       ███  ███  ███  ▁▁▁                                            ║
║ ▄▄▄  ███       ███  ███  ███  ███                                            ║
║ ███  ███  ███  ███  ███  ███  ███                                            ║
║ ███  ███  ███  ███  ███  ███  ███                                            ║
║ ───  ───  ───  ───  ───  ───  ───                                            ║
║ Mon  Tue  Wed  Thu  Fri  Sat  Sun                                            ║
║                                                                              ║
║ Transactions by hour (2-hour bins)                                           ║
║       00  04  08  12  16  20                                                 ║
║ Mon         ░░░░▒▒▒▒▒▒░░░░                                                   ║
║ Tue         ░░░░▒▒▓▓▒▒░░░░                                                   ║
║ Wed         ░░░░▒▒▒▒▒▒░░░░                                                   ║
║ Thu         ░░░░▓▓▓▓▓▓▒▒░░                                                   ║
║ Fri       ░░░░▒▒████▓▓▓▓░░   <-- lunch peak                                  ║
║ Sat         ░░▒▒▒▒▒▒▓▓▓▓▒▒▒▒                                                 ║
║ Sun           ░░░░▒▒▒▒▒▒░░░░                                                 ║
║                                                                              ║
║ Low ░ ▒ ▓ █ High                                                             ║
║                                                                              ║
║ Trends, last 30 days                                                         ║
║ Food      ▃▂▃▄▆█▇▅▄▃▂▂      $640   v -2.0%                                   ║
║ Housing   ▅▅▅▅▅▅▅▅▅▅▅▆    $1,200   ^ +1.2%                                   ║
║ Travel    ▁▁▂▃▅█▇▆▄▂▁▂      $310   ^ +8.5%                                   ║
╚══════════════════════════════════════════════════════════════════════════════╝

Activity patterns

A column chart, a heatmap, sparkline trends, and an annotation.

Uses 7 elements

Screen
Heading
Annotation
Delta
Column chart
Sparkline
Heatmap

╔══════════════════════════════════════════════════════════════════════════════╗
║ Home > Cards > Visa ****4821                                                 ║
║                                                                              ║
║ CARD CONTROLS                                                        [ ... ] ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║                                                                              ║
║ ┌──────────────────────────────────────┐  ┌────────────────────────────────┐ ║
║ │                                      │  │ Freeze card              [OFF] │ ║
║ │    [image: card front]               │  │ Tap to pay               [ON ] │ ║
║ │                                      │  │                                │ ║
║ │                                      │  │ [ Freeze ] <-- asks first      │ ║
║ └──────────────────────────────────────┘  └────────────────────────────────┘ ║
║                                                                              ║
║ v Limits                                                                     ║
║     Daily spend  [-------o----]  $500                                        ║
║ > Billing address                                                            ║
║                                                                              ║
║ RECENT                                                                       ║
║ xxxxxxxx   xxxxxxxxxxxx        xxxxx                                         ║
║ xxxxxxxx   xxxxxxxx             xxxxx                                        ║
║                                                                              ║
║ ──────────────────────────────────────────────────────────────────────────── ║
║                                                                              ║
║                ┌────────────────────────────────────────────┐                ║
║                │ FREEZE THIS CARD?                        x │                ║
║                ├────────────────────────────────────────────┤                ║
║                │ Purchases and withdrawals will be declined │                ║
║                │ until you unfreeze it.                     │                ║
║                │                                            │                ║
║                │            [ Cancel ]  [[ Freeze ]]        │                ║
║                └────────────────────────────────────────────┘                ║
║                                                                              ║
║                                                 ┌──────────────────────────┐ ║
║                                                 │ (ok) Card frozen       x │ ║
║                                                 └──────────────────────────┘ ║
╚══════════════════════════════════════════════════════════════════════════════╝

Card details

A placeholder, accordions, skeleton loading, a modal, and a toast.

Uses 17 elements

Screen
Card
Heading
Divider
Placeholder
Skeleton
Annotation
Toggle
Slider
Primary button
Button
Icon button
Alert
Toast
Modal
Breadcrumb
Accordion

A few commands to start drawing.

Every file is plain text you can read first. The source is on GitHub. On claude.ai, use the repository's Download ZIP and upload it under Settings, Capabilities, Skills.

Install the no-fi skill, which draws UI wireframes as plain text.

1. Download each file below and read it before saving anything.
2. Save them under ~/.claude/skills/no-fi/, keeping the same relative paths after /no-fi/.
3. Tell me what you installed. Do not run any script until I ask.

- https://no-fi.dev/no-fi/SKILL.md
- https://no-fi.dev/no-fi/examples/activity-patterns.txt
- https://no-fi.dev/no-fi/examples/card-details.txt
- https://no-fi.dev/no-fi/examples/fintech-dashboard.txt
- https://no-fi.dev/no-fi/examples/send-money-form.txt
- https://no-fi.dev/no-fi/examples/settings-notifications.txt
- https://no-fi.dev/no-fi/examples/spending-report.txt
- https://no-fi.dev/no-fi/examples/transactions-table.txt
- https://no-fi.dev/no-fi/scripts/check_coverage.mjs
- https://no-fi.dev/no-fi/scripts/check_coverage.py
- https://no-fi.dev/no-fi/scripts/check_wireframe.mjs
- https://no-fi.dev/no-fi/scripts/check_wireframe.py
- https://no-fi.dev/no-fi/scripts/sync_vocabulary.py
- https://no-fi.dev/no-fi/vocabulary.json

Copy install prompt

Paste it into Claude Code or any agent. It lists every file as a readable URL.

$ npx skills add p-a-u-l-i-e/no-fi

Install with npx

Pulls the skill from the GitHub repository.

$ cp -R no-fi ~/.claude/skills/

Copy it yourself

Copy the folder into your Claude skills directory.

Then check your work

$ node no-fi/scripts/check_wireframe.mjs wireframe.txt

Check a wireframe

Fails on unsupported characters, broken or misaligned boxes, and wrong progress bars.

$ node no-fi/scripts/check_coverage.mjs

Check vocabulary coverage

Confirms every element appears in at least one example screen.

Six rules that keep every wireframe readable.

Plain characters

Double outside, single inside

Fixed width

Describe, don't decorate

Draw it like the UI

Validate before sharing

One vocabulary that looks like the interface it describes.

Real screens, drawn in text before anything else.

A few commands to start drawing.

Then check your work