菜单
Design intelligence for UI/UX — injected into the frontend-planner agent. Provides BM25-searchable database of 67 styles, 161 color palettes, 57 font pairings, 160 animated component patterns, 161 industry rules, plus framework-agnostic design guidelines. Not invoked directly.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Grep-based reverse dependency analysis — injected into planner, reviewer, and deep-review agents. Computes which files are affected by changes to a set of seed files. Not invoked directly.
This skill should be used when the user asks to "brainstorm", "refine an idea", "flesh out a feature", "define requirements". Guides interactive refinement of rough ideas into concise, actionable feature specifications. Focuses on the "what" and architecture — never the "how".
This is the default skill for all development work. It orchestrates the entire development lifecycle from idea to merge-ready code, coordinating multiple agents for brainstorming, planning, implementation, review, documentation, and final approval. Use this for any development task that is non-trivial and could benefit from structured planning, parallel execution, and rigorous review or require more than 3 lines of code changed.
Retrieves authoritative, up-to-date technical documentation, API references, configuration details, and code examples for any developer technology. Use this skill whenever answering technical questions or writing code that interacts with external technologies. This includes libraries, frameworks, programming languages, SDKs, APIs, CLI tools, cloud services, infrastructure tools, and developer platforms. Common scenarios: - looking up API endpoints, classes, functions, or method parameters - checking configuration options or CLI commands - answering "how do I" technical questions - generating code that uses a specific library or service - debugging issues related to frameworks, SDKs, or APIs - retrieving setup instructions, examples, or migration guides - verifying version-specific behavior or breaking changes Prefer this skill whenever documentation accuracy matters or when model knowledge may be outdated.
Implement tasks using TDD. Accepts a plan or specific task description. Runs implementer agents in parallel where possible.
Domain logic for TDD methodology — injected into agents that implement code using test-driven development. Not invoked directly.
| name | kb-design |
| description | Design intelligence for UI/UX — injected into the frontend-planner agent. Provides BM25-searchable database of 67 styles, 161 color palettes, 57 font pairings, 160 animated component patterns, 161 industry rules, plus framework-agnostic design guidelines. Not invoked directly. |
| user-invocable | false |
| disable-model-invocation | true |
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Framework-agnostic — covers web, mobile, and desktop platforms.
Before writing any code, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Then implement working code that is:
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Choose fonts that are beautiful, unique, and interesting. NEVER default to generic fonts like Arial, Inter, Roboto, or system fonts. Pair a distinctive display font with a refined body font. Every project should use different type choices — never converge on the same fonts across designs.
How to pick: Match the typeface personality to the aesthetic direction. A luxury UI needs an elegant serif, a brutalist UI needs raw aggressive type, a retro UI needs angular or monospace display fonts. Browse Google Fonts by category (Serif, Display, Handwriting) — the interesting ones are rarely on the first page of popularity.
Commit to a cohesive aesthetic. Use CSS variables (or platform equivalent) for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
NEVER use cliched color schemes, particularly purple gradients on white backgrounds. Vary between light and dark themes across designs. No two designs should look the same.
Create memorable, interactive experiences through animated components. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
Animation Component Categories (search --domain animation for implementation details):
Library Selection (pick ONE motion library per project):
Implementation Rules:
transform and opacity — never width, height, top, leftprefers-reduced-motion — provide static or instant fallback for every animationpointer: coarse)will-change sparingly; contain: layout paint on animated elementsUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic:
Before starting UI work, detect the project's platform and framework:
package.json for web frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt)pubspec.yaml for Flutterbuild.gradle/pom.xml for JavaFX or Android.xcodeproj/Package.swift for iOS/macOS (SwiftUI/UIKit)Cargo.toml + tauri.conf.json for Taurielectron-builder or electron-forge config for ElectronIf a .claude/devline.local.md file exists, check for frontend_framework override.
Use the find-docs skill (npx ctx7@latest) to look up current documentation for the detected framework.
Accessibility is non-negotiable — beautiful AND accessible:
button, nav, main, header, not div for everything)UserProfile, NavigationBar)onClick, onSubmit, onValueChanged)references/design-rules.md — Priority-ordered design rules (200+ rules across 10 categories: accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) with pre-delivery checklistreferences/aesthetics-guide.md — Detailed aesthetic philosophy, examples, and anti-patternsreferences/animation-components.md — Comprehensive animated component guide: library selection, implementation patterns (text, scroll, cursor, background, physics, SVG, transitions), performance budgets, accessibility requirementsreferences/token-architecture.md — Three-layer token system (primitive → semantic → component)references/primitive-tokens.md — Raw values: colors, sizes, spacing, radii, shadowsreferences/semantic-tokens.md — Purpose-based aliases: primary, secondary, error, surfacereferences/component-tokens.md — Component-specific tokens: button, input, card, etc.references/component-specs.md — Component specification patterns and anatomyreferences/states-and-variants.md — Interactive states (hover, pressed, disabled, focus) and variant systemsreferences/tailwind-integration.md — Mapping design tokens to Tailwind CSS theme configurationreferences/shadcn-components.md — shadcn/ui component catalog with usage patternsreferences/shadcn-theming.md — shadcn/ui theme customization and CSS variablesreferences/shadcn-accessibility.md — Accessibility patterns for shadcn/ui componentsreferences/tailwind-utilities.md — Tailwind CSS utility class reference and patternsreferences/tailwind-responsive.md — Responsive design with Tailwind breakpoints and container queriesreferences/tailwind-customization.md — Extending Tailwind with custom utilities, plugins, @themereferences/canvas-design-system.md — Canvas-based visual design system patternsDesign intelligence scripts are at: ${CLAUDE_SKILL_DIR}/scripts/
Use this path for all search and generation commands:
cd "${CLAUDE_SKILL_DIR}/scripts" && python3 search.py "<query>" --domain <domain> --max N
cd "${CLAUDE_SKILL_DIR}/scripts" && python3 design_system.py "<context>" --format markdown
data/styles.csv — 67 UI styles with keywords, colors, effects, accessibility ratingsdata/colors.csv — 161 color palettes mapped to product types (full semantic token set)data/typography.csv — 57 font pairings with Google Fonts imports and Tailwind configdata/products.csv — 161 product types with recommended styles, patterns, palettesdata/ui-reasoning.csv — 161 industry-specific decision rules (pattern, style priority, anti-patterns)data/ux-guidelines.csv — 99 UX guidelines with Do/Don't and code examplesdata/charts.csv — 25 chart types with accessibility grades and library recommendationsdata/landing.csv — Landing page patterns with CTA placement and conversion strategiesdata/icons.csv — Icon library recommendations by categorydata/app-interface.csv — App interface guidelinesdata/animations.csv — 160 animated component patterns across 15 categories (text, scroll, cursor, background, physics, card, navigation, SVG, marquee, transition, hero, interaction, data visualization, layout, 3D) with library recommendations, implementation hints, complexity ratings, and accessibility notesdata/react-performance.csv — React/Next.js performance guidelines (45 entries)data/google-fonts.csv — Google Fonts catalog (1,924 fonts with classifications, variable axes, popularity)data/stacks/*.csv — Stack-specific guidelines for 13 frameworks