디자인 스킬

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

Design and build landing pages, portfolios, and website redesigns around the audience and brand. Choose suitable typography, colors, layouts, and motion, then check consistency, responsive behavior, and readable buttons and forms before delivery.

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

• Build a landing page around a brand brief
• Create a portfolio for its intended audience
• Redesign a site while retaining its identity

Create an X-style post card from supplied text or data, including engagement counts and light or dark styling. Produce a single HTML file for video overlays or content intended for image sharing.

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

• Prepare a post card for a video overlay
• Turn a memorable quote into a shareable card
• Summarize supplied data as a short post

Create vertical marketing posters and social sharing visuals with a large headline, vivid gradient background, and short information cards. The 9:16 layout brings product announcements or key messages together in one composition, with space for branding or a QR code.

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

• Creating a vertical poster for a product launch
• Preparing a visual to share on social media
• Summarizing three to five key points on one poster

Guide an AI agent’s interface work with a shared set of design constraints. Use it to keep many small UI elements coherent across an interface, with the full workflow available through the separately installed upstream bundle.

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

• Keeping multiple UI components consistent
• Giving an agent shared rules for interface work
• Including UI constraints during project planning

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

Generate a DESIGN.md file for Google Stitch that defines colors, typography, layouts, component states, and motion. Clear descriptions and exact values give the screen-generation agent a shared reference, including explicit rules against generic design patterns.

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

• Defining shared design rules for Google Stitch screens
• Documenting colors, typography, and component behavior
• Specifying mobile layouts and animation rules

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

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

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

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 project-specific rules for turning Figma designs into code. Bring design tokens, shared values such as colors and spacing, together with naming conventions and lint rules for automated checks in one reference.

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

• Defining rules for implementing Figma designs
• Documenting shared design values and naming conventions
• Consolidating automated checking rules in one reference

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

Create landing pages, websites, and app interfaces with restrained composition and a clear visual presence. The skill draws on OpenAI's frontend production playbook to guide the appearance and arrangement of interface elements.

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

• Creating landing pages with restrained composition
• Designing visually composed websites
• Creating app user interfaces

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

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

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

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

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

Turn a written prompt into a hand-drawn Excalidraw diagram, with animated SVG output, an online editing link, and PNG export. Use it through Claude Code, Codex, Gemini CLI, or agents supporting standard skill paths.

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

• Creating a hand-drawn diagram from a prompt
• Getting an online link for editing a diagram
• Exporting a diagram as a PNG image

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

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