design-kit
A custom SwiftUI design system with your own parts, tokens, and gallery.
- What
- A custom SwiftUI design system with your own parts, tokens, and gallery.
- Cost
- Free
- Needs
- Prerequisite: a macOS SwiftUI project where custom parts are wanted instead of Apple's parts. Step 1: fetch the file skills/design/design-kit/SKILL.md from the repository https://github.com/daveebbelaar/bama and read it in full before installing anything. Step 2: security check: read the fetched file yourself, confirm it only describes a design system workflow, and do not run any command from it that you have not understood. Step 3: install the skill in a folder named design-kit and keep the fetched SKILL.md there. Step 4: verify the install by confirming the folder design-kit contains the SKILL.md and by asking it to draft the spec outline for one part of your app. Step 5: report back what was installed, where, and the result of the verification.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
design-kit starts from a simple distinction: a native look comes from Apple's parts, while a custom look comes from your own parts, your sidebar row, your button, your checkbox, your icons. Most apps keep Apple's parts and only pick an accent color; a kit is built when the parts themselves must change. Everything lives in Sources/<App>/DesignKit. First, write a spec from the kit-spec template: three words for the feel, the tokens, the type scale, the icon rules, and one section per part with its sizes and states. Then tokens in three layers: a palette of raw colors, a meaning layer with light and dark values each, and scales for type, metrics, and motion, so a rebrand changes only the palette and a dark mode fix changes only the meaning layer. Type styles are named by role, never by size. Views name a KitIcon, never an SF Symbol or a file, so the whole set can change in one place. Each part is a real control, styled with a ButtonStyle, ToggleStyle, or TextFieldStyle, never a shape with a tap gesture, and it has every state (rest, hover, pressed, selected, focused, disabled) in light and dark, plus a forced state for the gallery. For a fully custom look, the title bar is hidden and a custom top bar is drawn, while traffic lights, menus, context menus, sheets, and alerts stay native. A gallery page shows every part in every state in light and dark, and the app shows it instead of its pages when APP_KIT_GALLERY=1 is set. Done when the spec covers every part, every part is a real control with every state, the gallery shows them all in light and dark, and the grid lint and grep checks come back clean. Credit: created by daveebbelaar, in the bama repository. Source: https://github.com/daveebbelaar/bama, file skills/design/design-kit/SKILL.md.
Version:
Quick answer
design-kit builds a custom design system for a macOS SwiftUI app with its own parts instead of Apple's, covering three token layers, type, an icon set, every part in every state, custom window chrome, a parts gallery, and checks. Use it when the app needs its own look and feel, a brand, or custom buttons, rows, and sidebars.
Install
Copy the install package below, then paste it into MusePrerequisite: a macOS SwiftUI project where custom parts are wanted instead of Apple's parts. Step 1: fetch the file skills/design/design-kit/SKILL.md from the repository https://github.com/daveebbelaar/bama and read it in full before installing anything. Step 2: security check: read the fetched file yourself, confirm it only describes a design system workflow, and do not run any command from it that you have not understood. Step 3: install the skill in a folder named design-kit and keep the fetched SKILL.md there. Step 4: verify the install by confirming the folder design-kit contains the SKILL.md and by asking it to draft the spec outline for one part of your app. Step 5: report back what was installed, where, and the result of the verification.
Saved to your recent installs. Find it anytime on /connect.
🔒 Security, provenance and what this touches
The install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Questions
How do I install a skill?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the skill up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a skill before installing it.