Make and build in your taste.

Find a design you like, turn it into a design.md, and build in that taste. Paste any Figma frame's CSS and Tastefile keeps Claude and Cursor on-brand.

Try for free

Runs locally

CSS parsed in your browser

Paste the CSS from a rich Figma frame and I'll compile it into a design.md your coding agent can follow.

Dashboards, settings pages, and product screens work best.

Paste CSS, then ⌘↵ to generate.

design.md

styles.css

.button-primary {

background: #F54E00;

color: #EDECEC;

border-radius: 9999px;

padding: 12px 22px;

}

# Design Language

## Color System

--color-accent: #F54E00

--color-text: #EDECEC

## Radius

--radius-full: 9999px

design.md

Pasting Figma CSS…

Paste CSS on the left and hit Generate — your design.md appears here.

Try it once free — sign in to keep generating and save your tastes to a reusable library.

How it works

Four steps from a design you admire to new screens that match it. Everything up to design.md runs locally on your machine — real values pulled from the source, no guessing, no template slop.

Find

Pick a Figma frame — or any design you admire — with real UI to learn from.

Copy

Copy the frame's CSS. Tastefile reads the real values, locally, before any AI.

Generate

Compile a clean design.md — colors, type, spacing, and anti-slop rules.

Build

Hand it to Claude or Cursor and ship new screens in the same taste.

Step 1 · Find

Find a frame whose taste you like

Start from one of your own Figma frames, or find a design you admire anywhere on the web and pull it into Figma with the html.to.design plugin. The richer the frame, the better the result.

Step 2 · Copy

Copy the CSS from the frame

Right-click the frame in Figma and copy its CSS. Tastefile parses the raw values directly — nothing is invented, everything is read from what the designer actually built.

Step 3 · Generate

Generate your design.md

Tastefile compiles the extracted system into a clean, readable design.md — colors, type, spacing, components, plus anti-slop rules and builder instructions that Claude and Cursor actually follow.

Step 4 · Build

Build new screens in the same taste

Drop design.md into Claude or Cursor, attach a screenshot of what you're matching, and add a short product brief. With the tokens plus the image, the AI ships new pages and flows that feel like they came from the same designer.

Why this exists

Most people starting something new don't have the budget for a designer yet. So they ask AI to build the UI — and it guesses colors, invents spacing, adds random gradients, and makes every product feel like the same SaaS template.

Tastefile gives the model a source of truth before it starts building, so you can begin with a real visual identity from day one — and grow into it as you scale, instead of starting generic and fixing it later.

More than CSS variables

A good design.md captures the parts AI usually misses, so when you ask for a new dashboard, settings page, auth flow, or table view, the model has rules to follow.

ColorsTypographySpacing rhythmRadius systemShadow styleComponent patternsLayout rulesInteraction feelAnti-slop rulesAI builder instructions

Local-first by default

Tastefile does the important work before AI.

Your CSS is parsed locally first. Colors, spacing, radius, shadows, typography, and variables are extracted directly from the source. AI is only used as an optional enhancer to describe the product feel, primitives, and builder rules. If AI is unavailable, you still get a useful design.md.

Example anti-slop rules

✕Do not add random gradients.

✕Do not invent new colors.

✕Do not use emoji as icons.

✕Do not use oversized generic SaaS cards.

✕Do not use glassmorphism unless it exists in the source.

✕Do not use monospace labels unless the design uses them.

✕Do not change the spacing rhythm.

✕Do not make the UI feel like a template.

Built for people who design by building

Tastefile is for designers, design engineers, founders, and builders who use Figma, Claude, and Cursor together. Start with one frame. Extract the taste. Build the rest in the same language.

Generate design.md