디자인 스킬

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 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

Create or update Figma screens from code or written descriptions. Use design system components and design tokens, shared values for visual styling, to translate application pages into Figma designs.

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

• Turning application code into Figma screens
• Creating screens from written descriptions
• Updating screens with design system components

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

Generate visual assets through Google Gemini's image generation API, including interface mockups, icons, and illustrations. The supplied entry helps agents discover the skill; running the full workflow requires installing the upstream bundle.

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

• Creating visual mockups of an interface
• Generating icons for a design
• Creating illustrations for visual materials

Find images, logos, and screenshots already stored in OD Library and reuse them in the current project. Select assets by their metadata, copy them into the project, and connect the returned file paths to the page.

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

• Reuse a screenshot captured earlier
• Insert a stored logo into a page
• Find a hero image in an existing library

Design minimalist web interfaces with warm monochrome colors, clear typographic hierarchy, generous spacing, and flat card grids. Use muted pastel accents and subtle motion to create an editorial layout for product interfaces.

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

• Prototyping a minimalist product interface
• Organizing feature cards in an asymmetric grid
• Unifying typography, spacing, and colors

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

Create a blank Figma Design or FigJam file as the starting point for agent workflows. Use it to prepare a new workspace before building a design system or organizing workshop activities.

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

• Starting a blank Figma Design file
• Preparing a FigJam file for a workshop
• Beginning a scripted design-system workflow

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

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

Polish an existing web interface with subtle button feedback, state transitions, and page reveals. Preserve the layout and content, keep animation timing consistent, and provide alternatives for people who prefer reduced motion.

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

• Adding hover and press feedback to buttons
• Clarifying changes between interface states
• Introducing primary content with subtle motion

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

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

• Creating a fashion-inspired motion presentation
• Presenting a short story across three pages
• Applying existing brand rules to a dark editorial sequence

Turn Markdown or notes into a magazine-style HTML article. A large title, centered reading column, distinctive headings, styled quotations, and labeled code blocks give long essays and newsletters a consistent visual structure.

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

• Turning Markdown into a magazine-style article
• Formatting an essay from notes
• Designing a long-form newsletter

Generate 3D models from text descriptions or images through fal.ai for game assets, augmented reality previews, product mockups, and concept sculpting. This catalog entry points agents toward the upstream bundle needed for the full workflow.

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

• Generating 3D assets for a game
• Creating models for augmented reality previews
• Making product mockups

Create horizontal slide decks with an editorial magazine and e-ink look. Ten layouts and five palettes organize narratives, quotations, images, and data into a paper-inspired presentation delivered as a single HTML file.

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

• Presenting ideas in a magazine-style deck
• Highlighting research findings and key numbers
• Organizing talks with chapter dividers

Create a three-slide HTML presentation for company culture, strategy, or guiding principles. Burgundy, blush, and muted gold frame bold statements, pill-shaped tags, and eight principle cards, with button and keyboard navigation.

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

• Presenting company culture
• Sharing eight guiding principles
• Introducing a studio through tags

Turn product information, analysis, or methods into an HTML slide deck with a 16-column grid and one accent color. Use 22 fixed layouts for timelines, comparisons, diagrams, and charts based on supplied data.

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

• Presenting a product roadmap
• Reporting KPIs and ranking data
• Explaining before-and-after differences

Audit an implemented interface visually, then make code fixes in small, focused commits. Before-and-after screenshots document the changes, helping teams inspect and refine the interface as they prepare for launch.

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

• Checking an implemented interface before launch
• Fixing issues found in a visual audit
• Comparing screenshots before and after UI changes

Extract colors, fonts, logos, imagery, and writing style from a live website. Turn measured page details into a structured brand kit, a written guide, and a reusable design system with visual previews.

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

• Document a website's colors, fonts, and logos
• Build a brand guide from a reference website
• Collect representative brand imagery

Refine interface components using Emil Kowalski's design engineering principles. Decide when animation helps, tune timing and interaction feedback, and review CSS choices with attention to performance, accessibility, and details such as tooltips and drag behavior.

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

• Deciding whether an interaction needs animation
• Refining buttons, tooltips, and notifications
• Reviewing UI code with before-and-after comparisons

Turn a design request into a concrete specification covering colors, fonts, layout, mood, spacing, and constraints. Generate DESIGN.md and an HTML preview, with a clear report of defaults applied to unspecified choices.

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

• Clarifying vague visual requirements before implementation
• Defining colors, fonts, and spacing for a landing page
• Reviewing design choices through an HTML preview

Clarify requests for visual output by adding design specifications and UI/UX vocabulary, the language of interfaces and user experience. Use it to refine prompts for screen design or workflows that turn designs into code.

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

• Clarifying a request for a visual design
• Refining prompts for turning designs into code
• Adding UI/UX vocabulary to a design request

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

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

• Posters generated with programmed rules
• Still images that suggest motion
• Studies of artistic frame composition