디자인 스킬

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

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

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.

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

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

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

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

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

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

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

Design and review client UI changes — visual token discipline, reuse-before-adding, feedback surfaces (toast vs in-place notice vs empty state), overlay and menu safety, platform window adaptation, loading states, and error copy placement. Use when adding or changing product-user-visible GUI behavior, or when reviewing such a PR.

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

Generate sitemap and wireframe specifications from project-config.json and produce UX planning artifacts.

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

Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.

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

Alias for Visual Stack's review tool, which used to be called wireframe. Builds a UI wireframe and opens it in an interactive review workspace, or reviews an app that is already running. Use only when the user invokes /vstack:wireframe or $vstack:wireframe.

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

Start a project on the Visual Stack — a multi-step setup form captures what's being built, recommends a stack, and either instantiates the vstack-template-base template, sets up a specs-and-design-only workspace, or records an existing codebase without touching it. Use when the user wants to start a new project, scaffold a repo, set up a codebase from the Cavalry template, pick a stack or add-ons, run Day-1 setup, or bring an existing app onto the visual stack.

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

Compatibility entry for Visual Stack's former /vstack:go command. Runs the wireframe and UI review tool, now called review. Use only when the user invokes /vstack:go.

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

Visual Stack's primary tool. Build a UI wireframe and open it in an interactive review workspace where the user comments directly on the page, turning those comments into the next iteration — or point the same workspace at an app that is already running and review the real thing. Use when the user wants a wireframe, UI mockup, screen design or prototype built; wants to review, annotate, mark up or comment on a page, a design, an existing UI, a running app or a website; wants to iterate on a UI; asks to use Visual Stack; or invokes $vstack:review, /vstack:review, or the older /vstack:wireframe.

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

Implement project-consistent UI through page classification, bounded references, semantic tokens, skeleton-first delivery, and responsive screenshot QA. Use for frontend redesigns, dashboards, forms, settings, mobile pages, screenshot recreation, visual polish, or generic-looking generated UI.

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

将Markdown文章转换为美化的HTML格式，适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。

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

GStack design plan review for user journey, layout, interaction model, responsive behavior, accessibility, and visual risk before UI work starts.

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

GStack design-html method for producing or planning quick HTML prototypes, design boards, or rendered visual explorations for UI review.

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

GStack autoplan method for running a broad CEO, design, engineering, and developer-experience review before opening implementation windows.

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

GStack design consultation method for critiquing product/UI/visual direction, exploring alternatives, and recommending a design path before production.

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

GStack design-shotgun method for rapidly exploring multiple distinct design directions before choosing one to implement or polish.

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

GStack design-review method for reviewing rendered UI, landing pages, decks, or visual artifacts for hierarchy, layout, accessibility, and polish.

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

Compatibility adapter into ui-implementation-workflow visual direction. Invoke explicitly for expressive marketing, brand, portfolio, or editorial work; do not use as the primary product UI workflow.

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

Ask the user which visual design style, font pairing, and animation set to use before designing or building any website, landing page, dashboard, web app, portfolio, or UI, and describe each option so they can choose. Use this skill whenever the user asks to build, design, redesign, mock up, or restyle a site or interface and has NOT already named a style, fonts, or animations. Also use when they say "pick a style", "what design should I use", "give me design options", "which fonts", "font pairing", "which animations", "add motion", "glassmorphism or something else", or want to browse aesthetics, typography, or transitions. Contains 301 UI design styles, 400 heading+body font pairings, and 500 animations/transitions (Framer Motion, GSAP, CSS, Three.js/R3F, shaders), each with a one-line description.

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

발표급 다크 에디토리얼 HTML 덱을 손으로 짓는 디자인 시스템. 브리프/원고를 받아 Apple·Linear·Stripe 키노트급으로 보이는 프레젠테이션을 프론트엔드(HTML/CSS, 1920×1080 슬라이드)로 만들고 헤드리스 크로미움으로 PNG/PDF까지 렌더한 뒤 공유용 PDF는 기본 경량화한다. PPTX 생성기가 아니라 "슬라이드처럼 보이는 웹 페이지"를 짓는 방법론 + 재사용 CSS 토큰/컴포넌트. 기본은 다크 에디토리얼이고, 문서형·보고서형·출력형 브리프는 paper-light 프로파일로 전환한다. 트리거 — "발표자료/슬라이드/덱을 예쁘게", "IR·보고 덱을 발표급으로", "HTML로 프레젠테이션", "다크 에디토리얼 슬라이드", "키노트 톤 덱", "거대숫자 스탯 슬라이드", "deck-factory 디자인", 기존 밋밋한 덱을 "상용 발표자료처럼" 다시 짜달라는 요청. 핵심 규칙 — dark는 near-black #08090A 캔버스(순흑 금지), light는 paper #F7F4EC 캔버스, 채운 박스 금지(surface 래더 + hairline), 슬라이드당 accent 1곳, 거대숫자 value>label>context 3단 위계, 4모서리 헤더/푸터, eyebrow→마침표 액션타이틀→지배 오브젝트 1개→tail 골격, CJK word-break:keep-all, 크기·트래킹으로 위계(굵기 남발 금지). 상세 토큰표·컴포넌트별 CSS·13-슬롯 레이아웃 어휘· 라이트 프로파일 전환·WSL 렌더 팁은 reference.md 참조.

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

Design, generate, review, and revise editable PowerPoint presentations through a rigorous brief-to-PNG workflow using the public pptx-designer Python library.

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