Neatly

Make your AI's HTML pages look designed

Neatly is a skill for Claude Code and other agents. Ask for a report, a slide deck, a dashboard, a landing page or a docs page, and get one self-contained HTML file in a calm, consistent style.

npx skills add kehaoran-ai/neatly
Try a colour
Make an HTML report onour Q3 numbers Activation doubled in Q3 41%week one
Fig.One request in, one finished page out. The agent writes the content; Neatly supplies the design.

Five layouts, one look

Each example is a single HTML file made with Neatly. Open one, or open the starting file the agent fills in.

Report example: a Q3 product review

Report

Reviews, analyses, memos and research write-ups. A contents rail, a numbers strip, charts and line-art figures.

Open the exampleStarting file
Deck example: a seed round pitch

Deck

16:9 slides. Arrow keys to move, prints one slide per page.

Open the exampleStarting file
Dashboard example: a growth overview

Dashboard

Four KPIs with sparklines, chart panels, a table and an activity feed.

Open the exampleStarting file
Landing page example for a notes app

Landing page

Hero with a line-art figure, features in two columns, two plans, questions and a closing call.

Open the exampleStarting file
Docs example: installing an SDK

Docs

Left navigation, numbered steps with code you can copy, and an "On this page" rail.

Open the exampleStarting file

How a page gets made

The design system is copied in untouched, so the agent writes about 80 lines of content instead of 800 lines of CSS.

  1. You ask in plain words

    "Turn these notes into a 6-slide deck for Monday." The skill picks the layout.

  2. The agent writes the body

    It fills the layout's blocks with your content, and only your content. Nothing you did not say gets added.

  3. The checker reads the page

    Serif headlines, gradients, rows of three cards, all-caps labels and stock phrases are caught before you see them.

  4. The page opens

    One file. It works offline, fits phones and prints cleanly.

terminal
$ python3 scripts/make.py report body.html q3.html
wrote q3.html
ok  q3.html  (0 errors, 0 warnings)

$ python3 scripts/check.py generated-elsewhere.html
FAIL  generated-elsewhere.html  (10 errors, 3 warnings)
  error  Font Inter is the default AI look.
  error  Gradient in page CSS.
  error  Blur, glass or text shadow.
  error  A row of exactly three cards.
  error  Emoji in the text.
  warn   Stock phrase 'Seamless'.
  ...

What the checker catches

Fails the page

  • Serif or italic headlines, Inter and Geist
  • Gradients, glow, blur and glass
  • Coloured bars down the left of a block
  • A row of exactly three cards
  • All-caps text, emoji, dark-mode styles
  • Leftover placeholders and a missing viewport

Warns about

  • Raw colours that ignore the accent token
  • Heavy shadows
  • Too many cards or too many accents
  • More than two em dashes
  • Stock marketing phrases

Install

Pick one. After that, ask for a page the way you normally would.

In Claude Code
/plugin marketplace add kehaoran-ai/neatly
/plugin install neatly@neatly
Any agent that reads skills
$ npx skills add kehaoran-ai/neatly
By hand
$ git clone https://github.com/kehaoran-ai/neatly
$ cp -r neatly/skills/neatly ~/.claude/skills/

Ask for your next report and see what comes back

MIT licensed. One CSS file, one optional script, no build step.

View on GitHub