스킬 찾기

Review interface designs with a senior designer's perspective. It scores each design dimension from zero to ten, explains what a top score requires, and flags generic AI-generated design patterns before UI changes are merged.

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

• Reviewing UI work before merging changes
• Comparing design scores across review dimensions
• Identifying generic AI-generated design patterns

Use more than 300 design rules drawn from Apple HIG, Material Design 3, and WCAG 2.2 accessibility guidance. Apply them when planning a shared app design for iOS, Android, and the web.

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

• Planning an app design shared across iOS, Android, and the web
• Consulting Apple HIG and Material Design 3 rules
• Considering accessibility with WCAG 2.2 guidance

Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.

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

• Creating a calm landing page with refined typography
• Designing an asymmetrical SaaS feature layout
• Building a portfolio with soft shadows and generous spacing

Apply font and color themes to slides, documents, reports, and HTML landing pages. Ten preset themes provide starting points for giving these materials a consistent visual style.

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

• Apply a preset theme to slides
• Style documents and reports consistently
• Set fonts and colors for an HTML landing page

Create a Swiss-inspired presentation page as a single HTML file, using bold typography and geometric cards. The template includes slide navigation, light and dark themes, accent color cycling, and optional annotation overlays without external runtime dependencies.

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

• Build a presentation-style landing page
• Create a Swiss-inspired HTML slide deck
• Present a launch with interactive navigation

Present user research as a three-slide HTML deck with warm paper colors, minimalist typography, and subtle motion. Organize the research framing, participant breakdown, and behavioral evidence, with keyboard navigation and interactive donut-chart highlights.

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

• Summarizing user research in three slides
• Showing participant composition with a donut chart
• Presenting behavioral patterns alongside evidence

Discover a UI/UX design resource during planning through this catalog entry. It identifies the upstream skill, but its pattern data, templates, and search tools require a separate installation before the full workflow can run.

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

• Considering UI/UX resources during design planning
• Checking whether the full skill is installed
• Finding guidance for installing the upstream bundle

Develop visual effects with GLSL, a language for graphics programs called shaders. Apply ray marching, fluid simulation, particle systems, and rule-based generation to create hero visuals and still frames of motion.

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

• Creating hero visuals for a page
• Developing fluid simulation visuals
• Building particle effects

Create a product showcase with real HTML content displayed inside CSS-drawn iPhone and optional MacBook screens. Add glass-like highlights and floor reflections to present app interfaces or design work in a three-dimensional style.

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

• Presenting an app interface for a product launch
• Showing mobile and desktop designs together
• Turning text and data into an app-style showcase

Prepare media assets required by an existing OD Next plan. Reuse verified capabilities and suitable assets, acquire files, measure dimensions, and retrieve background job results while preserving required content, licensing constraints, and quality conditions.

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

• Preparing all media assets required by an existing plan
• Reusing suitable user assets across multiple pages
• Measuring asset dimensions for layout sizing

Turn screenshots, reference links, and rough visual preferences into a reusable DESIGN.md, a record of design decisions, and practical handoff instructions for building prototypes, presentations, redesigns, or image remixes.

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

• Define an app's visual direction from reference images
• Document design decisions before a redesign
• Hand off consistent visual rules for presentation production

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

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

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Run scripts through the Figma Plugin API, an interface for operating on designs. Use it to write to the canvas, inspect content, work with variables, and carry out design-system tasks.

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

• Writing to the Figma canvas with scripts
• Inspecting Figma canvas content
• Working with variables and design systems

Build websites, dashboards, and application screens with a clear visual direction and working frontend code. The skill covers typography, color, layout, responsive behavior, and interaction states while following existing project conventions and brand guidance.

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

• Building a landing page with a clear visual direction
• Designing a dashboard for everyday work
• Refining the appearance and behavior of existing UI

Generate website design references as separate horizontal images for each section. Keep a consistent palette while varying layouts, spacing, imagery, and calls to action, giving developers or coding agents concrete visual references for implementation.

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

• Create section-by-section landing page design references
• Explore different hero layouts
• Share visual references with developers

Create a macOS-style notification banner from an announcement or message, complete with an app icon, title, and body. The single-file HTML design supports video overlays, product teasers, and social images, with light and dark appearances.

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

• Adding a notification banner to a video
• Creating a teaser for a product release
• Presenting an announcement as a social image

Generate website design images before coding, then analyze their text, spacing, colors, and layout to guide implementation. Separate references for each section help translate the design into a responsive frontend with a readable first screen on smaller laptops.

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

• Design a landing page from generated visual references
• Build a clear hero section for smaller laptop screens
• Create a portfolio with a consistent visual direction

Create an FAQ page with expandable answers, live text search, and category filters. The skill organizes realistic questions for a product or service into a single HTML file with a contact section.

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

• Creating a help page for a SaaS product
• Organizing billing and account questions
• Building a searchable online store FAQ

Review and refine an existing web page or HTML artifact before sharing it. Improve visual hierarchy, copy, and restrained animation, while fixing responsive layouts and accessibility issues and preserving the original content and brand.

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

• Refining a generated web page before sharing
• Reviewing generic or inconsistent design choices
• Fixing mobile layout and accessibility issues

Create HTML presentations with rich animations and visual style previews. Use the skill to build slides for online keynotes, embedded talks, or interactive briefs, with a preview of how the presentation will look.

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

• Creating slides for an online keynote
• Preparing a presentation to embed in a web page
• Building an interactive brief

Turn business metrics and findings into a magazine-style HTML report with a paper-like background, pastel cards, and a retention chart. Use the template to create a single-page board memo or a visually organized business report.

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

• Create a magazine-style business report
• Prepare a single-page board memo
• Present key metrics alongside findings

Generate mobile app screen concepts and connected screen flows for iOS, Android, or cross-platform products. The skill emphasizes readable text, consistent colors and navigation, and clean phone mockups. It produces images rather than implementation code.

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

• Visualizing an app concept across several screens
• Designing a first-time user introduction flow
• Exploring sign-in and account recovery screens

Design desktop landing page prototypes with varied layouts, large typography, dense grids, and GSAP animations tied to scrolling. Pages follow an attention-to-action structure, with explicit checks for heading length, grid completeness, and button text contrast.

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

• Prototyping a landing page with scroll animations
• Exploring varied hero layouts and typography
• Designing a compact grid without empty cells

Build a three slide quarterly review or roadmap presentation with a retro blue, orange, and cream palette. The self-contained HTML includes a cover, three priorities, a timeline, key performance indicators, keyboard navigation, and animated transitions.

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

• Presenting a quarterly review
• Sharing three priorities with a team
• Showing a roadmap alongside key performance indicators