디자인 스킬

Reverse-engineer a design system from a live website (public URL or localhost). Extracts colors, typography, spacing, shadows, radii, breakpoints, and component patterns using a headed Playwright browser. Captures screenshots of pages, components, and interactive states at real device resolutions. Produces structured design tokens and optionally seeds a Penpot project. **Triggers — use this skill when:** - User says "extract design system from [url]" - User asks to "reverse-engineer the styles from [site]" - User says "build a design system based on [website]" - User asks to "pull the design tokens from [url]" - User says "analyze the design of [site]" - User asks to "import styles from [website] into Penpot" - User points at a URL and asks about its colors, fonts, spacing, or components

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

Build, maintain, and audit design systems — tokens, component libraries, style guides, and cross-project consistency. Use when asked to create a design system, define tokens, audit component consistency, generate a style guide, or sync design tokens with code.

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

3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.

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

Capture the before/after rendered PNGs a UI-affecting PR in this repository needs as visual evidence, including bringing an Android SDK up in a fresh sandbox. Use when a change touches a Compose @Preview, a catalog, the VS Code webview, an overlay, a theme, an icon or a fixture, and the PR body needs real pixels.

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

Linearizing nonlinear dynamics around operating points for control design.

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

Adding integral action to MPC for offset-free tension tracking.

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

Design effective excitation signals (step tests) for system identification and parameter estimation in control systems.

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

Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the second-order "tasteful AI" ones (cream with terracotta, near-black with acid green, all-caps mono chrome, one accented headline word, decorative 01/02/03). Use when asked to "de-slop a UI", "make a design look less AI-generated", "audit a page or component for AI design tells", "fix Claude/Codex-generated frontend that looks generic", or keep a multi-page site on one design system. Covers HTML/CSS and React/Tailwind/shadcn. Has a detection-only mode and a zero-dependency scanner (scripts/detect.mjs) for the code-certain tells.

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

Fetch up-to-date documentation for any library, framework, API, or service into context. Use when the user wants to look up API references, check function signatures or required fields, find feature-specific docs, or verify how an external tool actually works. Triggers for queries about third-party libraries like Stripe, SQLAlchemy, Tailwind, FastAPI, shadcn, Drizzle, Hono, Better Auth — any time the answer lives in official docs rather than in the project codebase. Use this instead of guessing from trained knowledge, which is stale.

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

Builds distinctive, production-grade UIs that avoid generic AI aesthetics. Use whenever the user wants to build, restyle, or give visual direction to any interface — pages, dashboards, landing pages, components, onboarding flows, mobile screens, or design systems — even without an explicit 'design' request. Also triggers for: picking an aesthetic direction, improving the look of a dull/generic existing page, adding visual personality, or choosing colors/typography. Includes a bundled design intelligence database for concrete guidance across web (React, Next.js, Vue, Tailwind) and mobile (React Native, Flutter, SwiftUI).

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

Guidance for scaling systems from startup to enterprise scale. Use when planning for growth, diagnosing bottlenecks, or designing systems that need to handle 10x-1000x current load.

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

Analyze incoming user requests to detect intent, request type (design/validate/debug/document), complexity level, and identify vague requirements or buzzwords that need clarification. Use when cto-orchestrator receives new requests that need classification before routing to specialist agents.

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

Use when a screen design needs variants - how many, one document per variant, what makes two variants genuinely different, recommending one, how the human's choice is read, and narrowing to the chosen one in revision

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

Use when you write any words a user reads in a mockup or a hand-off - content language and voice, buttons, labels, errors, empty states, confirmations, numbers and dates, and the longest-string check

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

Use when you derive, change or extend a design system - where tokens live per stack, the DTCG token tree, role-based names for both themes, base vs layer vs drift, the DESIGN.md section order, the inventory format, the contrast check and the lint every proposal returns

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

Use when a design task asks you to compare a built screen with its approved design - screenshots at 1440, 768 and 375 attached to the task, Blocker/High/Medium/Nitpick triage, evidence per finding, problems not prescriptions

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

Use when a screen design was approved (the design task is in done) - the hand-off document implementers build from - components mapped to the inventory, tokens, every state, responsive behaviour per breakpoint, accessibility notes and exact copy

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

Use when your context carries "The approved design this task builds" - comparing the running UI with the approved hand-off and mockup at each width and state, evidence screenshots attached to the task, Blocker/High/Medium/Nitpick findings and which of them fail the round

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

Use when designing or building any mobile screen or component a user sees (Flutter, SwiftUI or Compose) - platform conventions, hierarchy, type that scales, colour roles and dark mode, safe areas and insets, forms and keyboard, states, feedback, and the generic-mobile anti-patterns.

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

Use when the mobile repository has no theme tokens or component library yet (a new app, an "Apply design system" task, or a task that asks for one), before building any screen - writes the approved design system's generated files from get_design_system (files true) and builds the theme from them when there is one.

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

Use when building or changing any interactive mobile UI - VoiceOver/TalkBack labels, grouping, headings, focus order, Dynamic Type/font scale, reduce motion, contrast, and the automated check for each stack.

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

Use on every UI change - semantic HTML, labels for controls, keyboard-navigable dialogs/menus, visible focus, and never color as the only signal

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

Use when the repository has no design system yet (no tokens, no component library - a new site/app, an "Apply design system" task, or a task that asks for one), before building any page section - writes the approved design system's generated files from get_design_system (files true) and builds the tokens on them when there is one.

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

Use when styling any web UI - style with Tailwind utility classes and design tokens, avoid custom CSS, and build on the existing Radix/shadcn primitives instead of hand-rolling

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