3 篇文章带有标签 “ui”

面向第一次接触 dsh 的开发者。读完本文你将能：理解 dsh 插件的运行原理、照着完整流程从零写一个 UI 插件、避开主题/背景/测试等高频坑。

全文以正在开发的 Spritely（精灵插件）为贯穿案例。

1. 心智模型：一句话理解 dsh 插件

dsh（DeepSeek Harness）是一个基于 Cordis 依赖注入框架的插件系统。一个"插件"就是一个可复用的功能单元，通过声明自己需要哪些服务、提供哪些能力，被宿主（host）动态加载和组合。

对客户端 UI 插件而言，一句话概括：

你在写一个 React 组件 + 一份状态源 + 一段注册逻辑。宿主负责在合适的时机、合适的位置把它挂载进界面，并通过"注入面"（inject face）把服务递给你。

一个 UI 插件（如右下角的精灵）由三样东西组成：

组成	作用	在 ui-sprite 里对应
组件	画出来的东西	SpriteMascot.tsx（SVG 精灵 + 菜单 + 面板）
状态源	组件读的数据（可观察）	sprite-state.ts / background-source.ts
注册逻辑	告诉宿主"挂哪、需要什么"	client/index.ts 的 apply / inject

2. 工作原理：插件是怎么被加载的

2.1 双端结构（node 端 / client 端）

官网定位一句话：将文字、草图、截图、语音指令，一键生成 Web / 移动端高保真界面、可交互原型与可直接投入开发的前端代码，打通「灵感→设计→开发」完整工作流。 访问入口：stitch.withgoogle.com

🚀 Stitch：从想法到落地

Stitch 提倡“设计先行，边做边改”。告别面对空白页的焦虑，无需追求一步到位，通过不断迭代轻松产出优秀设计。

1. 极简起步：三步提示词公式

写下你的初始想法，无需死磕细节，给一个大概的“配方”即可生成：

• [想法] 是什么 + [主题] 风格氛围 + [内容] 核心板块。

2. 精准迭代：每次只改动一点

生成初稿后，构思才真正开始。

• 小步快跑： 每次锁定一个问题，用具体指令（配合 UI/UX 词汇）让 AI 修改。
• 全局调整： 善用“编辑主题”一键更换深浅模式、颜色和字体。

3. 验证与交付：从静态到上线

• 动效测试： 一键生成交互式“原型”，测试按钮悬停、文本输入等真实体验。
• 多端导出： 导出 HTML 和图片包。HTML 是万能资产，可借助大模型轻松转换为 React、Vue 或手机原生代码（Flutter/SwiftUI 等）。

💡 核心寄语： 别想太多，先生成，再优化。持续构思，直到满意！

• Everything you need to know

欢迎来到 Stitch。今天您将学习如何从设计切入并专注于概念构思。关键在于不要过度思考。