Tessli

Curated design resources

Find better design resources, faster.

Tessli is a manually curated index of useful web and product design resources, organised to help designers and developers find stronger references without another noisy feed.

Search is ready.

  • 129Curated resources
  • 11Practical categories
  • No accountNeeded to browse
  • OpenCommunity-built project

UI with the reasoning attached.

Tessli is an open-source UI library that explains itself. Every component, section and page ships with working code, a live preview and its reasoning: when to use it, when not to, the rules it follows and the generic default it replaces.

12 items so far, none reviewed by a maintainer yet. Browse the library

  • Section

    Product hero with real UI

    The headline says what the product does for whom, so a visitor knows within one line whether to keep reading.

  • Page

    Dashboard overview

    The heading is the question people open the page to answer, and the first sentence answers it, so most visits end after one line.

Anatomy of an item.

Every item carries the same notes, for people and for agents. These are the real notes for Pricing tiers compared on the limits that matter, shortened; the item page has all of them.

Use when

  • The product has two or three self-serve plans that differ on a few clear limits.
  • Monthly and annual billing are both offered and the difference should be visible before checkout.

Avoid when

  • There are more than three plans, or pricing is usage-based; use a calculator or a full comparison table.
  • Every plan needs a sales conversation; show what is included and one contact route instead.

Common AI default

Three identical rounded cards, the middle one raised with a gradient border and a "Most popular" pill, a dozen ticked features per card that mostly repeat, the same "Get started" button on every card, and an annual toggle whose saving is a hard-coded percentage.

What this item does instead

  • Plans are compared on three named limits, written out as values ("Up to 50", "1 year") in the same order on every plan, so the difference is readable at a glance.
  • Only the recommended plan gets the primary button; it is marked with a text label as well as a border, so the recommendation does not depend on colour.
  • The annual saving is computed from the prices, and the billed-yearly total is shown, so the switch never promises a discount the numbers do not support.

Rules it follows

The same notes, for coding agents.

Agents install items with the shadcn CLI and keep every rule in one small file, TESSLI.md. A local, read-only MCP server and plain JSON and Markdown versions of every library item, source and collection cover the rest.

The rules file

npx shadcn@latest add online-scope-lab/tessli/rules

One item

npx shadcn@latest add online-scope-lab/tessli/pricing-tiers

Where else to look.

Beside the library, a curated directory of 129 design and frontend sources in 11 categories: what each one is good for, how to access it and where it falls short.

Built in the open.

Suggest a source, submit a design or contribute an item. Every path ends in a GitHub issue or pull request, reviewed in public.