Popular Web Designs
yc-software/qm
54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
Install Space Brand UI Design
$ npx skills add SpaceZephyr/design-buddy --skill space-brand-ui-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SpaceZephyr/design-buddy space-brand-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/SpaceZephyr/design-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/space-brand-ui-design .claude/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .claude/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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/SpaceZephyr/design-buddy/tree/main/space-brand-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 SpaceZephyr/design-buddy --skill space-brand-ui-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SpaceZephyr/design-buddy space-brand-ui-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .agents/skills && cp -r skills-src/space-brand-ui-design .agents/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .agents/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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 SpaceZephyr/design-buddy --skill space-brand-ui-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SpaceZephyr/design-buddy space-brand-ui-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/space-brand-ui-design .cursor/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .cursor/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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/SpaceZephyr/design-buddy.git --path space-brand-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 SpaceZephyr/design-buddy --skill space-brand-ui-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SpaceZephyr/design-buddy space-brand-ui-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/space-brand-ui-design .gemini/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .gemini/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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 SpaceZephyr/design-buddy space-brand-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 SpaceZephyr/design-buddy --skill space-brand-ui-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .github/skills && cp -r skills-src/space-brand-ui-design .github/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .github/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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 SpaceZephyr/design-buddy --skill space-brand-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 SpaceZephyr/design-buddy space-brand-ui-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/space-brand-ui-design .opencode/skills/space-brand-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 "space-brand-ui-design" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-brand-ui-design into .opencode/skills/space-brand-ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-brand-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
space-brand-ui-design- GitHub stars
- 176
- Token cost
- ~1.1k tokens
- SKILL.md length
- 287 words
- Files
- 2
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- None found
At a glance
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
- Works in 4 steps: ：识别品牌 → ：获取 DESIGN.md → ：解析设计规范 → …
- Tasks that involve UI design
- SKILL.md covers 品牌 Slug 注册表, 操作步骤, 混搭风格指南 and 输出格式, plus 2 more sections
- Calls npx, stripe and claude
What it does
Space Brand UI Design is an agent skill from SpaceZephyr/design-buddy. 根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `README.md`).
It sits in Frontend & Design, covering UI design. It works with Notion, Stripe and Mistral AI. The repository describes itself as: Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images.
When your agent uses it
- Tasks that involve UI design
Example prompts
- “做成XX的感觉”
- “参考XX设计”
- “/space-brand-ui-design”
Requirements
- Node.js
Workflow steps
4 steps, taken from the step headings in SKILL.md.
- ：识别品牌
- ：获取 DESIGN.md
- ：解析设计规范
- ：生成 UI
What it can do on your machine
Read from SKILL.md and the folder at commit f1d835f. 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
Shell commands in SKILL.md call:
npxstripeclaudecursorvercelsupabaseshopify
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
getdesign.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
Space Brand UI Design loads about 1.1k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 287 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 passed
The automated check found no risky patterns in SKILL.md.
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
Without a licence we can't republish the file, so here is its outline and opening line. It has 287 words (~1,050 tokens).
- name
- space-brand-ui-design
Files
SKILL.md and 1 other file in space-brand-ui-design of SpaceZephyr/design-buddy.
- SKILL.md
- README.md
Open the folder on GitHubat commit f1d835f
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in SpaceZephyr/design-buddy, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Space Brand 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 |
|---|---|---|---|---|---|---|
| Space Brand UI Design this skillSpaceZephyr/design-buddy | 176 | — | ~1.1k | Automated safety check: Pass | None | |
| Popular Web Designsyc-software/qm | 15k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Popular Web DesignsTommy-yw/RunbookHermes | 546 | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Brand Logosusenotra/notra | 256 | — | ~2.1k | Automated safety check: Pass | AGPL-3.0 | |
| Design LibraryOwl-Listener/designpowers | 251 | — | ~2.1k | Automated safety check: Pass | MIT | |
| SkilluiCraftOS-dev/CraftBot | 392 | — | ~1.2k | Automated safety check: Pass | MIT |
Similar skills
Popular Web Designs
Tommy-yw/RunbookHermes
54 production-quality design systems extracted from real websites.
Brand Logos
usenotra/notra
Fetch official brand/product/tool logos (Stripe, GitHub, Notion, AWS, Figma, etc.) as clean SVGs from SVGL (svgl.app) — as saved .svg files, inline markup, or installed React components.
Design Library
Owl-Listener/designpowers
A skill your agent uses when the user wants to start from a known brand's design language — "use the same design language as Stripe", "make it feel like Linear", "start from Notion's DESIGN.md"…
Skillui
CraftOS-dev/CraftBot
Reverse-engineer any website's, repo's, or local project's design system into a Claude-ready skill via the SkillUI CLI.
Awesome Design Md
infometa/workbuddyskills
Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.).
More from SpaceZephyr/design-buddy
All 16 skills in this repoSlide Deck Image Generator
SpaceZephyr/design-buddy
Turns written content into designed slide images from an outline, merges them into PPTX or PDF, and can borrow styles from a registry of brand design systems.
WeChat Article Layout
SpaceZephyr/design-buddy
Turns an article into WeChat Official Account HTML with a local preview, a choice of three visual styles and a button that copies the rich HTML.
Article Illustration Batch Generator
SpaceZephyr/design-buddy
Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.
AI Chart Image Generator
SpaceZephyr/design-buddy
Generates a finished chart image directly with GPT-image-2 from a text description, across ten chart types such as flowcharts, architecture diagrams and SWOT grids in six visual styles.
Batch Image Skill Builder
SpaceZephyr/design-buddy
Walks a non-coder through structured questions about scene, style, color, text rules and consistency, then auto-generates a complete, ready-to-use batch image-generation skill.
Space Image Studio
SpaceZephyr/design-buddy
Generates PNG images for four common needs: Xiaohongshu covers, slide illustrations, charts and article logic diagrams, with twelve visual styles and automatic style suggestions.
Related
Works with
Categories
Questions about Space Brand UI Design
What does Space Brand UI Design do?
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。. Space Brand UI Design is an agent skill from SpaceZephyr/design-buddy.
When should I use Space Brand UI Design?
Space Brand UI Design fits situations like: tasks that involve UI design.
How do I install Space Brand UI Design in Claude Code?
Run `npx skills add SpaceZephyr/design-buddy --skill space-brand-ui-design -a claude-code`. Or copy the skill folder (space-brand-ui-design in SpaceZephyr/design-buddy) into .claude/skills/space-brand-ui-design in your project. Claude Code loads it when a task matches its description.
How do I install Space Brand UI Design in Codex?
Run `npx skills add SpaceZephyr/design-buddy --skill space-brand-ui-design -a codex`. Or copy the skill folder (space-brand-ui-design in SpaceZephyr/design-buddy) into .agents/skills/space-brand-ui-design in your project. Codex loads it when a task matches its description.
Can I use Space Brand 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 SpaceZephyr/design-buddy --skill space-brand-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/space-brand-ui-design, .gemini/skills/space-brand-ui-design, .github/skills/space-brand-ui-design and .opencode/skills/space-brand-ui-design in your project.
What does Space Brand UI Design need to run?
Going by SKILL.md and its folder, Space Brand UI Design needs the command-line tools its instructions call (npx, stripe, claude, cursor, vercel and supabase). Our summary lists: Node.js.
Does Space Brand UI Design access the network?
SKILL.md names 1 domain. As links in the text: getdesign.md. This is read from the text; nothing was executed.
Is Space Brand UI Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Space Brand UI Design use?
No licence was found for Space Brand UI Design or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Space Brand UI Design use?
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Space Brand UI Design?
Skills that share tags, products or a category with Space Brand UI Design: Popular Web Designs (yc-software/qm, 15k stars), Popular Web Designs (Tommy-yw/RunbookHermes, 546 stars), Brand Logos (usenotra/notra, 256 stars) and Design Library (Owl-Listener/designpowers, 251 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Space Brand UI Design?
SpaceZephyr (a GitHub user) maintains it in SpaceZephyr/design-buddy, which has 176 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on July 6, 2026.
Source: SpaceZephyr/design-buddy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.