19
Aisle
Modern store — big search, mega menu, coral deal rails and product cards that turn into steppers
- Commerce & marketplaces
- Light-first
- Dense
- Persian-first
Design-language skills for AI coding agents
Taste, packaged for your coding agent.
Tastefolio is a library of 30 distinct design languages written as Agent Skills. Install one and Claude Code — or any agent that reads SKILL.md — designs your website and dashboard in that style: RTL and LTR, light and dark, with your own brand color.
- 30 skills
- 60 working demos
- English + فارسی
- Site + dashboard each
Pick a style
Every card is a real screenshot of a demo built with that skill. Filter by what you are making, then open the live demos.
20
Syllabus
Online academy — navy graph-paper heroes, highlighter actions, curriculum with free previews and a real lesson player
- Editorial & content
- Light-first
- Balanced
- Persian-first
21
Brief
Design & build studio — wide display type, an ink stage for the work, scrolling browser frames and a client portal with pinned feedback
- Brand & lifestyle
- Light-first
- Balanced
- Persian-first
24
Linework
Hairline technical — a page ruled by 1px lines with crosshairs, ink as the only brand, mono labels and a developer console
- Developer & data
- Light-first
- Dense
28
Passage
Travel documents as an interface — guilloche security paper, boarding-pass program cards, rubber stamps for milestones, a points check and a client portal built like a passport
- Product & SaaS
- Light-first
- Balanced
- Persian-first
01
Switchboard
Calm, settings-first utility UI where every option is one clear switch
- Product & SaaS
- Light-first
- Balanced
02
Hearth
Warm technical clarity — paper canvas, ink buttons, mono labels, honest tables
- Product & SaaS
- Light-first
- Dense
03
Atelier
Gallery-grade product marketing — huge tight type, serif-italic accents, glass and motion
- Brand & lifestyle
- Light-first
- Airy
04
Stratus
Persian-first enterprise platform — product mega menu, split headlines, rail + sub-nav consoles
- Cloud & infrastructure
- Light-first
- Balanced
- Persian-first
05
Ultraviolet
Dark-first infrastructure for AI — indigo space, violet light, glowing edges and isometric hardware
- Cloud & infrastructure
- Dark-first
- Balanced
- Persian-first
06
Tier
Plan-driven commerce — domain search, billing toggles, savings ribbons and a tidy client area
- Commerce & marketplaces
- Light-first
- Balanced
- Persian-first
07
Datasheet
Engineering catalog — parametric filters, mono part numbers, LED stock dots and seven-segment readouts
- Commerce & marketplaces
- Light-first
- Dense
- Persian-first
08
Sideload
Content & downloads hub — post cards, sidebar widgets, download boxes with mirrors and versions
- Editorial & content
- Light-first
- Dense
- Persian-first
09
Shelf
Consumer app-store shelves — squircle icons, snap carousels, bright pills and a playful night canvas
- Commerce & marketplaces
- Dark-first
- Balanced
- Persian-first
10
Broadsheet
Newspaper editorial — nameplate, column rules, kickers and decks, a newsroom built from typography
- Editorial & content
- Light-first
- Dense
11
Stamp
Playful neo-brutalism — thick ink outlines, hard shadows that press, flat sticker colors
- Product & SaaS
- Light-first
- Airy
12
Raster
Swiss grid system — black, white, one red, giant grotesk numerals and a visible 12-column grid
- Editorial & content
- Light-first
- Balanced
13
Teletype
Terminal-native UI — one monospace face, box-drawn panes, [ bracketed ] controls and a status bar
- Developer & data
- Dark-first
- Dense
14
Kashi
Persian heritage — girih stars, pointed arches, tile friezes and inscription-like titles on plaster ivory
- Brand & lifestyle
- Light-first
- Airy
- Persian-first
15
Ticker
Market workspace — hairline mosaics, monospace tabular numbers, green/red only for up and down
- Developer & data
- Dark-first
- Dense
- Persian-first
16
Clay
Soft, tactile wellness — puffy clay surfaces, pastel tiles, controls pressed into the page
- Product & SaaS
- Light-first
- Airy
17
Maison
Quiet luxury — Didone display, spaced small caps, hairlines and a great deal of ivory
- Commerce & marketplaces
- Light-first
- Airy
18
Bento
Modular modern — every idea in its own rounded tile on one calm grid
- Product & SaaS
- Light-first
- Balanced
22
Lucent
Liquid glass — refracting capsules over an aurora that takes its colours from what is playing
- Product & SaaS
- Dark-first
- Balanced
- Persian-first
23
Clinic
Healthcare booking — search-first hero, doctor cards with free slots, a time picker and a patient panel set in a hyperlegible face
- Product & SaaS
- Light-first
- Balanced
- Persian-first
25
Estate
Property listings — stone paper, moss actions, serif prices, a list + map split with price pins and an agent panel with a lead pipeline
- Commerce & marketplaces
- Light-first
- Balanced
- Persian-first
26
Margin
Long-form reading — warm paper, a narrow serif column, numbered sidenotes in a wide margin, a reader's highlighter and a quiet writer studio
- Editorial & content
- Light-first
- Airy
- Persian-first
27
Dot
Dot-matrix hardware — paper or black, one LED red, display type made of dots, a drawn device with a live 15×15 face and a device app with a glyph composer
- Brand & lifestyle
- Light-first
- Balanced
- Persian-first
29
Rack
Servers you can almost touch — graphite rack-unit faceplates, status LEDs, glowing VFD readouts, one power-button orange and faders that build a VPS like a mixing desk
- Cloud & infrastructure
- Dark-first
- Balanced
- Persian-first
30
Sprocket
A social photo network made of analog film — posts as photo prints with a date imprint, reels on a sprocket strip, profiles as contact sheets with grease-pencil picks and a red-safelight darkroom mode
- Editorial & content
- Light-first
- Balanced
- Persian-first
No style matches these filters.
Three steps to a styled project
- 1
Install one skill
Add the Tastefolio marketplace once, then install the style you want. Each skill is a standalone folder, so copying it into .claude/skills works too.
/plugin marketplace add tastefolio/tastefolio.github.io /plugin install switchboard@tastefolio - 2
Point your project at it
Name the style in your request or in CLAUDE.md. One style per project keeps the result coherent.
# CLAUDE.md Use the Tastefolio "Switchboard" skill for all UI work. Brand color: #0f766e · Languages: fa (RTL) + en - 3
Build anything
Ask for pages, dashboards, forms or components. The skill supplies tokens, layout rules, component specs and a review checklist.
Build a pricing page and an account dashboard for our app using the Switchboard style.
What is inside each skill
SKILL.md- Identity, rules, layouts, components, RTL notes and a pre-ship checklist.
assets/tokens.css- Light, dark and Persian tokens. Swap the brand color, keep the style.
assets/kit.css · kit.js- A reference implementation: components and behaviors, framework-free.
references/- Stack adapters for Tailwind v3/v4 and shadcn/ui, plus deeper patterns.
examples/- The two demos shown here — a public site and a dashboard.