디자인 스킬

Create text effects impossible with CSS alone — kinetic typography, flowing text around animated obstacles, calligrams, shrinkwrap chat bubbles, typographic ASCII art, glyph path animation, variable font waves, glyph morphing, illuminated manuscripts. Single-file HTML output, zero build step. Powered by @chenglou/pretext + opentype.js. Triggers on text effects, kinetic typography, text animation, calligram, glyph art, typography art.

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

Convert photos into Slack-optimized custom emojis using Nano Banana Pro (Gemini 3 Pro Image) with automatic subject identification, style transformation, and image editing. 64KB/128px compliant. Triggers on: slack emoji, photo to emoji, convert to emoji, edit emoji, emoji maker.

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

Generate cinematic case study pages for films, documentaries, photography portfolios, and creative projects — film-frame hero images, structured crew credit grids, dark footage galleries, festival award sections, scroll-choreographed reveals via data-attribute animation orchestration. Warm cream palette with analog typography. Single-file HTML, zero build step. Triggers on film case study, documentary showcase, filmmaker portfolio, production company website, film credits page, creative project case study, director portfolio, photography case study.

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

Generate 20,000+ particle swarm simulators in two modes: sandbox (complete Three.js host runtime with gesture controls, security validation, code injection pipeline) and sim (behavior function bodies that position/color particles via a sandboxed API). The AI writes ONLY a function body — the host handles rendering, input, and security. Triggers on particle swarm, swarm simulator, particle behavior, swarm sandbox, gesture particles, 20K particles, particle function body, swarm sim, particle playground.

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

Design and prototype in Paper Design (app.paper.design) — read/write designs via MCP, convert to React/Tailwind code, import HTML/CSS, sync design tokens. Also covers Paper Shaders (@paper-design/shaders-react) — 30+ shader React components (mesh gradient, fluted glass, liquid metal, god rays, halftone, grain gradient, pulsing border). Pairs with minoan-frontend-design for creative direction. Triggers on Paper Design, paper.design, design-to-code, artboard, Paper Shaders, Paper MCP, prototype.

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

Build interactive live slide decks with Vite + React 19, TanStack Router, WebGPU shaders, Framer Motion orchestration, 1920x1080, access-gated SPA. 39 components (layout, interaction, graphics, chrome, navigation), direction-aware slide transitions, presenter mode with speaker notes and BroadcastChannel sync, Playwright PNG/PDF export, YAML-driven authoring, Cloudflare/Vercel/Netlify deploy. Triggers on: slide deck, presentation, pitch deck, investor deck, product demo, conference talk, live slides, WebGPU slides, interactive presentation, presenter mode, speaker notes, overwatch deck.

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

Build distinctive, production-grade frontend interfaces — websites, landing pages, dashboards, React components, HTML/CSS layouts, editorial heroes with depth-parallax (Astryx pattern), pointer-reactive fluid effects, pixel-glitch canvas heroes and terminal-style tool-panel dioramas (Composio pattern). Avoids generic AI aesthetics. Triggers on web UI, styling, beautify, frontend design, dashboard, landing page, React component, editorial hero, glitch hero, dev-tool landing page.

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

Build MindNode-inspired mind mapping interfaces — 8 node shapes, 27+ themes, layout algorithms (horizontal, vertical, radial with D3), keyboard shortcuts, focus mode, dual view. React + xyflow/react v12 + Zustand + Tailwind. Triggers on mind map, visual thinking tool, node-based diagram, brainstorm canvas, MindNode.

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

Generate 3D models from text or images via 5 providers: Meshy (text-to-3D, texturing, batch), fal.ai Hunyuan3D Pro ($0.225, PBR), WaveSpeedAI Rapid ($0.0225, bulk), Trellis 2 (poly control), and Local Depth (free offline ONNX depth maps + mesh). Includes GLB viewer. Triggers on 3D model, image to 3D, GLB, depth map, text to 3D, texturing, 3D asset, Meshy, Hunyuan.

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

Search and download images from 15 APIs in parallel (Openverse, Pexels, Pixabay, Met Museum, Cleveland Museum, Art Institute of Chicago, Getty Museum, NASA, Rijksmuseum, Wikimedia Commons, Unsplash, Smithsonian, Europeana, Iconify, Pollinations AI). Supports license filtering, presets (military, museum, stock), cached results, and bulk download with metadata sidecars. Triggers on find images, stock photos, public domain artwork, museum images, CC-licensed, NASA photos, icons.

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

Edit images with precision using ImageMagick 7, sips, transparent-background, and Pillow — with intelligent routing to AI semantic editing (Gemini/nano-banana-pro) for content-aware operations. Covers cropping, resizing, compositing, annotating, format conversion, color adjustment, background removal, batch processing, and montage creation. Triggers on image editing, crop, resize, composite, annotate, remove background, format conversion.

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

Recreate grainient.supply's 16 dark-mode visual effects as single-file HTML pages: WebGL shader gradients, vignette overlays, 9-layer box shadows, smooth scroll, spring animations, hover-zoom, ticker marquees, glassmorphism, 3D card flips, bento grids, gradient CTAs. Dark-mode-first with lime green (#C2F13C) accent. Triggers on grainient effects, dark-mode landing page, cinematic depth, glow effects, SaaS showcase, visual effects page.

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

OpenAI GPT Image generation and editing (gpt-image-2, 1.5, 1, mini). Text-to-image, mask-based inpainting, multi-reference composition, multi-turn conversational editing via Responses API, streaming with partial images. This skill should be used when generating or editing images via OpenAI's image models, when near-perfect text rendering in images is needed, when mask-based region-aware editing is required, when multi-turn conversational image editing is desired, or when streaming progressive image delivery is needed. Complements nano-banana-pro (Gemini) as a parallel image generation backend.

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

Generate frontend code drafts using Gemini 3.1 Pro's one-shot UI generation. Use when building React components, HTML/CSS pages, SVG animations, or converting screenshots to code. Produces fast, cheap drafts (7.5x cheaper than Opus) that Claude reviews and refines. Supports design system context loading (1M token window), screenshot-to-code pipeline, and physics-based SVG animation. Trigger: "generate a UI", "screenshot to code", "draft a component", "SVG animation", "convert this design", "gemini forge", "forge a UI".

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

Final quality pass fixing alignment, spacing, consistency, interaction states, and micro-details before shipping. Executes changes (unlike design-audit and design-critique which are report-only). Triggers on polish, finishing touches, final pass, something looks off, pre-launch, good to great.

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

Create, fetch, validate, or export DESIGN.md design system files in the Google Stitch 9-section format. Fetch reference designs from 68 brands (Linear, Stripe, Vercel, etc.) via getdesign CLI, generate scaffolds from existing CSS custom properties and Tailwind tokens, or validate and export with the Google @google/design.md CLI. Pairs with minoan-frontend-design for implementation. Triggers on "DESIGN.md", "create design system file", "extract design tokens", "codify the design", "getdesign", "make it look like [brand]", "lint design", "validate DESIGN.md", "export design tokens", "export tailwind theme".

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

Generate hand-crafted web animation patterns as self-contained HTML: typewriter/rotator effects, progress bar simulations, file review state machines, staggered reveals, terminal status displays, streaming AI-response demos, popover/dialog/toast lifecycles, Lottie orchestration, scroll-driven sequences. Behavioral animations that simulate live software. Triggers on typewriter effect, progress animation, stagger reveal, terminal animation, streaming text, AI demo animation, toast animation, data simulation, product demo animation, loading sequence, conductor motion.

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

Research UI component patterns across the component.gallery corpus — 60 canonical component types, ~95 production design systems, 2,600+ examples — plus an AI-era overlay (prompt inputs, tool-call cards, streaming status, citations) and composite patterns (command palette, app shell, agent console). Compare implementations, find alternative component names, ground frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows. Triggers on component patterns, how do others implement X, design system research, component comparison, AI chat components, agent UI patterns.

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

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

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

Guide creating and reviewing skills that extend Claude with specialized knowledge, workflows, or tool integrations. Covers SKILL.md structure, frontmatter quality, trigger design, eval pipelines, and packaging. Triggers on create a skill, review this skill, new skill, optimize skill, skill quality.

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

Plan the UX and UI for a feature before writing code. Run a structured discovery interview, then produce a design brief (.design-context.md) that guides implementation. Establishes design direction, constraints, and strategy before any code is written. Triggers on plan the design, design brief, shape the UX, before we build, design discovery.

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

Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.

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

Polish screen recordings with Recordly (open-source Screen Studio alternative) — auto-zooms, cursor animations, webcam overlays, styled backgrounds, timeline editing. Also includes Slant: browser-based 3D perspective renderer with 12 animation presets and MP4/GIF export. Triggers on screen recording, demo video, Recordly, screen capture polish, product walkthrough, 3D perspective, Slant.

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

デモアプリ・Webアプリの Cognito 認証のおすすめ構成。「Googleで続ける」か「メール＋パスキー（パスワードも併用可）」の2経路をCDKとフロントでどう組むか、パスキーが動かない設定の罠、Google client secret の置き場、ログイン画面のUX規約、Googleの同意画面に出るアプリ名の扱い。新しくデモアプリを作るとき、既存アプリの認証を作り直すとき、パスキーやGoogleログインが動かないときに読む。

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