Vicino AI

a canvas built from the ground up

role
UX Engineer Intern
when
Jun – Aug 2026
Try Canvas (the working replica, opens in a new tab) vicino.ai (opens in a new tab)
the story in four chapters

Overview

Vicino AI turns a marketing brief into a workflow you can see: an infinite canvas where every AI tool is a node.

role
UX Engineer Intern
when
Jun – Aug 2026
stack
FigmaReact 19xyflow
place
Bellevue, WA
  1. Canvasfirst, the thing
  2. Systemthen its language
  3. The AI guidethen the machines
  4. At workthen the pen
first, the thing

Chapter 1: Canvas

a board where AI tools become nodes

Every tool is a node: image, video, 3D, audio. But the idea was mapped in a sketchbook first, three sheets, one for each use case, drawn before the editor had a single pixel.

Hand-drawn use-case map of Canvas on graph paper: a prompt box wired to a picture and on to a movie, branches to 3D and sound, a tool rail, and a little robot agent in the corner
Sketch of the first use case, just ask it: a chat panel asking for an ad for a bottle, an arrow to a small node board that draws itself, and a check mark
Sketch of the second use case: an image node wired to a panel of sliders, a model dropdown and a Go button, captioned every node is its own studio

What a node can be, today

text image video 3D
  • Image
  • Video
  • 3D Model
  • Audio
  • Text / Prompt
  • Sketch to Image
  • Image Editor
  • Shooting Studio
  • Storyboard
  • 3D Refine
  • Multi-View
  • Video Merge
  • Lipsync
  • Motion Transfer

Two ways to build

describe it, or wire it

Same board, two hands on it. Tell the agent what you want and watch the graph assemble, or place every node and pull every wire yourself. Most real work is both.

with the agent

describe it, check the plan, add it

Vicino AI Copilot

a six-second clip of Eden Hazard dribbling past defenders

  1. read the brief: one player, six seconds
  2. found references, checked the models
  3. wired the still in as the first frame
  1. Text Promptthe brief
  2. Imageflux-2-pro
  3. Videoveo3.1 · 6s

Plan3 nodes29 creditson the board

by hand

drag a node, pull a wire, press run

Anatomy of a node

one card, read closely

Every node is the same small promise: inputs on the left, the work in the middle, an output on the right. Learn this card and you’ve read them all.

01The header names the verb. Image, Video, 3D, Audio: one card, one job, stated in a word.

02Ports are coloured by cargo. Purple is text, teal is image, apricot is video, blue is 3D. This card takes a prompt and a reference picture, and you can read that from across the room.

03The well is the work. Results land full-bleed in the card itself. No preview button, no popup: the picture is the interface.

04The model is a visible choice. flux-2-pro sits on the face of the card, never buried in settings, printed where you can question it.

05Run lives on the node. Press play on the card, not in a global toolbar. Progress paints under the work, and a finished node earns its check.

06The output hands it on. Whatever this card makes becomes the next one’s input the moment a wire leaves this port. Small promises, chained into a pipeline.

then its language

Chapter 2: System

the design language behind Pulse

With my colleagues I helped create the design system behind Pulse, Vicino’s marketing-analytics side: 356 tokens in one truth-source file, and a brand book that ships as a website, because the best handoff is the real thing.

live · vicino-ds / brand.html

Pulse / Post

  1. 01command, not clutter
  2. 02cyan earns attention
  3. 03readable at speed
  4. 04one strong anchor

the palette, straight from tokens.css

  • stage#eef3f3
  • surface#ffffff
  • ink-800#1d1d1f
  • cyan-500#49e0f5
  • cyan-700#0d7685
  • green#43ba51
  • blue#3987f3
  • amber#f19a08
  • red#ef4444
  • purple#6366f1
The Pulse / Post design system’s brand book, a web page of brand foundations (opens the real file in a new tab)

Decisions, shown

how the language got chosen

Design systems are arguments settled with evidence: four candidate accents on identical dashboards, where cyan won, and one whole screen pushed to the edge of too much cyan.

Accent study

four accents, one dashboard

The accent study: identical dashboards in cyan, green, yellow and violet (opens the real file in a new tab)
design-system / comparisons / dashboard-accent-comparison.html

Home experiment

how far the cyan can go

one whole screen, at the edge of too much

The home cyan experiment: a whole home screen testing how far the accent can go (opens the real file in a new tab)
design-system / experiments / home-cyan-experiment.html

Components

62 components, one truth source

Each one a plain HTML and CSS pair behind the same 356 tokens, with its states, and drift-checked in CI. The browser below is the real one: pick any component.

live, pick any one · html-component-preview.html (opens the component browser in a new tab) vicino-ds / library.html
The component browser, listing 62 components with live specimens
The Figma component library’s specimen board (opens the real file in a new tab)
then teach the machines

Chapter 3: The AI guide

a design system machines can read

A design system starts to drift the moment a machine starts drawing. So we wrote it down as a generation contract: a skill an AI agent loads before it touches a screen. Reuse before inventing, one truth source, and a list of things it must never do.

The AI generation guide, rendered as a document (opens the real file in a new tab)
live · design-system / ai-generation-guide.md
ai-generation-guide.mdnever
  1. No painted-on cyanThe brand lives in the page’s wash; it goes flat the moment a second card does it.
  2. No fake premiumNo neon shadows, no mystery blobs, no generic purple AI styling.
  3. One layer of glassThe outer bento is glass, the content inside is solid: never glass on glass.
  4. One action surfaceZero or one saturated action card. Two means the page lost its anchor.
  5. No border scaffoldingStructure comes from tone and spacing, not boxes drawn around boxes.
  6. No heavy typeHierarchy by size, spacing and colour, never bold body copy.

fail the output if text clips, colours don’t explain state, card shadows form square artifacts, cards nest, or you can’t tell the next action

then hand them the pen

Chapter 4: The guide, at work

eighteen screens, redrawn on-system

Its first big job was Pulse’s onboarding, eighteen screens from landing page to first Daily Report. I handed Claude Code the guide and the system and let the machine do most of the drawing, every screen built live from the real tokens.

pulse-onboarding-design-review.vercel.app

The review, as a website

each screen as it ships beside its redesign, defect by defect

90findings in all, across eighteen screens, on Pulse’s severity ladder
blockers
11
friction
47
polish
32
see the review (opens in a new tab)
The Pulse onboarding design review: eighteen screens, each shown as it ships today beside its proposed redesign (opens the real file in a new tab)
by the end of August

Results

what shipped

24node typeson Canvas, image to audio and every tool between

62componentseach an HTML and CSS pair with its states

356tokensin one truth-source file

14chartsin one data-display family

18screensof onboarding, redrawn on-system

  1. Build the thing first. Canvas taught us what the language needed.
  2. Then build the language. Tokens linked, never copied, turn drift into a design decision.
  3. Then teach the machines. A system an AI can read is a system that holds.
  4. Then hand them the pen. Eighteen screens later, the system held.