Articles on AI coding's design problem.

Honest write-ups on Claude Code design plugins, AI design slop fingerprints, and what a Python-engine pivot looks like. Posts compare against real GitHub competitors and cite live star counts.

• launch · v3.0 · ~3,300 words · ~12 min

  ux-skill v3.0: we shipped The Brain. Brand specs are training data now, not templates.

  The biggest architectural shift since v1. 7-axis synthesizer. Triple-mode dispatch (strict_brand / brand_anchor / pure_synthesis). Axis interaction matrix with four documented conflicts. Decisions ledger closes the feedback loop. New /ux-evolve auto-loop with a 65 quality gate. Fully offline. No LLM ever called.

• tutorial · ~2,200 words · ~9 min

  Redesign an existing website with AI: the full ux-skill workflow, install to brand-true result

  Point ux-skill at a site you already run. It reads the brand off the live page, anchors a design system to it, rebuilds the page, and fails the build if the output drifts off-brand or into AI-slop. The exact command order: /ux-init through /ux-evolve: with a real before-and-after: a UK commercial skip-hire lead-gen page that cleared the brand-fidelity gate at 100 with 0 high-severity lint.

• field notes · ~800 words · ~5 min

  Responsive by construction: layouts with zero media queries

  AI tools reach for a breakpoint table because that is what the training data is full of, and the breakpoints lie the moment a component is reused in a narrower slot. Auto-fit grids and container queries make a layout respond to its own box instead. Here is the CSS the engine emits, and the overflow detail most hand-written grids miss.

• field notes · ~900 words · ~5 min

  Turn a screenshot into a design brief, no vision model

  Most of what defines a visual identity is recoverable with arithmetic over the pixels: a palette by k-means, canvas polarity by luminance, density by edge count. The engine reads all three with plain computer vision, never uploads the image, and hands back a structured brief. Plus an honest list of what pixels cannot tell you.

• guide · ~1500 words · ~7 min

  ux-skill v3.0 in 5 minutes: install, synthesize, evolve, ship

  The fast path through The Brain. Install, synthesize a fresh design language for your brief, run the evolve loop, check your local stats, and ship: fully offline, no LLM ever called.

• field notes · ~900 words · ~5 min

  Everything built with shadcn/ui looks the same: and how to break out

  shadcn/ui ships unstyled primitives; AI fills them with the same zinc/violet/Inter defaults. The components aren’t the problem: the missing brief is. A structured brief that compiles to concrete tokens makes the same components render as a distinct brand.

• field notes · ~900 words · ~5 min

  Why v0, Bolt, and Lovable all ship the same look

  Prompt-to-app builders converge on one centroid because an empty brief has a single most-likely render, and adjectives only re-roll the same vocabulary. The fix is structure: deterministic tokens and an anti-slop linter: not better prompts.

• field notes · ~900 words · ~5 min

  Why AI always reaches for the purple gradient

  The violet-to-blue gradient is the strongest AI-design tell. Why the models default to it: frozen SaaS fashion, Tailwind’s indigo, thumbnail-friendly templates: and how to escape the centroid: one accent under 80% saturation, semantic color, real brand palettes.

• field notes · ~900 words · ~5 min

  Why AI design always defaults to Inter

  AI reaches for Inter because it’s the default of nearly every reference UI it trained on: Tailwind UI, Vercel, shadcn. The tell isn’t that Inter is bad; it’s one neutral grotesque used for every voice. Pick type for the surface instead.

• field notes · ~950 words · ~5 min

  The accessibility holes in AI-generated UI

  AI optimizes for how a UI looks, not whether it works: so it ships low-contrast text, removed focus rings, and icon-only buttons with no label. The defects are invisible in a screenshot and mechanical to catch on commit.

• field notes · ~980 words · ~5 min

  Design tokens are the missing layer in AI coding

  AI coding tools generate components but skip the token layer, so color, spacing, and type are improvised per file and drift instantly. A brief that compiles to tokens keeps every screen consistent and rebrandable.

• field notes · ~900 words · ~5 min

  Why AI design defaults to rounded-2xl and soft shadows

  Big radius, a soft shadow on every card, a redundant translucent border. AI ships one inherited surface texture because it regresses to the shadcn/Tailwind centroid. Treat radius and elevation as brand and density tokens instead.

• field notes · ~950 words · ~5 min

  Every AI landing-page hero is the same

  Centered headline, a filled button beside a ghost one, a gradient backdrop, a tilted screenshot. It is the centroid of every SaaS hero in the training data. The fix is structural: asymmetry, one confident CTA, brand-carrying type.

• field notes · ~900 words · ~5 min

  Why every AI UI reaches for the bento grid

  The bento grid went from Apple keynote to AI default. Now every feature section is the same rounded mosaic of mismatched tiles. Bento is a content-fit decision, not a default. Read the weights first.

• field notes · ~1,000 words · ~6 min

  A pre-ship design review checklist for AI-generated UI

  AI output passes a glance and fails a review. A layer-by-layer checklist: palette, type, layout, density, radius, states, accessibility, motion: with the tell and the fix for each. Most of it is mechanically checkable.

• field notes · ~1,000 words · ~6 min

  How to make AI coding tools output on-brand UI

  AI ships off-brand UI because an adjective-only brief has one most-likely render, the centroid. The fix is structure: capture the brand as tokens, feed them as hard constraints, and lint the output for drift.

• field notes · ~950 words · ~5 min

  Why AI-generated UIs get spacing wrong

  AI spaces everything with one safe gap value, which kills rhythm and grouping. Real layouts have a scale tied to density. The fix is a 4px-based system, not uniform padding everywhere.

• field notes · ~900 words · ~5 min

  Why AI design uses the same icons every time

  The same Heroicons and Lucide set at one weight on every section, or emoji standing in as icons. AI has an icon tell too. Pick an icon family by brand weight, use them sparingly, never emoji.

• 日本語 · launch v3.0 · ~10,900 chars · ~12 min

  ux-skill v3.0: The Brain をリリース。ブランド仕様はテンプレートではなく訓練データに。

  v2 はカタログから選んでいた。v3 はそこから蒸留する。7 軸シンセサイザー、3 つの自動振り分けモード、軸の相互作用マトリックス、決定台帳による閉じたフィードバックループ、そして品質ゲート 65 を持つ新しい /ux-evolve オートループ。

• 简体中文 · launch v3.0 · ~8,400 chars · ~12 min

  ux-skill v3.0: 我们发布了 The Brain。品牌规范现在是训练数据,不是模板。

  v2 从目录里挑,v3 从目录里蒸馏。七轴合成器、三种自动分发模式、轴的相互作用矩阵、闭合反馈回路的决策账本,以及质量门禁卡在 65 的新 /ux-evolve 自动循环。

• العربية · launch v3.0 · ~14,900 chars · ~12 min

  ux-skill v3.0: أطلقنا The Brain. مواصفات العلامات صارت بيانات تدريب لا قوالب.

  في v2 كنّا نختار من الكتالوج. في v3 نُقطّر منه. مُولِّد بسبعة محاور، ثلاثة أوضاع تلقائيّة، مصفوفة تفاعُل المحاور، سِجلّ قرارات يُغلِق حلقة التغذية الراجعة، وحلقة /ux-evolve الجديدة ببوّابة جودة عند 65.

• Español · launch v3.0 · ~3,500 words · ~12 min

  ux-skill v3.0: lanzamos The Brain. Las brand specs ahora son datos de entrenamiento, no plantillas.

  v2 elegía del catálogo. v3 destila de él. El sintetizador de 7 ejes, los tres modos auto-despachados, la matriz de interacción de ejes, el log de decisiones que cierra el bucle de retroalimentación, y el nuevo auto-loop /ux-evolve con un quality gate en 65.

• Deutsch · launch v3.0 · ~3,100 words · ~12 min

  ux-skill v3.0: wir haben The Brain veröffentlicht. Brand-Specs sind jetzt Trainingsdaten, keine Vorlagen.

  v2 hat aus dem Katalog gewählt. v3 destilliert daraus. Der 7-Achsen-Synthesizer, die drei automatisch gewählten Modi, die Achsen-Interaktionsmatrix, das Entscheidungs-Ledger als geschlossene Rückkopplungsschleife und der neue /ux-evolve-Auto-Loop mit Quality-Gate bei 65.

• Français · launch v3.0 · ~3,300 words · ~12 min

  ux-skill v3.0: on a livré The Brain. Les brand specs sont des données d'entraînement, plus des templates.

  v2 piochait dans le catalogue. v3 le distille. Le synthétiseur à 7 axes, les trois modes auto-dispatchés, la matrice d'interaction des axes, le journal de décisions qui boucle la rétroaction, et la nouvelle boucle automatique /ux-evolve avec un seuil qualité à 65.

• field notes · v3.0 · ~1,400 words

  The centroid problem: why AI-generated design regresses to the mean

  v0, Bolt, Lovable, Cursor, Copilot all converge on one look because the model returns the average of its training set. The four forces behind the sameness: regression to the mean, shared scaffolding, identical briefs, no memory: and the deterministic way out of the centroid.

• field notes · v3.0 · ~1,300 words

  Why AI-generated dashboards all look the same: and the density fix

  Sidebar, top bar, four stat cards, one line chart, a table: every AI dashboard ships the same layout at the wrong density. The real failure is gallery spacing on a cockpit surface; the density axis (4px base, compressed scale, the right chart per metric) is the fix.

• reframe · v3.0 · ~2,400 words

  Brand specs are training data, not templates: the v3.0 reframe

  The 160-brand catalogue used to be a pool the recommender picked from. v3.0 makes it the vocabulary a 7-axis synthesizer distills into novel design languages per brief. Same files. Different role. Three modes auto-dispatched by what's in the brief.

• architecture · v3.0 · ~2,200 words

  A deterministic design engine that learns offline: how v3.0 avoids the LLM trap

  Same brief always produces the same output. Reproducible across machines. Yet the system genuinely learns from its own decisions log over time. The math behind a generative system without an LLM call in the engine.

• architecture · v3.0 · ~2,100 words

  What a closed-loop design system actually means: ux-skill v3.0 explained

  Most AI design tools generate once and forget. v3.0 writes every recommendation, every lint score, every accept/reject to a local ledger. The recommender reads that ledger and re-ranks. The feedback loop is closed for real.

• deep dive · v3.0 · ~2,400 words

  The 7 axes of a design system: how v3.0 maps a brief to tokens

  warmth · contrast · density · geometry · formality · motion · type_personality. The seven continuous axes that v3.0's synthesizer derives from your brief and compiles to palette, type, spacing, radius, motion tokens. With the actual math.

• comparison · v3.0 · ~2,000 words

  ux-skill v3.0 vs UI/UX Pro Max: engine vs atlas, scored honestly

  UI/UX Pro Max is the finished atlas of UI knowledge. ux-skill v3.0 is the engine that decides what UI should exist. Different categories. Where each wins, where the other doesn't, and why we picked the engine path.

• practice · ~1650 words · ~7 min

  Vibe coding is real: but your AI still ships the same defaults

  The honest take on vibe coding in 2026: the velocity is real, the fingerprint is recognizable. ux discover is the brief, ux recommend narrows the model's choices, ux lint sets the deterministic floor with 145 regex rules over a 1,243-entry catalog.

• comparison · ~2100 words · ~10 min

  AI-built websites in 2026: why every one looks the same and how to fix it

  Vercel v0, Lovable, Bolt.new, Replit Agent, Tempo, and Claude Code all default to the same UI patterns. The shared fingerprint, the three convergent forces, and the export-then-lint workflow that closes the loop. With a real 200-line v0 export lint report.

• technical · ~1900 words · ~9 min

  The anti-slop CLI for vibe coders: 145 rules, no LLM, runs in CI

  A deterministic command-line design linter built for the vibe-coding workflow. JSON output, exit-code contract, pre-commit + GitHub Actions + GitLab CI + Husky + Lefthook recipes. Measured numbers: 18ms staged-diff, 96ms warm full repo, 412ms cold.

• 日本語 · ~5000 chars · ~7 min

  「Vibe coding」でAIが書いたUIが毎回同じに見える本当の理由

  バイブコーディングは速い。だが出力は毎回同じに見える。Claude Code、Cursor、Cline、Windsurfが踏む既定値を、100ルールの正規表現リンターで止める方法。LLM呼び出しなし、CIで動く。

• 简体中文 · ~4200 chars · ~7 min

  用「Vibe Coding」做出真正能交付的设计: 而不是 AI 默认的紫蓝渐变

  Vibe coding 的速度是真的,但 AI 默认输出的紫蓝渐变、三张同款卡片、Inter 当显示字体也是真的。用 ux-skill 的 100 条确定性正则规则、998 条目录,在 CI 中卡住默认值。

• 한국어 · ~4700 chars · ~7 min

  AI 코딩 시대의 디자인 규칙: 왜 모든 AI가 같은 UI를 만드는가

  Claude Code, Cursor, Cline, Windsurf가 모두 같은 디폴트를 답습합니다. 본문 서체를 90px 헤드라인으로, 보라-파랑 그라데이션, 3개의 동일 카드 그리드. ux-skill은 100개의 결정론적 정규식 규칙으로 이를 CI에서 막습니다.

• tutorial · ~1450 words · ~7 min

  Zed design plugin: install ux-skill to stop generic AI design output

  Zed is the high-performance Rust IDE with a first-class MCP client called the Agent Panel. Three install paths: MCP stdio server, CLI in the terminal pane, pre-commit hook. ux-skill plugs in through ~/.config/zed/settings.json.

• tutorial · ~1625 words · ~8 min

  GitHub Copilot design rules: how ux-skill catches AI design fingerprints in Copilot output

  Copilot ships great code completion and generic design. ux-skill generates a .github/copilot-instructions.md file plus a 68-rule deterministic linter that runs on disk after Copilot writes. Custom instructions raise the floor; the linter sets the ceiling.

• tutorial · ~1700 words · ~8 min

  JetBrains AI Assistant design system rules: keeping IntelliJ + WebStorm generations on-brand

  Works in IntelliJ, WebStorm, PyCharm, GoLand, RubyMine, RustRover. .junie/guidelines.md generator, tokens.css for Spring projects, Kotlin object emit for Compose, MCP server for AI Assistant.

• technical · ~1700 words · ~8 min

  AI design system CLI: the npx and pip way to generate a design system in under 60 seconds

  Three CLI commands cover the full pipeline: ux discover (10-field brief), ux recommend (5-parallel-search), ux persist save (MASTER.md + tokens.css + manifest.json). Engine compute under 300 ms; brief is 100% of the human time.

• technical · ~1550 words · ~8 min

  Claude Desktop + MCP design intelligence: ux-skill as a stdio server

  None of the top eight Claude design skills ship an MCP server. ux-skill v2 does: 18 tools registered, a dedicated ux-mcp entry point, one JSON block in claude_desktop_config.json. Same engine reaches Cursor, Windsurf, Cline, Continue.

• story · ~1100 words · ~6 min

  Dogfooding ux-skill: bugs we found by using our own design engine

  We ran our recommender against our homepage brief. It returned a stark editorial scheme: the same one we'd just shipped. We filed two bugs against ourselves (editorial tag too narrow, calm tag coupled to luminance), fixed both, re-ran the engine, and shipped a page that passes its own linter cleanly.

• design · ~1200 words · ~7 min

  Dark editorial cinema: the design language behind ux-skill's new homepage

  Near-black canvas, per-scene accents, Bricolage Grotesque variable on scroll, scroll-pinned cinema motion. The actual design choices, swatches, type config, lint result (0 findings at high), and how to recreate the system from your own brief.

• technical · ~1300 words · ~9 min

  MCP server for design intelligence: ux-skill's 18 tools any agent can call

  The Python engine, the 51-rule linter, the 1,243-entry catalog, all exposed as 14 Model Context Protocol tools. Real Pydantic schemas, real Claude Desktop / Cursor / Windsurf configs, real JSON-RPC payloads. The asymmetric move against single-host skills.

• reference · ~1500 words · ~9 min

  57 motion presets for AI coding: Framer Motion, GSAP, and CSS snippets

  The motion library AI coding tools never ship. 57 presets across 8 categories, each available in all three engines, with prefers-reduced-motion branches and performance notes. When to pick CSS vs Framer Motion vs GSAP.

• technical · ~1400 words · ~8 min

  Regex linter for AI coding: how 51 rules catch design slop in CI

  Deterministic, sub-second, zero LLM calls. The 51 ux-skill anti-pattern rules grouped by category, a real rule walkthrough, GitHub Actions workflow, pre-commit hook config, and a before/after on a Next.js hero that fails three rules.

• reference · ~2000 words · ~14 min

  The 35 AI design fingerprints every AI coding tool ships by default

  The complete taxonomy. Inter at 90px, indigo-to-blue gradients, three equal cards, generic placeholder names, fade-in-up on everything. Grouped by category: Typography, Color, Layout, Content, Motion, A11y, Quality: with detection regex, why each is slop, and the fix.

• marketplace · ~1400 words · ~8 min

  Best Claude Code marketplace plugins for design and frontend in 2026

  Ranked: 10 plugins to install for design and frontend work, with live star counts and exact /plugin install commands. Includes ui-ux-pro-max (84k), open-design (54k), taste-skill (25k), huashu-design (15k), ux-skill v2, stitch-skills, nothing-design-skill, hallmark, material-3-skill, and frontend-design-skill.

• technical · ~1200 words · ~7 min

  Monorepo design system with AI coding: ux-skill's tokens.css output

  One shared tokens.css + manifest.json across Turborepo or Nx packages. AI-generated code in every apps/* consumer stays on system. The linter exits non-zero on drift at PR time.

• comparison · ~1100 words · ~6 min

  Figma MCP vs ux-skill: design intelligence in your AI coding session

  Figma MCP imports designs from a Figma file into the AI session; ux-skill generates a system from a written brief. Side-by-side table, plus the complementary workflow when you have a partial Figma file and need to extend it.

• tutorial · ~950 words · ~5 min

  Windsurf design rules: install ux-skill for Cursor-grade design output

  Windsurf has no native design rules. Cascade inherits the model's defaults: Inter at 90px, indigo gradients, three equal cards. Three install paths via .windsurfrules / npx / pip. Free + MIT.

• comparison · ~1200 words · ~5 min

  ui-ux-pro-max alternative: ux-skill v2: every dimension, side by side

  The most-starred Claude UX skill on GitHub is ui-ux-pro-max-skill at 84k. ux-skill v2 borrows their recommender pattern and goes further. Honest table: 1,243 entries vs ~600, 145-rule linter vs none, 160 brand specs vs none.

• ranking · ~1500 words · ~7 min

  Anti-AI-slop tools for Claude Code in 2026: the honest ranking

  Every AI coding tool produces the same fingerprints: Inter as display, purple gradients, three identical cards. Ranked: Leonxlnx/taste-skill (25k stars), Nutlope/hallmark (2.1k), ux-skill v2 (145 deterministic regex rules, only one with CI-friendly enforcement).

• guide · ~1400 words · ~6 min

  Best Claude Code skills for UX/UI design: 2026 ranking

  Ranked by live GitHub stars: ui-ux-pro-max (84k), open-design (54k), taste-skill (25k), huashu-design (15k), stitch-skills (5.7k), nothing-design-skill (2.4k), hallmark (2.1k), material-3-skill (955). Cards with architecture, scope, real fit.

• tutorial · ~900 words · ~4 min

  Cursor design plugin: install ux-skill to stop generic AI design output

  Cursor users hit the same wall as Claude Code users. Three install paths via .cursorrules / npx / pip. Pairs with shadcn/ui MCP + Tailwind. Free + MIT.

• technical · ~1100 words · ~5 min

  Python design system generator: ux-skill v2's 5-parallel-search engine

  How the engine merges five lanes (industry → style → palette → type → motion) into one recommendation, deterministically, in seconds. Brief in, complete design system out. 1,243 structured entries under the hood.

• comparison · ~2900 words · ~13 min

  Best AI coding tools for design-quality output in 2026

  Cursor, Windsurf, Claude Code, GitHub Copilot, Cline, Continue, and Codex: ranked by what they actually produce for design-quality frontends. The eight shared defaults, the bolt-on that fixes them, and the 17 IDEs ux-skill ships into.

• guide · ~3700 words · ~16 min

  From Figma to code without losing the design system

  The handoff problem in 2026: why Figma MCP and AI coding tools drop tokens, and how ux-skill’s catalog plus its 145-rule linter keeps the system intact from Figma file to Cursor and Claude Code.

• more languages

  Read in your language

  Long-form SEO writing in twelve locales: same depth, native prose. Topics: what ux-skill does, how to install for Claude Code / Cursor / Windsurf, why the anti-AI-slop linter matters.

  Each locale has its own blog index: العربية · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Deutsch · Español · Português · Italiano · हिन्दी · Tiếng Việt

• 日本語 · ~2000 words · ~9 min

  AI コーディング デザイン: Claude Code デザインシステムの作り方

  Claude Code、Cursor、Windsurf、GitHub Copilot、Cline が踏む 8 つの視覚的デフォルト。Inter を 90px の見出しに、紫から青のグラデーション、3 つの同じカード。ux-skill は 145 の決定論的正規表現ルールで CI 上でこれを止めます。

• Deutsch · ~2000 words · ~9 min

  KI-Coding Design: wie man ein Cursor-AI-Designsystem baut

  Jedes KI-Coding-Werkzeug liefert dieselben acht visuellen Defaults. Inter als Display-Schrift, Verlauf von Lila nach Blau, drei identische Karten. ux-skill blockiert sie in der CI mit 145 deterministischen Regex-Regeln.

• Français · ~2000 words · ~9 min

  IA coding design: construire un système de design pour Claude Code

  Chaque outil d'IA de programmation produit les mêmes huit défauts visuels. Inter en typographie display, dégradé violet vers bleu, trois cartes identiques. ux-skill bloque ces motifs dans la CI avec 145 règles regex déterministes.

• 简体中文 · ~2000 words · ~9 min

  AI 编程设计: 用 ux-skill 给 Cursor 设计系统兜底

  任何 AI 编程工具都会输出同样八个视觉默认值:Inter 当显示字、紫到蓝渐变、三张一模一样的卡。ux-skill 用 145 条确定性正则规则,在 CI 上拦住这些模式。

• 한국어 · ~2000 words · ~9 min

  AI 코딩 디자인: Claude Code 디자인 시스템을 만드는 법

  모든 AI 코딩 도구가 같은 8가지 시각적 디폴트를 뱉습니다. 본문용 Inter를 90px 헤드라인으로, 보라-파랑 그라데이션, 동일한 카드 3개. ux-skill은 145개의 결정론적 정규식 규칙으로 CI에서 이를 막습니다.

• العربية · ~2000 words · ~9 min

  تصميم برمجة الذكاء الاصطناعي: كيف تبني نظام تصميم لـ Claude Code

  كل أداة برمجة بالذكاء الاصطناعي تنتج نفس الافتراضات الثمانية البصرية: خط Inter في حجم العنوان، تدرّج من البنفسجي إلى الأزرق، ثلاث بطاقات متطابقة. يوقف ux-skill هذه الأنماط في الـ CI عبر 145 قاعدة Regex حتمية.

• Português (BR) · ~2000 words · ~9 min

  Design para programação com IA: como montar um sistema no Claude Code

  Toda ferramenta de programação com IA cai nos mesmos oito defeitos visuais: Inter em tamanho de display, gradiente roxo para azul, três cartões idênticos. O ux-skill bloqueia esses padrões no CI com 145 regras regex determinísticas.

• Italiano · ~2000 words · ~9 min

  Design AI coding: come costruire un design system con Claude Code

  Ogni strumento di AI coding cade negli stessi otto difetti visivi: Inter usato come display, gradiente da viola a blu, tre card identiche. ux-skill blocca questi pattern nella CI con 145 regole regex deterministiche.