shadcn-sveltekit-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn SvelteKit Design

Shadcn SvelteKit 设计

Use this skill to create polished SvelteKit UI while grounding component decisions in the configured shadcn-svelte MCP instead of memory.

使用本技能可创建精致的SvelteKit UI，同时基于已配置的shadcn-svelte MCP来做组件决策，而非依赖记忆。

Preconditions

前置条件

Expect these MCP tools to be available:

shadcn-svelte-search

shadcn-svelte-get

shadcn-svelte-list

shadcn-svelte-icons

, and

bits-ui-get

If the MCP is missing, say that clearly, help the user configure it, and avoid pretending a component or API exists.
Treat
```
shadcn-svelte-get
```
as the source of truth for any component, block, chart, or docs page you plan to use.
Treat official shadcn-svelte CLI installation as the default path for any library component that exists upstream.

需确保以下MCP工具可用：

shadcn-svelte-search

、

shadcn-svelte-get

、

shadcn-svelte-list

、

shadcn-svelte-icons

和

bits-ui-get

。

若MCP缺失，请明确告知用户，协助用户进行配置，切勿虚构组件或API的存在。
将
```
shadcn-svelte-get
```
视为你计划使用的任何组件、区块、图表或文档页面的事实来源。
对于上游已存在的库组件，默认采用官方shadcn-svelte CLI安装方式。

Workflow

工作流程

Understand the target before designing. Ask for the screen type, audience, content density, brand direction, and whether the work should preserve an existing visual language or introduce a new one.
Discover before composing. If the user describes a feature vaguely, start with
```
references/mcp-workflow.md
```
and use the discovery tools before writing UI code.
Commit to an intentional visual direction. Pick a clear design thesis instead of drifting into generic SaaS UI. Define typography, color logic, spacing, hierarchy, and motion up front.
Map the design to verified primitives. Build the layout from components, blocks, charts, docs, and icons that the MCP confirms are real. If the desired component is not available, say so and propose the closest verified alternative.
Write Svelte-first code. Output valid SvelteKit and Svelte 5 code. Never use React props, JSX patterns, or shadcn/ui React guidance.
Explain the chosen building blocks. Mention which components or docs were verified, especially when the user asks for implementation guidance or installation commands.
Install vendor components instead of reimplementing them. If a verified shadcn-svelte component exists, fetch the official CLI command from the MCP when possible and run it yourself when the task requires editing the project. Fall back to official shadcn-svelte documentation only when the MCP is unavailable. Do not hand-write the upstream component source from scratch. It is fine to write wrappers, compositions, page code, or project-specific variants around installed components.

设计前先明确目标。询问屏幕类型、受众、内容密度、品牌方向，以及当前工作是需要保留现有视觉风格还是引入新风格。
先探索再组合。若用户对功能描述模糊，先查看
```
references/mcp-workflow.md
```
，并在编写UI代码前使用探索工具。
确定明确的视觉方向。选择清晰的设计主题，而非陷入通用SaaS UI的误区。提前定义排版、色彩逻辑、间距、层级和动效。
将设计映射到已验证的基础组件。使用MCP确认存在的组件、区块、图表、文档和图标来构建布局。若所需组件不可用，请告知用户并提出最接近的已验证替代方案。
编写Svelte优先的代码。输出有效的SvelteKit和Svelte 5代码。切勿使用React属性、JSX模式或shadcn/ui React相关指南。
说明所选构建模块。提及已验证的组件或文档，尤其是当用户询问实现指南或安装命令时。
安装第三方组件而非重新实现。若存在已验证的shadcn-svelte组件，尽可能从MCP获取官方CLI命令，并在需要编辑项目时自行执行。仅当MCP不可用时，才参考官方shadcn-svelte文档。切勿从头手写上游组件源码。基于已安装组件编写包装器、组合代码、页面代码或项目特定变体是可行的。

Output Shape

输出结构

For page-level work, structure the response like this:

A short design concept statement.
The verified shadcn-svelte building blocks you are using.
The SvelteKit file plan.
The implementation.

For reusable components, structure the response like this:

The component purpose and states.
The verified primitives or icons it depends on.
The public API or variants.
The implementation.

针对页面级工作，按以下结构组织响应：

简短的设计概念说明。
你将使用的已验证shadcn-svelte构建模块。
SvelteKit文件规划。
实现代码。

针对可复用组件，按以下结构组织响应：

组件用途与状态。
它依赖的已验证基础组件或图标。
公开API或变体。
实现代码。

Guardrails

约束规则

Do not invent component names, CLI commands, or props.
Do not recreate official shadcn-svelte component source by hand when the component can be installed with the CLI.
Prefer retrieving CLI commands from the MCP before using web research.
If you must research the CLI on the web, only trust commands from official shadcn-svelte documentation, not shadcn/ui or other similarly named libraries.
Use
```
shadcn-svelte-icons
```
only for Lucide icons.

Use

bits-ui-get

only when

shadcn-svelte-get

exposes

tooling.bitsUi.exactName

docs.bitsuiName

, and only for lower-level primitive details.

When
```
shadcn-svelte-get
```
and
```
bits-ui-get
```
overlap, prefer
```
shadcn-svelte-get
```
for standard component usage and pass the exact primitive name into
```
bits-ui-get
```
only when you need underlying internals.
Prefer a smaller set of verified components composed well over a wide, unverified grab bag.
Preserve an existing design system when the user is working inside one.
Keep desktop and mobile layouts intentional; do not treat mobile as an afterthought.
If the user did not request a motion library and the project does not already use one, prefer Svelte's built-in
```
transition:
```
,
```
in:
```
,
```
out:
```
, and
```
animate:
```
capabilities.

不得虚构组件名称、CLI命令或属性。
当组件可通过CLI安装时，切勿手动重写官方shadcn-svelte组件源码。
优先从MCP获取CLI命令，而非通过网络搜索。
若必须通过网络搜索CLI命令，仅信任官方shadcn-svelte文档中的命令，而非shadcn/ui或其他同名库。
仅将
```
shadcn-svelte-icons
```
用于Lucide图标。
仅当
```
shadcn-svelte-get
```
暴露
```
tooling.bitsUi.exactName
```
或
```
docs.bitsuiName
```
时，才使用
```
bits-ui-get
```
，且仅用于底层基础组件细节。
当
```
shadcn-svelte-get
```
与
```
bits-ui-get
```
功能重叠时，优先使用
```
shadcn-svelte-get
```
进行标准组件使用，仅在需要底层内部实现时，才将确切的基础组件名称传入
```
bits-ui-get
```
。
优先选择少量已验证组件并进行良好组合，而非大量未验证组件的堆砌。
当用户在现有设计系统内工作时，保留该设计系统。
有意识地设计桌面端和移动端布局；切勿将移动端视为事后补充。
若用户未请求动效库且项目尚未使用动效库，优先使用Svelte内置的
```
transition:
```
、
```
in:
```
、
```
out:
```
和
```
animate:
```
功能。

Design Standards

设计标准

Read

references/ui-rules.md

when the task is about page design, visual refreshes, theming, or reusable UI.

当任务涉及页面设计、视觉刷新、主题设置或可复用UI时，请阅读

references/ui-rules.md

。

MCP Grounding

MCP参考

Read

references/mcp-workflow.md

when you need the exact tool order, install-command rules, or anti-hallucination workflow.

当你需要确切的工具顺序、安装命令规则或防幻觉工作流程时，请阅读

references/mcp-workflow.md

。