frontend-design은(는) 무엇을 하나요?
명명된 미학 철학에 따라 차별화되고 프로덕션급 품질의 프론트엔드 인터페이스를 구축합니다. 구성 요소, 페이지 또는 애플리케이션을 구축할 때 사용하십시오. 미적 디테일과 창의적인 선택에 뛰어난 주의를 기울여 일반적인 AI 출력을 피하는 작업 코드를 생성합니다.
고유한 미학 철학에 따라 차별화된 프로덕션급 프론트엔드 인터페이스를 구축합니다. 구성 요소, 페이지 또는 애플리케이션을 구축할 때 사용하십시오. 미적 디테일과 창의적인 선택에 뛰어난 주의를 기울여 일반적인 AI 출력을 피하는 작업 코드를 생성합니다.
이 스킬은 개발자가 명명된 미학 철학(예: '미니멀리즘', '브루탈리즘', '네오모피즘' 등)을 가이드로 사용하여 차별화되고 프로덕션급 품질의 프론트엔드 인터페이스를 구축할 수 있도록 지원합니다. Cursor, Claude Code, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 구성 요소, 페이지 또는 전체 애플리케이션을 구축할 때 '미적 디테일'과 '창의적인 선택'에 특히 주의를 기울여 일반적인 AI 출력처럼 보이지 않는 작업 코드를 생성합니다. 이 스킬은 단순히 코드를 생성하는 것을 넘어, 디자인 시스템, 타이포그래피, 색상 팔레트, 레이아웃, 애니메이션 등 프론트엔드 디자인의 핵심 영역을 다루며, 개발자가 일관되고 고품질의 사용자 인터페이스를 효율적으로 만들 수 있도록 돕습니다. SKILL.md 문서에 정의된 대로, 이 스킬은 사용자가 특정 미학적 방향을 선택하면 해당 방향에 맞는 스타일 가이드와 구현 코드를 제공하여 창의적인 결정을 지원합니다.
npx skills add https://github.com/julianoczkowski/designer-skills/tree/main/skills/frontend-design명명된 미학 철학에 따라 차별화되고 프로덕션급 품질의 프론트엔드 인터페이스를 구축합니다. 구성 요소, 페이지 또는 애플리케이션을 구축할 때 사용하십시오. 미적 디테일과 창의적인 선택에 뛰어난 주의를 기울여 일반적인 AI 출력을 피하는 작업 코드를 생성합니다.
This repo contains 7 individual skills — each has its own dedicated page.
Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".
Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief".
Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".
Run a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity. Use when user wants a design review, critique, QA pass, polish pass, or mentions "review" after building.
Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, challenge an approach, or mentions "grill me".
Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".