design
starsforks
How to install design?
rune-kit/rune/design
$npx -y skills add Rune-kit/rune --skill designDesign system reasoning. Maps product domain to style, palette, typography, and platform-specific patterns. Generates .rune/design-system.md as the shared design contract for all UI-generating skills.
SKILL.md
| 1 | # design |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | Design system reasoning layer. Converts a product description into a concrete design system — style, color direction, typography pairing, platform conventions, and an explicit anti-pattern list for this domain. Writes `.rune/design-system.md` as the persistent design contract that all UI-generating skills read before producing code. Prevents AI-generated UI from defaulting to generic patterns ("purple accent, card grids, centered everything") that signal "not designed by a human." |
| 6 | |
| 7 | ## Triggers |
| 8 | |
| 9 | - `/rune design` — manual invocation when starting a new UI project |
| 10 | - Called by `cook` (L1): frontend task detected, no `.rune/design-system.md` exists |
| 11 | - Called by `review` (L2): AI anti-pattern detected — recommended to run design skill |
| 12 | - Called by `perf` (L2): Lighthouse Accessibility BLOCK — design foundation may be missing |
| 13 | |
| 14 | ## Calls (outbound) |
| 15 | |
| 16 | - `scout` (L2): detect existing design tokens, component library, platform targets |
| 17 | - `asset-creator` (L3): generate base visual assets (logo, OG image) from design system |
| 18 | - `browser-pilot` (L3): render the surface and inspect it before claiming any visual property holds (Step 5.4) |
| 19 | - `review` (L2): accessibility violations found → flag for fix in next code review |
| 20 | |
| 21 | ## Called By (inbound) |
| 22 | |
| 23 | - `cook` (L1): before any frontend code generation |
| 24 | - `scaffold` (L1): design system for new project |
| 25 | - `brainstorm` (L2): when selected approach has UI/UX implications |
| 26 | - `ba` (L2): when requirements include UI/UX components |
| 27 | - `review` (L2): when AI anti-pattern detected in diff |
| 28 | - `perf` (L2): when Lighthouse Accessibility score blocks |
| 29 | - User: `/rune design` direct invocation |
| 30 | |
| 31 | ## Output Files |
| 32 | |
| 33 | ``` |
| 34 | .rune/ |
| 35 | └── design-system.md # Design contract for all UI-generating skills |
| 36 | ``` |
| 37 | |
| 38 | ## Executable Steps |
| 39 | |
| 40 | ### Step 0 — Load Design Reference |
| 41 | |
| 42 | Load the design knowledge base before reasoning: |
| 43 | |
| 44 | 1. Check for user-level override: `~/.claude/docs/design-dna.md` |
| 45 | - If exists → `Read` it. This is the primary reference (user's curated taste). |
| 46 | 2. If no user override → `Read` the baseline: `skills/design/DESIGN-REFERENCE.md` (shipped with Rune) |
| 47 | 3. The loaded reference provides: font pairings, chart selection, component architecture, color principles, UX checklist, interaction patterns, anti-pattern signatures |
| 48 | 4. Apply reference knowledge throughout Steps 3-5 (domain reasoning, token generation, checklist) |
| 49 | 5. **When the domain involves any UI motion** (transitions, animations, gestures, springs, micro-interactions) → also `Read` `skills/design/MOTION-CRAFT.md`. It is the canonical motion authority: the should-it-animate frequency gate, easing/duration budgets, physicality (never `scale(0)`, origin-aware popovers), spring physics, gesture handoff, motion performance, reduced-motion, and a reverse-lookup vocabulary. Cite its exact values in the design-system motion section; never approximate curves or durations. **When MOTION-CRAFT.md and DESIGN-REFERENCE.md disagree on a motion detail (easing, duration, interaction timing), MOTION-CRAFT.md wins** — it is the deeper, motion-specific source; DESIGN-REFERENCE.md's Animation Timing / Interaction Patterns tables are the general baseline. |
| 50 | |
| 51 | > **Advisory motion-audit mode**: When asked to "improve the animations" / "make this feel better" / "what could be animated here", operate read-only — survey the motion surface against MOTION-CRAFT.md, report frequency-gated findings (and deliberately rejected candidates), and hand precise recipes to `cook`/`fix`. Suggesting motion everywhere is worse than useless; expect to reject most candidates. |
| 52 | |
| 53 | > **Why two layers**: The baseline ships "good enough" universal design knowledge. Users who care about aesthetics create their own `design-dna.md` with curated palettes, font pairings, and style preferences. The design skill works well with either — it just works _better_ with a curated reference. |
| 54 | |
| 55 | ### External Data Source |
| 56 | |
| 57 | Design intelligence data from [UI/UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) (MIT, 42.8k★). |
| 58 | Located at `references/ui-pro-max-data/` — 161 palettes, 84 styles, 73 font pairings, 161 reasoning rules, 99 UX guidelines. |
| 59 | |
| 60 | When `references/ui-pro-max-data/` is available: |
| 61 | - Step 2: query `styles.csv` for domain-matched visual styles (expands from 10 → 84) |
| 62 | - Step 3: query `ui-reasoning.csv` for industry-specific design rules (161 rules) |
| 63 | - Step 3: query `colors.csv` for palette alternatives (expands from 10 → 161) |
| 64 | - Step 6 (Anti-AI): cross-check proposed style against reasoning DB — if flagged as "AI-generic", suggest 3 alternatives |
| 65 | |
| 66 | ### Step 1 — Discover |
| 67 | |
| 68 | Invoke `scout` to detect: |
| 69 | - **Platform target**: `web` |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
