디자인 스킬

Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use Open Design for agent-native UI prototypes, decks, motion, and hand-drawn diagrams — complementary to Decisions Mermaid viewer for technical charts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Playbook for Aceternity UI, Refero MCP, Mobbin MCP, and Godly when building or polishing web UI — what each source is for and how agents should use it.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Route technical planning and review between Decisions Mermaid viewer, BuilderIO visual-plan/recap skills, and Open Design when the work needs richer artifacts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Pick a design aesthetic from awesome-design-skills — bundled minimal/professional/enterprise/shadcn/bento; full catalog in reference for on-demand load.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when preparing hardest high-leverage work for a stronger or scarce model, building a ranked execution queue, asking for fable prep, frontier prep, round-collapse, wave queue, or model-upgrade readiness across code, design, copy, marketing, or architecture work.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design, implement, and review XState v5 state machines and @xstate/react integrations in TypeScript. Use when modeling finite workflows, async actors, statecharts, guarded transitions, delayed transitions, actor systems, or machine-driven React behavior.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when working with Protocol Buffer (.proto) files, buf.yaml, buf.gen.yaml, or buf.lock. Covers proto design, buf CLI, gRPC/Connect services, protovalidate constraints, schema evolution, and troubleshooting lint/breaking errors.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use for prioritization, or when there are more tasks than capacity: "what should we do first?", "rank this backlog", "cut scope for the MVP", "RICE score these". Picks a method (RICE, ICE, MoSCoW, impact-effort), scores items and sets a cut line. Skip for choosing between two designs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use for design thinking, or when a product or service problem needs user understanding before solutions: "what do users really need?", "how might we...", "plan a discovery sprint", "validate this concept". Skip when the spec is frozen or the task is code maintenance.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fallback. Triggers on "make it pop", "something flashy", "animated [X]", "like [cool site]", "build a [showpiece] section". NOT for non-React stacks. Inspiration galleries (Dribbble/godly) are visual reference only - never code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

**未導入プロジェクト向け**の sparkle-design 初期導入・セットアップを支援するスキル。 npm インストール、sparkle-design-cli による初回 CSS 生成、sparkle.config.json の 新規作成、AI ガード（Sparkle Design Guard）の導入、コンポーネント選択ガイドまでをカバー。 **導入済みプロジェクトでテーマ（primary / font / radius）を変えたい場合は `change-sparkle-config` スキルを使うこと** — この setup スキルは初期導入専用。 「Sparkle Design を導入」「sparkle-design をインストール」「デザインシステムをセットアップ」 「コンポーネントライブラリを追加」「どのコンポーネントを使えばいい」で発動。 English: "install sparkle-design", "add sparkle design", "set up sparkle design", "which component should I use"

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

**導入済みの sparkle-design プロジェクト**で、ユーザーが目指したい「雰囲気」を 自然言語で伝えたら、`sparkle.config.json` の primary / font-pro / font-mono / radius を 書き換えて `sparkle-design-cli generate` まで実行するスキル。選択肢は Theme Settings Figma プラグインが扱える範囲（primary 7 色 / radius 8 段階 / fonts 11 種）に揃えて おり、Figma と CLI の見た目がずれません。**未導入プロジェクトの初期セットアップは `setup-sparkle-design`（internal 環境では `install-sparkle-design`）を使うこと。** 「雰囲気を変えたい」「もっとポップに」「ビジネスライクに」「高級感を出したい」 「primary を変えたい」「角丸をもっと丸く」「フォントを変えたい」「テーマを提案して」 「テナントごとに配色を変えたい」「役割ごとに色を出し分けたい」（後者2つは複数 バリアント要望として範囲外に誘導するために発動） で発動。English: "change the vibe", "make it more playful", "make it more business-like", "adjust the theme", "change primary color".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

sparkle-design（公開 npm パッケージ）の新バージョンをリリースするための手順スキル。 package.json の version bump、CHANGELOG.md の更新、リリース PR 作成、PR マージ後の npm への stage、メンテナーによる 2FA 承認（npm stage approve）、承認後の git tag・ GitHub Release 作成までを一連の手順で実行する。 CHANGELOG 更新漏れと GitHub Release 作成漏れを防ぐためのチェックリストを含む。 「sparkle-design をリリース」「sparkle-design の新バージョンを切る」「vX.Y.Z をリリース」 「sparkle-design の CHANGELOG を更新」で発動。 English: "release sparkle-design", "cut a new sparkle-design version", "publish sparkle-design", "bump sparkle-design version".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Own goal-first engineering outcomes: investigate, find root cause, design, plan, then delegate implementation unit-by-unit to cursor-implementation-loop, this plugin's kernel skill, with verification and honest reporting. Use to fix, build, or own an outcome end to end; investigate-and-fix; "make X work"; or plan-then-execute in one request. A request with an approved plan or equivalently precise spec that needs nothing beyond implementation belongs directly to cursor-implementation-loop. Requires this plugin's cursor-implementation-loop skill; they ship together.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Own goal-first engineering outcomes: investigate, find root cause, design, plan, then delegate implementation unit-by-unit to implementation-loop with verification and honest reporting. Use to fix, build, or own an outcome end to end; investigate-and-fix; "make X work"; or plan-then-execute in one request. A request with an approved plan or equivalently precise spec that needs nothing beyond implementation belongs directly to implementation-loop. Requires implementation-loop and an authenticated backend CLI to execute.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when building games or interactive software in Godot 4 with C# — designing scenes and nodes, writing gameplay code, handling input, physics, animation, UI, rendering, save systems, performance work, WebSocket-based multiplayer, or exporting to platforms. Triggers on "Godot", "GDScript", "C# Godot", "scene tree", Godot node types (Node2D, Node3D, Control, CharacterBody), "_Process", "_PhysicsProcess", "signal", "autoload", "RPC", "WebSocketMultiplayerPeer", "shader", "export preset", or any Godot 4 project files. For game design see game-systems-designer; for balance see game-balancer; for game-specific intake see game-design-shaper.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when designing the systems of a game from a locked concept — core loops, meta loops, player verbs, progression, content systems, level structure, and narrative integration. Triggers on "game design doc", "GDD", "system spec", "core loop design", "progression design", "level design", "MDA", or "design the systems". Produces a design doc plus per-system specs that game-balancer numbers, iap-manager stocks, and godot-engineer builds. Stops at design — no number tuning, pricing, or engine code. For balance numbers see game-balancer; for the engine implementation see godot-engineer.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when building games or interactive software in Phaser 3 with TypeScript — scenes, gameplay code, input, Arcade physics, animations, audio, tweens, asset preloading, save systems, performance work, or scaffolding with Vite. Triggers on "Phaser", "Phaser 3", "Phaser.Scene", "Phaser.Game", "Arcade physics", "Matter physics", "tilemap", "Tiled", "GameObject", "Container", "Group", "Vite + Phaser", or any `.ts`/`.js` file in a Phaser project. For game design and balance see game-systems-designer, game-balancer; for game intake see game-design-shaper. For Godot/C# see godot-engineer.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Decide when and how to build UI in Apple's Liquid Glass design system (WWDC25; iOS/macOS 26+, refreshed in 27) on SwiftUI, UIKit, AppKit and the web. Covers the layer model (glass is for the floating navigation/control layer, never the content layer), regular vs clear variants and the 35% dimming rule, tint only for primary actions, concentric corner radii, morphing and interactive response, Reduce Transparency / Increase Contrast / Reduce Motion fallbacks, verified API names (glassEffect, GlassEffectContainer, glassEffectID, .glass/.glassProminent, UIGlassEffect, NSGlassEffectView, scroll edge effects, backgroundExtensionEffect, tab bar minimize), and three web routes (GPU post-process inside your WebGL/WebGPU pipeline, the ybouane/liquidglass library, CSS backdrop-filter + SVG displacement) with a contrast-on-glass checker and spec auditor. NOT for generic glassmorphism/vaporwave styling, visionOS window glass, app icon design in Icon Composer, or non-Apple design systems (Material 3, Fluent).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.