{"slug": "show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw", "title": "Show HN: no-fi – a linter for the ASCII wireframes agents draw", "summary": "A developer released no-fi, an agent skill that makes Claude draw UI wireframes as plain ASCII and box-drawing text instead of styled mockups, installable via `npx no-fi-skill` into `~/.claude/skills/no-fi` or by uploading no-fi.zip under Settings, Capabilities, Skills on claude.ai. The skill enforces seven rules — printable ASCII plus box-drawing and block characters, double-lined outer frames with single-lined inner boxes, an 80-character line limit, fenced code-block output, no colors or icons, a fixed 44-element vocabulary in 7 groups (Structure, Fields, Buttons, Feedback, Navigation, Data, Charts), and validation by a bundled Node and Python checker script before results are shown. The release matters to teams using coding agents because it constrains generated wireframes to structure and content that can be reviewed and validated mechanically rather than reacted to on visual style.", "body_md": "**Wireframes without the distraction.** no-fi is an agent skill that draws UI as plain text, so a team argues about layout, content, and flow instead of color and type.\n\nAsk for a screen and Claude answers with a monospaced drawing: boxes, fields, buttons, tables, and bar charts made from plain characters. There are no colors, fonts, or icons to react to, so the only thing left to discuss is structure.\n\n```\n╔══════════════════════════════════════╗\n║ SIGN IN                              ║\n║                                      ║\n║ ┌──────────────────────────────────┐ ║\n║ │ Email                            │ ║\n║ │ [ ana@acme.com_______________ ]  │ ║\n║ │                                  │ ║\n║ │ Password                         │ ║\n║ │ [ ************_______________ ]  │ ║\n║ │                                  │ ║\n║ │ [[ Sign in ]]   [ Forgot? ]      │ ║\n║ └──────────────────────────────────┘ ║\n╚══════════════════════════════════════╝\n```\n\nThe outer frame is double-lined, every box inside it is single-lined, and the primary button gets double brackets. Larger screens are in [Examples](#examples).\n\nPick one. Each puts the `no-fi` skill folder where your agent loads skills from.\n\n**With a prompt**\n\nCopy the install prompt from [no-fi.dev](https://no-fi.dev/#get-started) and paste it into Claude Code or any agent. It runs the npx command below, or downloads the files one by one if it can't run npx.\n\n**With npx**\n\n```\nnpx no-fi-skill\n```\n\nThis copies the skill into `~/.claude/skills/no-fi`. Add `--project` to install it into `./.claude/skills/no-fi` instead, and `--force` to replace an existing install.\n\n**With the skills CLI**\n\n```\nnpx skills add p-a-u-l-i-e/no-fi --skill no-fi\n```\n\n**By hand**\n\n```\ngit clone https://github.com/p-a-u-l-i-e/no-fi.git\ncp -R no-fi/plugin/skills/no-fi ~/.claude/skills/\n```\n\n**On claude.ai**\n\nDownload [no-fi.zip](https://no-fi.dev/no-fi.zip) and upload it under Settings, Capabilities, Skills. It holds only the skill folder. GitHub's Download ZIP holds the whole repository, which claude.ai won't take as a skill.\n\nThe skill is plain text plus one small checker script, in Node and Python, so you can read every file before you install it.\n\nAsk for a screen the way you would ask a designer for a sketch. Saying wireframe or sketch is enough to load the skill, or type `/no-fi` in Claude Code.\n\nWireframe a send-money form with three steps.\n\nDraw the settings page for notification preferences.\n\nLet's talk through the transactions table before we design it.\n\nClaude replies with a fenced code block, runs the checker on it, and adds a note below the drawing for anything that needs a visual described in words.\n\nSeven rules keep every wireframe readable. The full text is in [`SKILL.md`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/SKILL.md).\n\n1. **Plain characters, plus box-drawing.** Printable ASCII, box-drawing borders, and block characters for bars and charts. No emoji, no tabs.\n2. **Double outside, single inside.** The outermost container uses double lines. Every box inside it uses single lines.\n3. **Fixed width.** No line is longer than 80 characters, and every box is the same width on every row.\n4. **Code block.** Output is always a fenced block, so alignment holds.\n5. **Describe, don't decorate.** No colors, fonts, or icons. Name anything visual in a note below the drawing.\n6. **Use the vocabulary.** Draw each element as the tables show. Don't invent symbols.\n7. **Validate.** Run the checker and fix every failure before showing the result.\n\n44 elements in 7 groups: Structure, Fields, Buttons, Feedback, Navigation, Data, and Charts. Each element looks like the component it stands for:\n\n- An **input** is one line. A**textarea** is a taller card with a`//` grip.\n- A **badge** is a pill,`( Paid )` . A**tag** is removable,`<Food x>` .\n- A **button** has brackets, and the**primary** one has double brackets.\n- Open states are drawn open: a **select** with its menu below, an**accordion** with its content under it.\n- **Modals** ,**toasts** , and**tooltips** are cards drawn inside the screen they sit on.\n\nThe complete table, with a drawing and a note for each element, is in [`SKILL.md`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/SKILL.md). The same data is in [`vocabulary.json`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/vocabulary.json).\n\nSeven finished screens in [`examples/`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples), built to use the whole vocabulary:\n\n| Screen | File | \n|---|---|\n| Fintech dashboard | [`fintech-dashboard.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/fintech-dashboard.txt) | \n| Send money form | [`send-money-form.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/send-money-form.txt) | \n| Transactions table | [`transactions-table.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/transactions-table.txt) | \n| Spending report | [`spending-report.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/spending-report.txt) | \n| Card details | [`card-details.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/card-details.txt) | \n| Notification settings | [`settings-notifications.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/settings-notifications.txt) | \n| Activity patterns | [`activity-patterns.txt`](https://github.com/p-a-u-l-i-e/no-fi/blob/main/plugin/skills/no-fi/examples/activity-patterns.txt) | \n\nYour agent checks every wireframe before it shows you one. To check one yourself, from anywhere:\n\n```\nnpx no-fi-skill check wireframe.txt\n```\n\nThe checker also ships with the skill, in Node and Python with the same output. From an install, or from this repository:\n\n```\nnode ~/.claude/skills/no-fi/scripts/check_wireframe.mjs wireframe.txt\npython3 plugin/skills/no-fi/scripts/check_wireframe.py wireframe.txt\n```\n\nIt fails on unsupported characters, tabs, ASCII box borders, boxes that don't close or line up, mixed double and single lines in one box, a double-line box nested inside another box, table dividers that don't land in the same column, progress bars whose fill disagrees with their percentage, bar chart rows whose length disagrees with their value, heatmaps and stacked columns without a legend, and column charts that don't say what a row is worth.\n\n`plugin/skills/no-fi/vocabulary.json` is the source of truth. These scripts live in `scripts/`, outside the skill, so they don't ship to users. After editing the vocabulary, run:\n\n```\npython3 scripts/sync_vocabulary.py                 # rewrite the tables in SKILL.md\nnode scripts/check_coverage.mjs                    # every element appears in an example\nnode plugin/skills/no-fi/scripts/check_wireframe.mjs plugin/skills/no-fi/examples/*.txt\n```\n\n`python3 scripts/check_coverage.py` gives the same coverage output without Node.\n\n```\nplugin/                    the Claude plugin\n  .claude-plugin/          plugin.json\n  skills/no-fi/            the skill\n    SKILL.md               rules and vocabulary tables\n    vocabulary.json        the element vocabulary as data\n    examples/              finished example screens\n    scripts/               the wireframe checker\nscripts/                   maintainer scripts: vocabulary sync and coverage\nbin/no-fi-skill.mjs        the npx no-fi-skill command\nassets/                    README images\nsite/                      the no-fi.dev site\n```\n\n", "url": "https://wpnews.pro/news/show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw", "canonical_source": "https://github.com/p-a-u-l-i-e/no-fi", "published_at": "2026-10-22 07:11:30+00:00", "updated_at": "2026-10-22 07:41:38.360805+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "generative-ai"], "entities": ["no-fi", "Claude", "Claude Code", "claude.ai", "no-fi.dev", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw", "markdown": "https://wpnews.pro/news/show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw.md", "text": "https://wpnews.pro/news/show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw.txt", "jsonld": "https://wpnews.pro/news/show-hn-no-fi-a-linter-for-the-ascii-wireframes-agents-draw.jsonld"}}