agentleFS
Sign inStart free
selamy-labsselamy-labs/agent-skills/skills/ascii-ui-mockups/SKILL.md

ascii-ui-mockups

Skill0 starsChanged 7 days agoMITView on GitHub

Use when exploring or communicating a UI layout before writing code. Sketch the screen as a text mockup — boxes, fields, labels — and offer a few distinct variations, so the layout decision is made cheaply in a PR or chat before anyone builds it.

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    If pixel-level visual design or interaction feel is the question, a mockup won't answer it — build the real thing.

    line 18

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

ASCII UI Mockups

A text mockup answers "what goes where" in seconds, inside a PR description or chat, with zero tooling and zero implementation cost. It's the cheapest possible place to have the layout argument — before components exist.

When this beats a real prototype

  • Aligning on layout/IA before committing to implementation.
  • Showing two or three structural options so someone can pick, not react.
  • Embedding a layout in a PR, issue, or ADR where an image wouldn't version.

If pixel-level visual design or interaction feel is the question, a mockup won't answer it — build the real thing.

How to do it well

  1. Restate the requirement first — the components, the data shown, the hierarchy — so the sketch targets the actual need.
  2. Offer 2–4 distinct variations, not one. The value is in contrasting structural approaches (sidebar vs top-nav, table vs cards), each with one line on its trade-off.
  3. Use a consistent box vocabulary so it reads cleanly:
+----------------------------------------------+
| Logo            Search [____________]  (User)|
+--------+-------------------------------------+
| Nav    | Dashboard                           |
| - Home | +-------------+  +----------------+  |
| - Stats| | Active: 1,204|  | Revenue chart  |  |
| - Bills| +-------------+  |   /\   /\       |  |
|        | +----------------------------------+ |
|        | | Recent orders (table)            | |
|        | |  #  Customer     Total   Status  | |
|        | | 01  A. Rivera    $42.00  Paid    | |
+--------+-+----------------------------------+-+
  1. Label interactive elements — [Button], [____] input, (o) radio, [x] checkbox, (User) menu — so structure and affordance are both legible.
  2. Number the options and ask for a pick. Be ready to merge elements from two, or refine the chosen one.

Hand off cleanly

Once a layout is chosen, translate it into a component breakdown and build order — the mockup becomes the blueprint the implementation refers back to, so the structure decision doesn't get relitigated mid-build.

Adapted from the MIT-licensed softaworks/agent-toolkit ascii-ui-mockup-generator agent.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free