Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Framework-agnostic design tokens demo v1.0.0

Use this resource to generate a deterministic interface from design tokens, without depending on a framework

New

  • 34 downloads
  • 30 likes
  • 58 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install framework-agnostic-design-tokens

First time: connect the CLI with

npx --yes palatekit@latest login

The agent reads the YAML front matter (oklch colors, typography, spacing) and the markdown rules before generating components. You get a reproducible visual layer, with accessibility constraints and a verification checklist.

Mostly picked by

Updated November 2, 2026

Card for the “Framework-agnostic design tokens demo” DESIGN.md with its palette

Details

Works in
Install guides
Generates with
Your agent's model
Licence
Apache-2.0

Similar resources

View all

What you get

  • DESIGN.md: YAML tokens and narrative rules
  • Accessibility constraints and layout patterns
  • Token consumption contract and verification checklist

Good fit for

  • A project that wants to share tokens across several agents
  • A team that has not yet chosen its framework

Not for

    Tags

    • tokens
    • yaml
    • oklch
    • accessibility

    About

    You say

    “Generate the card component from the tokens in DESIGN.md.”

    Card for the “Framework-agnostic design tokens demo” DESIGN.md with its palette

    DESIGN.md published by kozz36 under the Apache-2.0 license, delivered in its original version.

    Show more

    How to use it

    1. Copy DESIGN.md to the root of your project
    2. Ask your agent to generate a deterministic interface from design tokens, without depending on a framework
    3. Review and adjust the result

    Content preview

    Files

    • DESIGN.md9.9 KB
    • LICENSE11.3 KB
    • NOTICE-PALATEKIT.md0.5 KB
    • README.md4.4 KB

    Origin and licence

    Listed unmodified

    Author
    kozz36
    Source
    github.com/kozz36/frontend-designer-skill/tree/a1ca0df80260fc93dca89501802972eae49c29d4/
    Licence
    Apache-2.0

    Notice

    « frontend-designer-demo » (kozz36, Apache-2.0) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.

    User reviews

    –

    No ratings yet

    Loading reviews…

    Delete your review?

    Your rating and comment will be removed from the page.