# Adobe XD Projects at AI Tinkerers

> Canonical HTML: https://aitinkerers.org/technologies/adobe-xd
> Markdown URL: https://aitinkerers.org/technologies/adobe-xd.md
> Technology record last updated: 2026-09-18T15:13:54Z
> Generated: 2026-09-21T18:34:53Z

Adobe XD is the vector-based UX/UI platform for designing, prototyping, and sharing interactive user experiences across web and mobile applications.

XD is a dedicated vector design tool for the entire user experience workflow: design, prototype, and collaboration. Designers use its powerful features, like Repeat Grid and Responsive Resize, to quickly create high-fidelity wireframes and layouts for iOS, Android, and web. The Prototype mode allows for wiring artboards with micro-interactions and animations, generating a shareable link for stakeholder review and user testing. As a core Creative Cloud application, XD ensures seamless asset import from Adobe Photoshop and Illustrator, streamlining the handoff process to developers via design specs.

- Official technology site: https://www.adobe.com/products/xd.html
- Public AI Tinkerers demos and talks: 2
- Result page: 1 of 1

## Recent Public Talks and Demos

### [Failing Fast with AI: Rapid Prototyping Using Google AI Studio](https://pereira.aitinkerers.org/talks/rsvp_BLcMVGVLlTs)

This demo explores a paradigm shift in product development: failing fast to learn faster. I’ll demonstrate how Google AI Studio can be used to rapidly prototype AI-powered applications, validate ideas, and surface potential product value—without investing significant time, money, or engineering resources upfront. The focus will be on hands-on experimentation, iteration cycles, and technical workflows rather than slides or theory.

- Event context: Cambio de paradigma AITINKERERS PEREIRA 2026 — 2026-02-26 — Pereira
- Public talk page: https://pereira.aitinkerers.org/talks/rsvp_BLcMVGVLlTs

### [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

## Related Technologies

- [Figma](https://aitinkerers.org/technologies/figma) ([Markdown](https://aitinkerers.org/technologies/figma.md)) — 6 public demos
- [Axure RP](https://aitinkerers.org/technologies/axure-rp) ([Markdown](https://aitinkerers.org/technologies/axure-rp.md)) — 1 public demo
- [Balsamiq Mockups](https://aitinkerers.org/technologies/balsamiq-mockups) ([Markdown](https://aitinkerers.org/technologies/balsamiq-mockups.md)) — 1 public demo
- [Bitcoin](https://aitinkerers.org/technologies/bitcoin) ([Markdown](https://aitinkerers.org/technologies/bitcoin.md)) — 1 public demo
- [Chroma](https://aitinkerers.org/technologies/chroma) ([Markdown](https://aitinkerers.org/technologies/chroma.md)) — 8 public demos
- [CSS](https://aitinkerers.org/technologies/css) ([Markdown](https://aitinkerers.org/technologies/css.md)) — 6 public demos
- [ERC-8004](https://aitinkerers.org/technologies/erc-8004) ([Markdown](https://aitinkerers.org/technologies/erc-8004.md)) — 2 public demos
- [FAISS](https://aitinkerers.org/technologies/faiss) ([Markdown](https://aitinkerers.org/technologies/faiss.md)) — 17 public demos
- [Framer](https://aitinkerers.org/technologies/framer) ([Markdown](https://aitinkerers.org/technologies/framer.md)) — 2 public demos
- [Gemini models](https://aitinkerers.org/technologies/gemini-models) ([Markdown](https://aitinkerers.org/technologies/gemini-models.md)) — 2 public demos
- [Google AI Studio](https://aitinkerers.org/technologies/google-ai-studio) ([Markdown](https://aitinkerers.org/technologies/google-ai-studio.md)) — 6 public demos
- [GPT-3](https://aitinkerers.org/technologies/gpt-3) ([Markdown](https://aitinkerers.org/technologies/gpt-3.md)) — 191 public demos
- [GPT-4](https://aitinkerers.org/technologies/gpt-4) ([Markdown](https://aitinkerers.org/technologies/gpt-4.md)) — 529 public demos
- [Hugging Face](https://aitinkerers.org/technologies/hugging-face) ([Markdown](https://aitinkerers.org/technologies/hugging-face.md)) — 41 public demos
- [InVision](https://aitinkerers.org/technologies/invision) ([Markdown](https://aitinkerers.org/technologies/invision.md)) — 1 public demo
- [LangChain](https://aitinkerers.org/technologies/langchain) ([Markdown](https://aitinkerers.org/technologies/langchain.md)) — 445 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