# CSS Projects at AI Tinkerers

> Canonical HTML: https://aitinkerers.org/technologies/css
> Markdown URL: https://aitinkerers.org/technologies/css.md
> Technology record last updated: 2026-09-18T15:13:38Z
> Generated: 2026-09-20T16:40:34Z

A utility-first CSS-in-JS library for React that enables prop-based styling with a minimal footprint.

and CSS (stylized as &css) delivers a utility-first styling engine for React environments. It cuts the cord on external stylesheets: developers use shorthand props (like p:4 for padding) to style components directly in the markup. The package is lean (under 5kB gzipped) and provides strict TypeScript definitions to catch errors early. It is a precise choice for building high-performance interfaces without the overhead of traditional CSS-in-JS frameworks.

- Official technology site: https://and-css.com
- Public AI Tinkerers demos and talks: 6
- Result page: 1 of 1

## Recent Public Talks and Demos

### [Manifest: An open-source LLM router that focuses on reducing AI inference costs](https://geneva.aitinkerers.org/talks/rsvp_1OM9lldCTbk)

Manifest is a smart model router for agents and AI apps that redirects each query to the right model, saving up to 70% in AI costs. 🔀 Routing based on complexity, specificity and custom HTTP headers 🎛️ Mix your providers: API keys, Subscriptions, Local models, Custom providers 📊 Track every single dollar, setup notifications and limits 🚑 Fallback on different models when queries fails

- Event context: AI Tinkerers Geneva Inaugural Meetup - May 2026 — 2026-05-13 — Geneva
- Public talk page: https://geneva.aitinkerers.org/talks/rsvp_1OM9lldCTbk

### [Building My Own Piano Teacher Because I'm Too Impatient for YouTube](https://nurnberg.aitinkerers.org/talks/rsvp_NveTwvTUV4E)

I totally vibe coded a browser-based piano learning app that uses your microphone to detect pitches and gamifies music theory with timed challenges. (I've never really seen the code.) Demo: 1. Show the app and what it can do 2. Show my workflow: Prompting in Claude Code to add another feature 3. Showing the infrastructure (hosting for free with static website on Github Pages, using localStorage as Database)

- Event context: AI Tinkerers Nürnberg: April Meetup — 2026-04-22 — Nürnberg
- Public talk page: https://nurnberg.aitinkerers.org/talks/rsvp_NveTwvTUV4E

### [Claude does queuing](https://manchester-nh.aitinkerers.org/talks/rsvp_d1ggwXXOkoE)

I asked Claude to generate a simulation of a simple deterministic queueing system in JavaScript, and to output the results as a set of three graphs using Plotly. I wrote moderate length prompt with very clear specifications for the model of the system and the desired output. I validated the results using an identical model that I created manually in the MathWorks SimEvents product. My goal was primarily experimentation, my own personal learning, and the evaluation of Claude's capabilities.

- Event context: AI Tinkerers Manchester (Bedford), NH - March 2026 Meetup — 2026-03-18 — Manchester NH
- Public talk page: https://manchester-nh.aitinkerers.org/talks/rsvp_d1ggwXXOkoE

### [Design → Agentic UI Parity: Verifiable Figma/XD → MCP App UIs using constraint manifests + template registries](https://nyc.aitinkerers.org/talks/rsvp_ISg04Sc9n2Q)

We’ll demo a verifiable pipeline that translates Figma/Adobe XD designs into constraints + tokens + responsive rules, generates interactive MCP App UIs, and produces a design parity report (auditable) that proves the shipped UI honors design intent across breakpoints. What we’re building (technical, grounded) A design-to-agentic-UI system with four primitives: Design ingestion (Figma/XD) Extract design tokens (color, type scale, spacing), component semantics (buttons, cards, nav), and layout intent (grid, alignment, density). Convert to a normalized Design Intent Spec (DIS). Template registry (universal UI templates) A library of parametric templates (layout archetypes + interaction patterns). Templates accept tokens + constraints and output UI code. Constraint manifest (the verification core) A machine-readable manifest that encodes: Layout constraints (grid columns, min/max widths, padding rules, alignment invariants) Responsive rules (breakpoints, reflow behavior, truncation rules, priority ordering) Component contracts (required states, accessibility expectations, interaction affordances) This manifest is the “source of truth” the generator must satisfy. MCP App UI runtime The UI is delivered as an MCP App (interactive UI inside the client) with explicit tool bindings (UI actions → tool calls). The same manifest drives both generation and verification. The verification mechanism (non-brittle parity checks) We’ll show two complementary verification layers that go beyond “apply tokens”: A) Structural / rule-based verification (fast, deterministic) Compile DIS → constraint assertions per breakpoint: e.g., “card grid is 1-col under 640px, 2-col under 1024px, 3-col above” “primary CTA remains above the fold on mobile” “nav collapses into drawer with N max items visible” Verify the generated UI against these assertions by analyzing: template parameters used layout tree structure computed layout properties for each breakpoint (from the rendered DOM snapshot) B) Visual / perceptual verification (tolerant, non-brittle) Render both: design reference (from Figma/XD export frames) generated UI (MCP App UI at the same viewport sizes) Compute similarity using: a perceptual diff (SSIM/LPIPS-style) and bounding-box alignment checks for key components (header, CTA, cards) Output a parity score per breakpoint + annotated diffs. The auditable output (what we’ll “pop the hood” on) A concrete engineering artifact called a Design Parity Report, containing: tokens applied (hashes + versions) template IDs and parameters used constraint manifest version parity scores per breakpoint annotated diffs for any violations remediation hints (“use Template X instead of Y”, “tighten padding constraint at md breakpoint”) This report is logged as an append-only, auditable event alongside the UI artifact, so teams can prove what changed, why it changed, and whether parity improved or regressed over time. What we’ll demo live (5 minutes) Start with a Figma/XD screen (desktop + mobile frames). Ingest → generate interactive MCP App UI. Run the parity checker across 3 breakpoints. Show the Design Parity Report + one intentional failure (e.g., CTA drops below fold on mobile). Fix by changing a constraint or swapping template → re-run → parity passes.

- Event context: Feb Demo Day: How are you turning design into code? (with Baz) — 2026-02-04 — New York City
- Public talk page: https://nyc.aitinkerers.org/talks/rsvp_ISg04Sc9n2Q

### [WhimsyPaws](https://toronto.aitinkerers.org/talks/rsvp_peDGmfwfVcs)

On one side, it's a simple game made for kids between ages 6-11. It has an AI-powered animal friend that chats with the kid and can play a suite of different games with the kid. On the other hand, the data that is generated through the child's interactions with this game is gathered, then insights are extracted from it using LLMs, and then reported to their parents. For now, the insight in question is broad strokes of the child's feelings like joy, sadness, anger, etc. The main idea is this: kids spend a lot of time on their phones these days and, consequently, they spend less time talking to their parents. On the other hand, all of their data is being collected and sold for potentially shady purposes. So why not give that data to the people who actually *should* be supervising them and knowing what they do online, i.e. their parents. Hence, we're making an app that exactly does this. In future iterations, it can be more than a game; it can be an all-present agent on kids' phones that monitors all activities on the phone so there's no way for kids to uninstall it or cheat it.

- Event context: AI Tinkerers Toronto - April 2025 Meetup at Shopify — 2025-04-24 — Toronto
- Public talk page: https://toronto.aitinkerers.org/talks/rsvp_peDGmfwfVcs

### [websim](https://sf.aitinkerers.org/talks/rsvp_Xnz3wl4pw2E)

explore, create, and remix your hallucinated internet with websim

- Event context: AI Tinkerers - San Francisco - Summer Edition - July 2024 — 2024-07-12 — San Francisco
- Public talk page: https://sf.aitinkerers.org/talks/rsvp_Xnz3wl4pw2E

## Related Technologies

- [HTML](https://aitinkerers.org/technologies/html) ([Markdown](https://aitinkerers.org/technologies/html.md)) — 9 public demos
- [JavaScript](https://aitinkerers.org/technologies/javascript) ([Markdown](https://aitinkerers.org/technologies/javascript.md)) — 40 public demos
- [TypeScript](https://aitinkerers.org/technologies/typescript) ([Markdown](https://aitinkerers.org/technologies/typescript.md)) — 205 public demos
- [Adobe XD](https://aitinkerers.org/technologies/adobe-xd) ([Markdown](https://aitinkerers.org/technologies/adobe-xd.md)) — 2 public demos
- [AI agents](https://aitinkerers.org/technologies/ai-agents) ([Markdown](https://aitinkerers.org/technologies/ai-agents.md)) — 35 public demos
- [Bitcoin](https://aitinkerers.org/technologies/bitcoin) ([Markdown](https://aitinkerers.org/technologies/bitcoin.md)) — 1 public demo
- [Claude-3](https://aitinkerers.org/technologies/claude-3) ([Markdown](https://aitinkerers.org/technologies/claude-3.md)) — 110 public demos
- [Claude AI](https://aitinkerers.org/technologies/claude-ai) ([Markdown](https://aitinkerers.org/technologies/claude-ai.md)) — 2 public demos
- [Claude Code](https://aitinkerers.org/technologies/claude-code) ([Markdown](https://aitinkerers.org/technologies/claude-code.md)) — 214 public demos
- [ERC-8004](https://aitinkerers.org/technologies/erc-8004) ([Markdown](https://aitinkerers.org/technologies/erc-8004.md)) — 2 public demos
- [Figma](https://aitinkerers.org/technologies/figma) ([Markdown](https://aitinkerers.org/technologies/figma.md)) — 6 public demos
- [Gemini](https://aitinkerers.org/technologies/gemini) ([Markdown](https://aitinkerers.org/technologies/gemini.md)) — 188 public demos
- [GitHub](https://aitinkerers.org/technologies/github) ([Markdown](https://aitinkerers.org/technologies/github.md)) — 74 public demos
- [Github Pages](https://aitinkerers.org/technologies/github-pages) ([Markdown](https://aitinkerers.org/technologies/github-pages.md)) — 3 public demos
- [Liquid UI](https://aitinkerers.org/technologies/liquid-ui) ([Markdown](https://aitinkerers.org/technologies/liquid-ui.md)) — 1 public demo
- [MCP](https://aitinkerers.org/technologies/mcp) ([Markdown](https://aitinkerers.org/technologies/mcp.md)) — 129 public demos
- [MCP server](https://aitinkerers.org/technologies/mcp-server) ([Markdown](https://aitinkerers.org/technologies/mcp-server.md)) — 3 public demos
- [Plotly](https://aitinkerers.org/technologies/plotly) ([Markdown](https://aitinkerers.org/technologies/plotly.md)) — 7 public demos