Ari. (@arianfront) header
Ari. (@arianfront) profile picture

Ari.

@arianfront

Design engineer. Web, motion, Design Systems, and AI that ships. Webby honoree, Best Use of AI.

 Dallas, TX
ari.soy
Joined April 2018
  • Tweets224
  • Following21
  • Followers212
45Media
Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)Photo by Ari. (@arianfront)
Publishing a design system did not make teams use it. On Marshal, adoption came from three things around the components: office hours, one intake for every request, and a showcase built with the libraries teams already used.
Diagram of design system adoption on Marshal at Cabify: office hours, one intake for component and token requests, and the Built with Marshal showcase with React Hook Form, React Step Wizard, remote tables and SWR, plus the three ways it shipped: npm package, SCSS partials, CDN CSS bundle.

ALT Diagram of design system adoption on Marshal at Cabify: office hours, one intake for component and token requests, and the Built with Marshal showcase with React Hook Form, React Step Wizard, remote tables and SWR, plus the three ways it shipped: npm package, SCSS partials, CDN CSS bundle.

1
11
The full case study: ari.soy/work/design-system-l…

DESIGN SYSTEM LEADERSHIP — Arian Zargaran

Design owns the intent. Engineering owns the code. I owned the gap between them.

ari.soy
2
Ari. retweeted
pablo (@pdepablocom) profile picture
pablo
@pdepablocomNov 2
zero doubt, this was my best purchase of the year animations.dev
animations.dev

animations.dev

animations.dev
Emil Kowalski (@emilkowalski) profile pictureEmil Kowalski
@emilkowalskiNov 2
Working on some new interactive examples for my animation course to help you understand how spring and easing curves work. You’ll be able to drag and interact with everything yourself to see how your changes affect the animation in real time.
1
2
1
51
7,243
Nested rounded corners with the same radius never look parallel. Inner radius = outer radius minus padding. Details I can't unsee, #1.
Details I can't unsee #1. The same dark card holding a gradient image, 48px corner radius and 24px padding, shown twice. Left, same radius: the image also uses 48px and the dark gap swells at every corner. Right, outer minus padding: the image uses calc(48px - 24px) and the gap stays even all the way around.

ALT Details I can't unsee #1. The same dark card holding a gradient image, 48px corner radius and 24px padding, shown twice. Left, same radius: the image also uses 48px and the dark gap swells at every corner. Right, outer minus padding: the image uses calc(48px - 24px) and the gap stays even all the way around.

1
19
More of my design systems work: ari.soy/work/design-systems

DESIGN SYSTEMS — Arian Zargaran

27 themes from one shared base. Launches went 5x faster.

ari.soy
5
32,000 particles on a 2D canvas. One file, no shaders, no buffers. Slower than WebGL, and you can read the whole simulation.
A real frame from the react-murmuration studio: thousands of thin particle trails flowing left to right, violet turning to orange. Beside it: Murmuration.tsx, Canvas 2D on purpose, 32,000 particles by default, one file of 852 lines, zero shaders, buffers or dependencies.

ALT A real frame from the react-murmuration studio: thousands of thin particle trails flowing left to right, violet turning to orange. Beside it: Murmuration.tsx, Canvas 2D on purpose, 32,000 particles by default, one file of 852 lines, zero shaders, buffers or dependencies.

2
2
46
The repo, with the studio to tune every parameter: github.com/ArianZargaran/rea…
GitHub - ArianZargaran/react-murmuration: Particles advected along a dictated 3D path on a 2D...

GitHub - ArianZargaran/react-murmuration: Particles advected along a dictated 3D path on a 2D...

Particles advected along a dictated 3D path on a 2D canvas. Directed, not emergent. - ArianZargaran/react-murmuration

github.com
22
Every component in our Figma file has a Usage frame a coding agent pulls by ID, next to Specs and Breakpoints. Usage was the one that changed the output. "Which variant when" had only ever lived in designers' heads.
Diagram of an AI-first design system. Each component in Figma has three frames addressable by ID: Specs, Breakpoints and Usage, with Usage highlighted. They feed a rules layer (agents.md, Cursor rules, Figma MCP, a component template) that produces the agent output, checked on a real page with Browser MCP. Below: a component that imitated the system with a hex color typed by hand next to one that used a token. Both pass a visual diff; only one survives the next theme change. Illustration, values are examples.

ALT Diagram of an AI-first design system. Each component in Figma has three frames addressable by ID: Specs, Breakpoints and Usage, with Usage highlighted. They feed a rules layer (agents.md, Cursor rules, Figma MCP, a component template) that produces the agent output, checked on a real page with Browser MCP. Below: a component that imitated the system with a hex color typed by hand next to one that used a token. Both pass a visual diff; only one survives the next theme change. Illustration, values are examples.

1
1
41
Case study: ari.soy/work/ai-x-design

AI × DESIGN — Arian Zargaran

Put the intelligence in the rules, not the agent.

ari.soy
7
Anthropic engineer: “95% of our engineers are using self-improving harnesses + Opus 5.5. Now everyone is building agentic systems around them.” In 1–2 months, we’ll all be building harnesses to orchestrate self-improving agents. No more raw prompting. In a 35-minute lecture, Anthropic engineer shows how to build a self-improving agent harness from scratch with Opus 5.5. Worth more than a $1500 agentic course. Watch it Then read the full Opus 5.5 harness engineering guide below ↓
beamnxw ./ (@beamnxw) profile picturebeamnxw ./
@beamnxwOct 6
Stop letting unfinished Opus 5.5 runs eat your budget Set up the harness before your next long task Save progress, verify results, reuse the workflow The full 7-layer setup below ↓
Make Opus 5.5 Finish Long Tasks: A Reusable Harness Engineering Setup

Make Opus 5.5 Finish Long Tasks: A Reusable Harness Engineering Setup

Article · @beamnxw
33
99
3
1,238
189,453
This is f*cking insane. An Anthropic engineer on why they pay him $350K–$950K: "I know how to build harnesses. 99% of people still wire multi-agent systems by hand and wonder why they fall apart. Mine run loops, sandbox their tools and turn yesterday's logs into new skills. Same model, 10x more reliable agents, and they get better overnight." Opus 5.5 → Harness → Loops → Sandbox → Memory In a short workshop, he builds one from zero: step 1 → the harness owns the loop, the context and the sandbox step 2 → split the brain from the hands. ~60% faster to first token step 3 → it runs server-side. If it crashes, it reads the log and picks up where it stopped step 4 → failure costs nothing. It retries and replays instead of starting over step 5 → last night's logs become this morning's memory. The agent wakes up smarter Anthropic has a name for step 5: "dreaming" Most people burn weeks building this by hand. You can skip that Bookmark it and watch today Then read the article below ↓
redsyntx (@redsyntx) profile pictureredsyntx
@redsyntxOct 15
View article
X. It’s what’s happening

X. It’s what’s happening

From breaking news and entertainment to sports and politics, get the full story with all the live commentary.

x.com
12
10
121
26,322
Spotify Chief Architect, Niklas Gustavsson: "Once we implemented loops in our workflow, our agent success rate went from 20-30% to 80%." 26 minutes with Claude Code creator Boris Cherny on how Spotify runs AI agents across 20 million lines of code. Today 73% of their code is written by AI, most merged without a human ever seeing it. The model matters less than the loop you build around it. Watch it, then read the full guide on building loops below.
Anatoli Kopadze (@AnatoliKopadze) profile pictureAnatoli Kopadze
@AnatoliKopadzeJun 20
Loops explained: Claude, GPT, Mira and what actually works

Loops explained: Claude, GPT, Mira and what actually works

Article · @AnatoliKopadze
106
251
32
2,475
845,567
Git isn't just a tool, it's a time machine for your code. Every commit is a snapshot you can return to, every branch is a sandbox to experiment in. Master Git and you'll never fear making changes again. #SoftwareDev #CleanCode #DevTips #Programming
23
Today we're introducing Claude for Social Media. Just enter your website and Fastlane creates thousands of viral videos promoting your product in one click. This is truly insane.
500
695
390
10,278
3,675,167
Show HN: Deep-XPIA – Prompt injection benchmark for multi-agent AI systems freyzo.github.io/deep-xpia/ #AI #Security #Benchmark

deep-xpia

Multi-hop cross-prompt injection benchmark for multi-agent AI systems

freyzo.github.io
34
An Overview of Modern AI Robotics from First Principles. interlatent.com/blog/interla…
Image from Ari. (@arianfront)
8
REST APIs are just a menu for data. GET to fetch, POST to create, PUT to update, DELETE to remove. Master those four verbs and a URL, and you can talk to almost any service on the internet. #WebDev #Frontend #BuildForTheWeb #100DaysOfCode
Image from Ari. (@arianfront)
1
1
13
boomurl — Publish a Website Generate a website and publish it live in seconds. boomurl gives any HTML/CSS/JS a real HTTPS URL — no account, no build step. Sites belong to YOUR email. chatgpt.com/g/g-6a2aad2c3098…
6
Every webpage visit is just your browser saying “GET me that page” and the server replying “200 OK — here you go.” Master HTTP methods & status codes and the web stops feeling like magic. #WebDev #Frontend #BuildForTheWeb #100DaysOfCode
1
8
Claude Code just dropped Opus 4.8 with Dynamic Workflows, higher performance scores, bigger tasks management and much much more #ClaudeCode #DynamicWorkflows anthropic.com/news/claude-op…
Introducing Claude Opus 4.8

Introducing Claude Opus 4.8

Claude Opus 4.8 brings stronger performance across coding, agentic tasks, and professional work, and the consistency to handle long-running work.

anthropic.com
42
Load more