UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。
Install Trailsnap UI Design
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install LC044/TrailSnap trailsnap-ui-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .claude/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .claude/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install LC044/TrailSnap trailsnap-ui-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .agents/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .agents/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install LC044/TrailSnap trailsnap-ui-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .cursor/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .cursor/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/LC044/TrailSnap.git --path .agents/skills/trailsnap-ui-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install LC044/TrailSnap trailsnap-ui-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .gemini/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .gemini/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install LC044/TrailSnap trailsnap-ui-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .github/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .github/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install LC044/TrailSnap trailsnap-ui-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LC044/TrailSnap.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/trailsnap-ui-design .opencode/skills/trailsnap-ui-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "trailsnap-ui-design" agent skill from https://github.com/LC044/TrailSnap/tree/master/.agents/skills/trailsnap-ui-design into .opencode/skills/trailsnap-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "trailsnap-ui-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
trailsnap-ui-design- GitHub stars
- 779
- Token cost
- ~518 tokens
- SKILL.md length
- 101 words
- Files
- 4 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。
- Works in 5 steps: 选取一个相近页面作为布局参考，确认共享组件的实际 props、slots 和… → 用 token… → 检查明暗两种模式和不同主题色；按改动覆盖窄屏、桌面、弹层滚动与必要的软键盘/安全区… → …
- Tasks that involve UI design
- SKILL.md covers 先确认现有实现, 核心约束 and 实施与验收
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Trailsnap UI Design is an agent skill from LC044/TrailSnap. 基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。
Its SKILL.md is about 520 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `agents/openai.yaml`, `references/design-system.md` and `references/page-patterns.md`).
It sits in Frontend & Design, covering UI design. It works with Vue.js. The repository describes itself as: TrailSnap (行影集) | AI-Powered open-source photo album for travel & life memories.（AI赋能的开源相册工具，珍藏旅行与生活点滴）. The licence is AGPL-3.0.
When your agent uses it
- Tasks that involve UI design
Example prompts
- “/trailsnap-ui-design”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 选取一个相近页面作为布局参考，确认共享组件的实际 props、slots 和 exports 后再使用；不存在的组件或属性不能靠名称猜测。
- 用 token 与共享组件搭建布局，补齐加载、空数据、错误重试、提交中和禁用等与该功能相关的状态。照片标题、数量和地点服从内容层级，长文本不挤走操作按钮。
- 检查明暗两种模式和不同主题色；按改动覆盖窄屏、桌面、弹层滚动与必要的软键盘/安全区行为。具体检查见页面模式参考。
- 涉及行为改动时，按 tests/README.md 选择相关现有测试，通过 tests/scripts/run-tests.ps1 执行；配置来自 tests/.env.test。只有 Skill 文档变更时验证 Skill 与引用，不启动应用测试。
- 有可用本地环境与浏览器工具时，进行截图或交互检查；需要 Playwright CLI 时遵循可用的 playwright 技能。开发环境账号为 trailsnap / trailsnap，登录失败向用户询问，不创建账号。未实际运行或截图验收时如实说明。
What it can do on your machine
Read from SKILL.md and the folder at commit 69e54f1. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Trailsnap UI Design loads about 518 tokens when it runs, and up to ~3.9k if it reads all its reference files. Until then it costs about 29 tokens; SKILL.md has 101 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:33
ts/scripts/run-tests.ps1` 执行；配置来自 `tests/.env.test`。只有 Skill 文档变更时验证 Skill 与引用，不启动应用测试。
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from LC044/TrailSnap at commit 69e54f1, republished under its AGPL-3.0 licence (© LC044). 101 words, ~518 tokens.
Download SKILL.mdSave it as
.claude/skills/trailsnap-ui-design/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- trailsnap-ui-design
- description
- 基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。
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。
实施与验收
- 选取一个相近页面作为布局参考，确认共享组件的实际 props、slots 和 exports 后再使用；不存在的组件或属性不能靠名称猜测。
- 用 token 与共享组件搭建布局，补齐加载、空数据、错误重试、提交中和禁用等与该功能相关的状态。照片标题、数量和地点服从内容层级，长文本不挤走操作按钮。
- 检查明暗两种模式和不同主题色；按改动覆盖窄屏、桌面、弹层滚动与必要的软键盘/安全区行为。具体检查见页面模式参考。
- 涉及行为改动时，按
tests/README.md选择相关现有测试，通过tests/scripts/run-tests.ps1执行；配置来自tests/.env.test。只有 Skill 文档变更时验证 Skill 与引用，不启动应用测试。 - 有可用本地环境与浏览器工具时，进行截图或交互检查；需要 Playwright CLI 时遵循可用的 playwright 技能。开发环境账号为
trailsnap/trailsnap，登录失败向用户询问，不创建账号。未实际运行或截图验收时如实说明。
交付说明修改结果、复用的设计基础、实际检查及剩余限制。用户只要设计方案时提供可落地的页面/组件方案；用户要求实现时完成代码和适当验证。
© LC044, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (references) in .agents/skills/trailsnap-ui-design of LC044/TrailSnap.
- SKILL.md
- agents/openai.yaml
- references/design-system.md
- references/page-patterns.md
Open the folder on GitHubat commit 69e54f1
Compare with similar skills
Trailsnap UI Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Trailsnap UI Design this skillLC044/TrailSnap | 779 | — | ~518 | Automated safety check: Notes | AGPL-3.0 | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsundial-org/awesome-openclaw-skills | 663 | 2 repos | ~657 | Automated safety check: Pass | None | |
| GlideSrivarsanK/Glide | 120 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 26 repos | ~3.6k | Automated safety check: Notes | MIT | |
| UI UX Pro Maxshobcoder/shob | 576 | — | ~3.7k | Automated safety check: Pass | MIT |
Similar skills
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
Glide
SrivarsanK/Glide
Authoritative guide and toolset for AI agents to operate, configure, and visually design applications using Glide (@srivarsank/glide).
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
Distinctive Frontend Design Builder
irahardianto/awesome-agv
Commits to one bold aesthetic direction, sets up a CSS token system for it, then builds the interface in Vue or plain HTML using those tokens.
More from LC044/TrailSnap
All 11 skills in this repoTrailsnap CLI
LC044/TrailSnap
Query photos, albums, locations, tags, and people from a TrailSnap instance through its command-line client.
Release Publisher
LC044/TrailSnap
发布并验收 TrailSnap 新版本：汇总提交、同步全项目版本号、更新官网日志与客户端更新清单、执行发布前测试、创建 GitHub Release、监控标签 CI、核验 Release 附件，并生成小红书和公众号文案。Use when the user asks to 发布新版本、发版、创建或检查 GitHub Release、总结版本变更、监控发布 CI、检查发布产物，或撰写版本更新帖子。
Trailsnap Commit
LC044/TrailSnap
TrailSnap 仓库提交、推送、需求平台与 PR 工作流规则。Use when preparing commits, pushing branches, managing the corresponding platform requirement, creating or merging pull requests, or monitoring PR CI in this…
Trailsnap Agent
LC044/TrailSnap
Query a user's TrailSnap photo library through scoped MCP tools to find photos, reconstruct memories, build person timelines, create evidence-backed narratives, or propose an album plan for explicit…
Album Doctor
LC044/TrailSnap
对照片库或指定相册进行体检，并把结构、时间、地点、AI 元数据与安全清理问题转成可选择、可确认、尽量可撤销的计划. An agent skill from LC044/TrailSnap.
Memory Detective
LC044/TrailSnap
根据模糊的时间、地点、同行人、画面和文字线索找回可能的照片事件，并在用户确认后生成可追溯的回忆故事. An agent skill from LC044/TrailSnap.
Related
Works with
Categories
Questions about Trailsnap UI Design
What does Trailsnap UI Design do?
基于 TrailSnap（行影集）现有设计系统设计、实现和审查前端 UI。适用于 package/website 的新页面、组件、布局、主题、移动端适配与界面改版；纯后端任务和其他项目不适用。. Trailsnap UI Design is an agent skill from LC044/TrailSnap.
When should I use Trailsnap UI Design?
Trailsnap UI Design fits situations like: tasks that involve UI design.
How do I install Trailsnap UI Design in Claude Code?
Run `npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a claude-code`. Or copy the skill folder (.agents/skills/trailsnap-ui-design in LC044/TrailSnap) into .claude/skills/trailsnap-ui-design in your project. Claude Code loads it when a task matches its description.
How do I install Trailsnap UI Design in Codex?
Run `npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a codex`. Or copy the skill folder (.agents/skills/trailsnap-ui-design in LC044/TrailSnap) into .agents/skills/trailsnap-ui-design in your project. Codex loads it when a task matches its description.
Can I use Trailsnap UI Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LC044/TrailSnap --skill trailsnap-ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/trailsnap-ui-design, .gemini/skills/trailsnap-ui-design, .github/skills/trailsnap-ui-design and .opencode/skills/trailsnap-ui-design in your project.
What does Trailsnap UI Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Trailsnap UI Design is instructions for the agent only.
Does Trailsnap UI Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Trailsnap UI Design safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Trailsnap UI Design use?
Trailsnap UI Design is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Trailsnap UI Design use?
About 518 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.3k tokens, read only when the agent opens those files.
What are the alternatives to Trailsnap UI Design?
Skills that share tags, products or a category with Trailsnap UI Design: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars), Glide (SrivarsanK/Glide, 120 stars) and UI UX Pro Max (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Trailsnap UI Design?
LC044 (a GitHub user) maintains it in LC044/TrailSnap, which has 779 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 11, 2026.
Source: LC044/TrailSnap on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.