TypingMindTypingMindThe best frontend for AI
Trailsnap Ui Design logo

Trailsnap Ui Design

Community
LC044
trailsnap-ui-design

基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。

Overview

PublisherLC044
RepositoryTrailSnap
Skill nametrailsnap-ui-design
Stars
782
Forks
96
Bundled files
3
LicenseAGPL-3.0
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 3 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by LC044 on GitHub. Read the source before you install it.

Installation

Install the Trailsnap Ui Design AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/LC044/TrailSnap.git /tmp/TrailSnap
mkdir -p .claude/skills
cp -r /tmp/TrailSnap/.agents/skills/trailsnap-ui-design .claude/skills/trailsnap-ui-design
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Trailsnap Ui Design in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Trailsnap Ui Design on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Trailsnap Ui Design is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

TrailSnap UI 设计

让新增界面自然融入行影集：以照片与回忆为内容中心，中性底色、清晰标题层级、圆角实体内容面板，配合克制的玻璃导航和工具栏。用户明确指定新的视觉方向时按其要求设计，同时保留主题、交互和平台约束。

先确认现有实现

  • 在当前工作区定位 TrailSnap 根目录，读取适用的 AGENTS.md。以下源码路径均相对于根目录，不依赖固定盘符。
  • 修改前阅读 package/website/src/style.css、package/website/src/styles/ui.css 与最接近目标页面的现有组件。以当前源码为准；参考文档中的数值是扫描快照。
  • 设计主题或通用控件时读 设计基础与组件；设计具体页面、媒体浏览或跨端交互时读 页面模式与验收。按任务读取，不全量加载所有页面。
  • 先确定用户主要操作、信息层级、布局归属和内容宽度，再实现界面。只改善当前需求相关范围；扫描到旧样式不等于需要顺带改版。

核心约束

  • Vue 使用 <script setup lang="ts">；状态管理使用 Pinia，HTTP 通过 package/website/src/api/*。沿用 Vue Router、Tailwind CSS 3、Element Plus 与现有组件。
  • 优先复用 package/website/src/components/ui/ 的页面、卡片、按钮和弹层组件。照片浏览优先接入 UnifiedPhotoPage 与现有画廊，避免重复实现虚拟布局、筛选和批量选择。
  • 中性色使用 --ts-color-* 或共享语义类；主题强调色使用 primary-*、--theme-primary 和 --theme-rgb。不要把默认天空蓝写死为品牌色。
  • 每个 text-gray-*、bg-white 及其变体配套相应的 dark: 样式；优先用自动适配明暗的语义 token。Element Plus 继承全局明暗配置，不在实例内覆盖内部颜色。
  • 子组件通过 injectTheme() 使用根组件提供的主题；不要重复 provideTheme() 或创建独立主题状态。图表、Canvas 和动态颜色读取 currentTheme.value.primary / .rgb，随主题变化更新；明暗相关图表也响应 isDarkMode。
  • 玻璃材质用于导航、浮动工具栏、菜单、弹层和照片日期标签；照片本体、普通内容卡片、表单阅读区域保持清晰实体表面。直接复用玻璃类，不叠加多道高光边框或大片模糊装饰。
  • 桌面侧栏与移动底栏由布局负责。遵守已有滚动容器和安全区归属，避免新增页面再次补齐同一段顶部或底部空间。
  • 图标优先使用所在模块已有的 lucide-vue-next，保持同组尺寸一致。图标按钮有可理解的 aria-label；展开和选择状态提供相应 ARIA 属性。交互卡片支持键盘，触屏操作不只依赖 hover。

实施与验收

  1. 选取一个相近页面作为布局参考，确认共享组件的实际 props、slots 和 exports 后再使用；不存在的组件或属性不能靠名称猜测。
  2. 用 token 与共享组件搭建布局，补齐加载、空数据、错误重试、提交中和禁用等与该功能相关的状态。照片标题、数量和地点服从内容层级，长文本不挤走操作按钮。
  3. 检查明暗两种模式和不同主题色；按改动覆盖窄屏、桌面、弹层滚动与必要的软键盘/安全区行为。具体检查见页面模式参考。
  4. 涉及行为改动时，按 tests/README.md 选择相关现有测试，通过 tests/scripts/run-tests.ps1 执行；配置来自 tests/.env.test。只有 Skill 文档变更时验证 Skill 与引用，不启动应用测试。
  5. 有可用本地环境与浏览器工具时，进行截图或交互检查；需要 Playwright CLI 时遵循可用的 playwright 技能。开发环境账号为 trailsnap / trailsnap，登录失败向用户询问，不创建账号。未实际运行或截图验收时如实说明。

交付说明修改结果、复用的设计基础、实际检查及剩余限制。用户只要设计方案时提供可落地的页面/组件方案；用户要求实现时完成代码和适当验证。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Trailsnap Ui Design AI skill do?

基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。

Why use Trailsnap Ui Design on TypingMind?

Because you install it once and use it with any model. Trailsnap Ui Design is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Trailsnap Ui Design in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Trailsnap Ui Design?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Trailsnap Ui Design?

As many as you like. As long as a model supports skills, you can use Trailsnap Ui Design with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Trailsnap Ui Design AI skill free?

Yes. It is published on GitHub by LC044 under the AGPL-3.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
anthropics logo

Brand Guidelines

anthropics
OrganizationPopular

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…

21.8K
184K
Instructions
View
openclaw logo

Solid

openclaw
OrganizationPopular

Write, port, review, or test Solid 2 UI in OpenClaw (Control UI, plugin views, Canvas hosts), including state ownership, Lit interop during the migration, native overlays, testing, performance, and…

82.4K
391.7K
9 files
View
openclaw logo

Canvas

openclaw
OrganizationPopular

Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.

82.2K
391K
Instructions
View
openclaw logo

Diagram Maker

openclaw
OrganizationPopular

Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

82.2K
391K
2 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇