<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>UI Hub · AI Design Techniques Blog</title><link>https://ui.incidental.site/blog/</link><atom:link href="https://ui.incidental.site/blog/rss.xml" rel="self" type="application/rss+xml"/><description>Original analysis: we synthesise multiple public sources in our own words and add our take and checklists. Every post ends with full references.</description><language>en</language><lastBuildDate>Thu, 15 Oct 2026 08:00:00 +0000</lastBuildDate>
<item><title>Figma code layers and Specs: the canvas becomes the shared context again</title><link>https://ui.incidental.site/blog/figma-code-layers-and-specs/</link><guid isPermaLink="true">https://ui.incidental.site/blog/figma-code-layers-and-specs/</guid><pubDate>Thu, 15 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>At Config India (15 Oct 2026) Figma moved code layers into open beta, launched Specs as a Markdown home on the canvas, and let libraries carry guidelines and code sources. The lesson for UI builders: agents are short of constraint files, not generators. / 在 Config India（2026-10-15）上，Figma 让代码图层进入公开测试，推出把 Markdown 放上画布的 Specs，并让组件库携带规范与代码源。给界面构建者的结论：智能体缺的不是生成器，而是约束文件。</description><enclosure url="https://ui.incidental.site/blog/img/figma-code-layers-and-specs-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Claude Design everywhere: out of beta, into every chat</title><link>https://ui.incidental.site/blog/claude-design-everywhere/</link><guid isPermaLink="true">https://ui.incidental.site/blog/claude-design-everywhere/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>Anthropic took Docs, Slides and Design out of beta on every plan, launched Dashboards and Motion in beta, and will close the standalone Design site on 14 Dec 2026. For UI builders the practical move is to migrate the design system now. / Anthropic 让 Docs、Slides、Design 在所有套餐正式可用，推出 Dashboards 与 Motion 测试版，并宣布独立 Design 站点将于 2026-12-14 关闭。界面构建者现在就该迁移设计系统。</description><enclosure url="https://ui.incidental.site/blog/img/claude-design-everywhere-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Tutorial: have an agent build a landing page using UI Hub as context</title><link>https://ui.incidental.site/blog/tutorial-agent-builds-landing-with-ui-hub/</link><guid isPermaLink="true">https://ui.incidental.site/blog/tutorial-agent-builds-landing-with-ui-hub/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tutorials</category><description>Six steps from an empty folder to a verified page: load AGENTS.md, search the encyclopedia, pick components, load skills, build, verify in a browser. / 从空文件夹到验证通过的页面六步走：加载 AGENTS.md、搜索百科、挑组件、加载技能、构建、浏览器验证。</description><enclosure url="https://ui.incidental.site/blog/img/tutorial-agent-builds-landing-with-ui-hub-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Weekly roundup, 14 Oct 2026: guideline files go mainstream</title><link>https://ui.incidental.site/blog/weekly-roundup-2026-w42/</link><guid isPermaLink="true">https://ui.incidental.site/blog/weekly-roundup-2026-w42/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>News</category><description>Figma agent GA with team guidelines, Lovable drops its pick-a-look step, Magic Patterns launches MagicOS, Chrome iterates on HTML-in-Canvas. What it means for your workflow. / Figma 智能体正式可用并支持团队规范，Lovable 取消「先选风格」步骤，Magic Patterns 推出 MagicOS，Chrome 迭代 HTML-in-Canvas。对你的工作流意味着什么。</description><enclosure url="https://ui.incidental.site/blog/img/weekly-roundup-2026-w42-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Design skills for Claude and Cursor: SKILL.md, rules and AGENTS.md</title><link>https://ui.incidental.site/blog/claude-cursor-design-skills/</link><guid isPermaLink="true">https://ui.incidental.site/blog/claude-cursor-design-skills/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Agent context</category><description>Three file formats, one idea: durable instructions an agent loads when relevant. How to write a design skill that changes output, with a template. / 三种文件格式，一个思路：智能体在相关时加载的持久指令。怎样写一个真正改变产出的设计技能，附模板。</description><enclosure url="https://ui.incidental.site/blog/img/claude-cursor-design-skills-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Design tokens for agents: the file that makes AI output on-brand</title><link>https://ui.incidental.site/blog/design-tokens-for-agents/</link><guid isPermaLink="true">https://ui.incidental.site/blog/design-tokens-for-agents/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Agent context</category><description>A machine-readable token file (the W3C DTCG format) plus a short usage note beats any adjective in a prompt. Structure, naming, and how to hand it to an agent. / 一份机器可读的 Token 文件（W3C DTCG 格式）加一段简短用法说明，胜过提示里任何形容词。结构、命名和交给智能体的方法。</description><enclosure url="https://ui.incidental.site/blog/img/design-tokens-for-agents-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Dashboard patterns that hold up: from KPI strip to drill-down table</title><link>https://ui.incidental.site/blog/dashboard-design-patterns/</link><guid isPermaLink="true">https://ui.incidental.site/blog/dashboard-design-patterns/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>AI tools love to generate twelve charts. Good dashboards answer three questions in order: is it OK, what changed, why. A layout and a component list for each. / AI 工具爱生成十二张图表。好的仪表盘按顺序回答三个问题：正常吗、变了什么、为什么。每一层对应的布局和组件。</description><enclosure url="https://ui.incidental.site/blog/img/dashboard-design-patterns-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Landing page teardown: what Linear and Vercel get right</title><link>https://ui.incidental.site/blog/landing-page-teardown-linear-vercel/</link><guid isPermaLink="true">https://ui.incidental.site/blog/landing-page-teardown-linear-vercel/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Teardowns</category><description>Two widely copied developer-tool homepages, read as a list of decisions: one message, product as hero image, dark restraint, and proof placed right after the promise. / 两个被大量模仿的开发者工具首页，拆成一串决策：一句主张、产品即首图、克制的深色、承诺之后紧跟证据。</description><enclosure url="https://ui.incidental.site/blog/img/landing-page-teardown-linear-vercel-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>OKLCH colour systems: palettes that survive dark mode</title><link>https://ui.incidental.site/blog/oklch-color-and-dark-mode/</link><guid isPermaLink="true">https://ui.incidental.site/blog/oklch-color-and-dark-mode/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>OKLCH keeps perceived lightness consistent across hues, so you can generate scales and dark themes by math instead of eyeballing. Tailwind v4 uses it by default. / OKLCH 让不同色相的感知亮度保持一致，色阶和暗色主题可以靠计算而不是靠肉眼。Tailwind v4 默认就用它。</description><enclosure url="https://ui.incidental.site/blog/img/oklch-color-and-dark-mode-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Typography for AI-generated UI: the fastest way to look less generic</title><link>https://ui.incidental.site/blog/typography-for-ai-generated-ui/</link><guid isPermaLink="true">https://ui.incidental.site/blog/typography-for-ai-generated-ui/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>Generators default to one sans at three sizes. A type scale, a second typeface, tighter tracking on display sizes and real line lengths fix most of it. / 生成器默认一种无衬线、三个字号。一套字号阶梯、第二种字体、大字号收紧字距和合理行长，能解决大部分问题。</description><enclosure url="https://ui.incidental.site/blog/img/typography-for-ai-generated-ui-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>shadcn blocks and registries: page sections as source code</title><link>https://ui.incidental.site/blog/shadcn-blocks-deep-dive/</link><guid isPermaLink="true">https://ui.incidental.site/blog/shadcn-blocks-deep-dive/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Component libraries</category><description>Blocks (dashboards, sidebars, login pages) install with one CLI command, and any team can publish its own registry. Why this is the best substrate for AI agents. / Blocks（仪表盘、侧栏、登录页）一条 CLI 命令就能装，任何团队都能发布自己的 registry。为什么这是 AI 智能体最好的底座。</description><enclosure url="https://ui.incidental.site/blog/img/shadcn-blocks-deep-dive-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Cult UI deep dive: tactile components with personality</title><link>https://ui.incidental.site/blog/cult-ui-deep-dive/</link><guid isPermaLink="true">https://ui.incidental.site/blog/cult-ui-deep-dive/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Component libraries</category><description>shadcn-compatible components that feel physical: dynamic islands, textured buttons, expandable cards. How to borrow personality without breaking consistency. / 兼容 shadcn、带物理手感的组件：灵动岛、质感按钮、可展开卡片。如何借来个性而不破坏一致性。</description><enclosure url="https://ui.incidental.site/blog/img/cult-ui-deep-dive-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Magic UI deep dive: animated components that install like shadcn</title><link>https://ui.incidental.site/blog/magic-ui-deep-dive/</link><guid isPermaLink="true">https://ui.incidental.site/blog/magic-ui-deep-dive/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Component libraries</category><description>An open-source (MIT) set of motion components distributed through the shadcn registry. Best picks for SaaS pages and how to keep them accessible. / 一套开源（MIT）的动效组件，通过 shadcn registry 分发。SaaS 页面最值得用的几个，以及如何保持无障碍。</description><enclosure url="https://ui.incidental.site/blog/img/magic-ui-deep-dive-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Aceternity UI deep dive: spectacle, used sparingly</title><link>https://ui.incidental.site/blog/aceternity-ui-deep-dive/</link><guid isPermaLink="true">https://ui.incidental.site/blog/aceternity-ui-deep-dive/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Component libraries</category><description>Copy-paste React + Tailwind + Motion effects that made the &quot;fancy&quot; landing look popular. Which pieces carry a page and which turn it into a demo reel. / 可复制粘贴的 React + Tailwind + Motion 特效，带火了「fancy」落地页风格。哪些能撑起页面，哪些会把页面变成特效合集。</description><enclosure url="https://ui.incidental.site/blog/img/aceternity-ui-deep-dive-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Prompt-to-UI tools compared: v0, Lovable, Bolt, Figma Make, Magic Patterns</title><link>https://ui.incidental.site/blog/prompt-to-ui-tools-compared/</link><guid isPermaLink="true">https://ui.incidental.site/blog/prompt-to-ui-tools-compared/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>Not a leaderboard: a decision guide by what you are shipping, where the output lives, and how much design control you need. / 不是排行榜，而是决策指南：按你要交付什么、产出放在哪里、需要多少设计控制来选。</description><enclosure url="https://ui.incidental.site/blog/img/prompt-to-ui-tools-compared-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>MagicOS: Magic Patterns bets on an infinite canvas of AI threads</title><link>https://ui.incidental.site/blog/magic-patterns-magicos/</link><guid isPermaLink="true">https://ui.incidental.site/blog/magic-patterns-magicos/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>Launched 13 Oct 2026: one coordinator chat spawns parallel design threads on a shared canvas. What it fixes (lost context) and when a single design is still better. / 2026-10-13 发布：一个协调者对话在共享画布上派生多个并行设计线程。它解决了什么（上下文丢失），什么时候单个设计仍更合适。</description><enclosure url="https://ui.incidental.site/blog/img/magic-patterns-magicos-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Figma Make and the Figma agent: AI moves onto the canvas</title><link>https://ui.incidental.site/blog/figma-make-and-figma-agent/</link><guid isPermaLink="true">https://ui.incidental.site/blog/figma-make-and-figma-agent/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>Figma Make turns prompts into working prototypes; the Figma agent, generally available since 6 Oct 2026, reads team guideline files. Why the guideline file matters most. / Figma Make 把提示变成可交互原型；Figma 智能体自 2026-10-06 正式可用，能读取团队规范文件。为什么规范文件才是关键。</description><enclosure url="https://ui.incidental.site/blog/img/figma-make-and-figma-agent-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Lovable and Bolt: when prompt-to-UI becomes prompt-to-app</title><link>https://ui.incidental.site/blog/lovable-bolt-prompt-to-app/</link><guid isPermaLink="true">https://ui.incidental.site/blog/lovable-bolt-prompt-to-app/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>Both tools build whole apps, so design quality now competes with data, auth and deploys for attention. How to keep the look from being an afterthought. / 两者都能生成完整应用，于是设计质量要和数据、登录、部署抢注意力。如何不让视觉沦为事后补丁。</description><enclosure url="https://ui.incidental.site/blog/img/lovable-bolt-prompt-to-app-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>v0 in practice: from a prompt to shadcn code you can keep</title><link>https://ui.incidental.site/blog/v0-prompt-to-shadcn/</link><guid isPermaLink="true">https://ui.incidental.site/blog/v0-prompt-to-shadcn/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Tools</category><description>v0 is strongest when you treat it as a shadcn/Tailwind code generator, not a design oracle. Brief it like an engineer, then pull the code into your repo. / v0 最强的用法是把它当 shadcn/Tailwind 代码生成器，而不是设计神谕。像给工程师写需求一样写提示，然后把代码拉进自己的仓库。</description><enclosure url="https://ui.incidental.site/blog/img/v0-prompt-to-shadcn-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Accessibility in AI-generated UI: the checks models skip</title><link>https://ui.incidental.site/blog/accessibility-in-ai-generated-ui/</link><guid isPermaLink="true">https://ui.incidental.site/blog/accessibility-in-ai-generated-ui/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>Generated UIs look fine and fail keyboards and screen readers. Start from accessible primitives, then audit against WCAG 2.2. / 生成的界面看着没问题，键盘和读屏却用不了。先用无障碍底层组件，再按 WCAG 2.2 走查。</description><enclosure url="https://ui.incidental.site/blog/img/accessibility-in-ai-generated-ui-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Dark mode done right: tokens, elevation and contrast</title><link>https://ui.incidental.site/blog/dark-mode-done-right/</link><guid isPermaLink="true">https://ui.incidental.site/blog/dark-mode-done-right/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>Dark mode is a second palette, not an inverted one. Use semantic tokens, lighter surfaces for elevation, and desaturated accents. / 暗色模式是第二套配色，不是反色。用语义 token，用更亮的表面表达层级，强调色要降饱和。</description><enclosure url="https://ui.incidental.site/blog/img/dark-mode-done-right-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Motion that feels right: purpose, duration, easing, restraint</title><link>https://ui.incidental.site/blog/motion-that-feels-right/</link><guid isPermaLink="true">https://ui.incidental.site/blog/motion-that-feels-right/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Craft</category><description>Most UI motion should be under 300ms, ease-out, and skipped for frequent actions. Spectacle belongs on marketing pages, not in tools. / 大多数界面动效应在 300ms 内、用 ease-out，高频操作干脆不做。炫技属于营销页，不属于工具。</description><enclosure url="https://ui.incidental.site/blog/img/motion-that-feels-right-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Component composition: why headless + copy-paste won</title><link>https://ui.incidental.site/blog/component-composition/</link><guid isPermaLink="true">https://ui.incidental.site/blog/component-composition/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Component libraries</category><description>Radix behaviour, your styles, code you own. Compound components keep APIs small and make AI edits safer. / Radix 管行为，样式归你，代码在你仓库里。复合组件让 API 更小，AI 改起来也更安全。</description><enclosure url="https://ui.incidental.site/blog/img/component-composition-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Teaching agents taste: how design skills de-slop AI interfaces</title><link>https://ui.incidental.site/blog/taste-and-skills-for-agents/</link><guid isPermaLink="true">https://ui.incidental.site/blog/taste-and-skills-for-agents/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Agent context</category><description>Skills like frontend-design, taste-skill and impeccable package opinions as files agents load on demand. Here is how to combine them. / frontend-design、taste-skill、impeccable 等 skill 把设计观点打包成文件，Agent 按需加载。这里讲怎么组合。</description><enclosure url="https://ui.incidental.site/blog/img/taste-and-skills-for-agents-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Design-to-code with AI: map to your components, not to pixels</title><link>https://ui.incidental.site/blog/design-to-code-with-ai/</link><guid isPermaLink="true">https://ui.incidental.site/blog/design-to-code-with-ai/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Workflow</category><description>Pixel-perfect export creates throwaway code. Give the agent your component registry and tokens via MCP so output reuses what you already ship. / 像素级导出只会产出一次性代码。通过 MCP 把组件注册表和 token 交给 Agent，让产出复用现有组件。</description><enclosure url="https://ui.incidental.site/blog/img/design-to-code-with-ai-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>Prompting for UI: write specs, not wishes</title><link>https://ui.incidental.site/blog/prompts-for-ui/</link><guid isPermaLink="true">https://ui.incidental.site/blog/prompts-for-ui/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Workflow</category><description>&quot;Modern and clean&quot; means nothing to a model. Name layout, tokens, states, content and what to avoid. / &quot;现代、简洁&quot;对模型毫无信息量。要写清布局、token、状态、真实内容和禁区。</description><enclosure url="https://ui.incidental.site/blog/img/prompts-for-ui-cover.jpg" type="image/jpeg" length="0"/></item>
<item><title>AI-assisted UI design: a workflow that keeps taste in the loop</title><link>https://ui.incidental.site/blog/ai-assisted-ui-design-workflow/</link><guid isPermaLink="true">https://ui.incidental.site/blog/ai-assisted-ui-design-workflow/</guid><pubDate>Wed, 14 Oct 2026 08:00:00 +0000</pubDate><category>Workflow</category><description>Generators are fast but average. Split the job: humans set direction and constraints, AI explores variants, humans curate and polish. / 生成器快但平庸。把活拆开：人定方向和约束，AI 铺变体，人来挑选和打磨。</description><enclosure url="https://ui.incidental.site/blog/img/ai-assisted-ui-design-workflow-cover.jpg" type="image/jpeg" length="0"/></item>
</channel></rss>
