Make and build in your taste.

Find a design you like, turn it into a design.md, and build in that taste.

Generate design.md How it works →

tastefile — paste · generate · design.md

Figma CSS

output

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 from a rich Figma frame and hit Generate — dashboards, settings, and product screens work best.

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

How it works

inspiration.com

Acme

Overview

Customers

Revenue

Settings

Dashboard+ New

Revenue

$48.2k

↑ 12%

Active users

1,284

↑ 4%

This week$12,840

Find a frame whose taste you like

Use one of your own Figma frames, or find inspiration anywhere on the web and pull it into Figma with the html.to.design plugin. Pick something detailed: dashboard, settings page, table view, sidebar, cards, buttons, inputs, icons.

styles.css

✓ Copied

.button {
  background: #F54E00;
  color: #14120B;
  padding: 12px 22px;
  border-radius: 9999px;
  font-family: 'Helvetica Neue';
}

Copy the CSS

Right-click the frame in Figma and copy the CSS. Tastefile reads the raw values: colors, type, spacing, shadows, radius, borders, and repeated component patterns.

design.md

# design.md

## Colors
--accent  #F54E00
--bg      #14120B
--text    #EDECEC

## Radius · Type
--radius  10px   medium

Generate design.md

Get a clean file that explains your visual system in a way Claude and Cursor can follow.

new-page.tsx

export default function Page() {
  return (
    <main className="hero">
      <h1>Build in your taste</h1>
      <Button variant="accent">
        Get started
      </Button>
    </main>
  )
}

Build new screens

Drop design.md into Claude or Cursor with a short product brief. Now the AI can create 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