Enhancing AI-assisted UI development: A new extension for precise Slint component targeting分享一个提高 Slint 开发效率的小工具：解决 AI 难以定位 UI 元素的问题

[liuqianjin559-cmyk]

Hi Slint community,

I've been working with Slint for a while, and one challenge I frequently face when using AI coding assistants (like Cursor or GitHub Copilot) is getting the AI to accurately target specific UI elements within deep nesting structures.

To bridge this gap, I’ve created Slint AI, a productivity-focused fork of the official extension.

What it does:

Copy node hierarchy: In the interactive preview, you can now copy the full element path (e.g., MainWindow > VerticalLayout#root > Button#submit) with a single click. This provides the AI with exact context, preventing vague edits.

i18n support: Added support for simplified Chinese in the preview UI.

[Insert your GIF here - Extremely Recommended]

It’s designed to make the workflow between visual UI and AI coding much smoother. If you also use AI tools for your Slint projects, I’d love for you to give it a try!

Marketplace 链接： https://marketplace.visualstudio.com/items?itemName=slint-ai.slint-ai

GitHub 链接： https://github.com/liuqianjin559-cmyk/slint-ai

Feedback and suggestions are more than welcome. Thanks for all the great work on the Slint framework!
大家好！

我在使用 Cursor/Copilot 等 AI 助手开发 Slint 项目时，经常遇到一个痛点：由于 .slint 的层级嵌套较深，AI 很难精准定位到我想要修改的具体组件。

为了解决这个问题，我基于官方插件做了一个增强版本 —— Slint AI。

核心功能：

拷贝节点层级 (Copy node hierarchy)： 在预览模式下，点击元素即可一键复制完整路径（如 MainWindow > VerticalLayout#root > Button#submit）。直接粘贴给 AI，它就能精准锁定目标，不再改错。

多语言支持： 增加了预览界面对中文的支持，使用更友好。
插件市场：https://marketplace.visualstudio.com/items?itemName=slint-ai.slint-ai
GitHub：https://github.com/liuqianjin559-cmyk/slint-ai

[ogoffart]

Thanks for sharing this. The "copy node hierarchy" feature is a nice idea. We want to make it as easy as possible to work with AI, and the next version of Slint comes with a Skill and MCP server included. Having a way to copy a node identifier is actually a feature that would make sense to add in Slint.

There is one thing I'd like to ask, though: the extension is published to the marketplace as "Slint AI" with our Slint logo plus an "AI" badge. When you search for "slint" it shows up right next to the official extensions, and I'm worried some users may think it is an official Slint product. Could you rename it to something clearly distinct and use a logo that isn't directly based on ours? That would clear up the confusion.

Also, a quick question: I could find the source for the VS Code extension, but not for the forked slint-lsp binary that ships with it. Could you publish that source too? It helps people trust and build on the extension (and keeps things in line with our license).

If you'd like, this feature would be very welcome as a contribution to Slint directly. Upstreaming it means it stays maintained, reaches everyone, and fits into the AI integration work we're already doing, rather than drifting on a separate fork. I'd be glad to help you get a pull request started.

Thanks again for the work!

[liuqianjin559-cmyk]

Hi @ogoffart,

Thank you for the quick and thoughtful feedback — and for your willingness to upstream the "copy-node" feature. I'm posting here because I want to be transparent about my goals: I'm not looking to maintain a long-lived fork or compete with official tools, but rather to help ensure Slint becomes a first-class citizen in AI-assisted development workflows.

A bit about my perspective

I come from a product/architecture background rather than a traditional engineering one. The "copy-node" idea emerged from a very real, daily pain point: when building complex UIs, explaining to an LLM exactly which element needs adjustment is surprisingly difficult. I built this extension as a way to prototype and validate this solution; the implementation was assisted by Cursor AI to turn my workflow requirements into code. My goal is to share these "AI-first" interaction concepts with your team and, where they align with Slint's vision, see them properly integrated into the core product.

Regarding your requests

Branding: I have renamed the extension to Node Path Copier for Slint and updated the icon to a distinct design that clearly marks it as a community-driven project, not an official product.

LSP source: The forked slint-lsp source is now fully transparent in the same repository:

• Repo: https://github.com/liuqianjin559-cmyk/slint-ai
• LSP overlay: patches/lsp/overlay/ (based on Slint v1.15.0)
• Build: clone slint-ui/slint at v1.15.0, run pnpm apply:lsp-patches, then pnpm build:lsp-local
• Upstream guide: I've put together a brief document to help your team evaluate the changes: https://github.com/liuqianjin559-cmyk/slint-ai/blob/main/docs/UPSTREAM.md

This covers copy-node hierarchy, clipboard notification, preview UI i18n (en/zh-cn), and a few related bugfixes.

Upstream contribution & collaboration

I would be delighted for Slint to upstream this. I haven't submitted a formal PR myself, as I want to respect your team's internal architecture and standards — I'm much better at identifying pain points and interaction design than I am at managing core codebase PRs.

I license these changes under MIT-0, consistent with Slint's contribution guidelines. Please feel free to port, cherry-pick, or rewrite them for the current master branch.

I have one or two follow-up ideas in the same spirit — focusing on how to make the developer-to-AI feedback loop more intuitive — and I'd be happy to share them if useful after you've had a look at this one. I'm also glad to clarify the interaction design goals or walk through the user workflows anytime.

Thank you again for the great work on Slint and for being so open to community input!

Best regards,
liuqianjin

[bitnom]

I love this project you've done

[liuqianjin559-cmyk]

Thanks, bitnom! I'm glad it resonates with you. My goal was to move away from rigid tool-chain dependencies by sticking to a decoupled, logic-atom principle. It's an experiment in making AI-assisted workflows more robust and predictable. Happy to see others finding it useful!