디자인 스킬

Create a single-file presentation with horizontal page navigation in a Replit Slides style. Choose one of eight themes, keep its colors and fonts consistent, and build a cover, agenda, content pages, and closing around your material.

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

• Creating a presentation with one consistent visual theme
• Choosing a Replit Slides style for product materials
• Adjusting slide count to cover all supplied points

Create terminal-style review slides for command-line tools, AI agents, and developer tools. Present execution traces, code differences, and performance comparisons using dark backgrounds, mint-green text, outlined bar charts, and amber, green, or red tags.

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

• Create review slides for command-line and developer tools
• Present AI agent execution traces and code differences
• Show performance comparisons in a terminal-style deck

Create a horizontally navigated HTML presentation with a magazine and e-paper look. Combine a flowing WebGL cover background, serif headlines, chapter dividers, large numbers, image grids, and quotation pages to present your content.

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

• Presenting a campaign with a magazine look
• Highlighting a key number with a short explanation
• Combining image grids and quotation pages

Turn supplied data into a newspaper-style chart with a takeaway headline, annotations, and source notes. Create line, bar, or range-band charts, which show an interval around a central line, with staggered animation in a single HTML file.

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

• Create a chart segment for a video
• Prepare a data chart card for Twitter
• Visualize CSV or JSON data with a takeaway headline

Create a minimal presentation built around large headlines, solid backgrounds, and arrow-prefixed lists. The template adapts the page count to the content and includes keyboard navigation hints and page numbers.

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

• Presenting an idea with few visuals
• Building a talk around bold headlines
• Organizing key points into arrow-prefixed lists

Create slides on a fixed 1920×1080 canvas, choosing each layout to suit the content. Consistent typography, one palette, and a single focal point per slide shape the presentation, with keyboard navigation and page numbers included.

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

• Building a portfolio presentation
• Designing a talk with varied slide layouts
• Preparing slides for an art or design class

Turn three to six stages of marketing, hiring, or selection data into a vertical funnel infographic. A single HTML file shows counts, stage conversion rates, overall conversion, and a brief explanation of losses.

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

• Visualizing the path from visitors to paying customers
• Showing applicant counts across hiring stages
• Comparing candidate counts during a selection process

Build a single-page layout for an admin or analytics dashboard. It includes fixed navigation, a top bar for search and notifications, three to five key metric cards, one or two charts, and recent activity.

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

• Creating an admin dashboard layout
• Arranging three to five key metric cards
• Combining line, bar, or area charts on one page

Create presentation slides with scripts for each page and a separate teleprompter window. View current and next slides, script text, and a timer, with keyboard controls for switching among five visual themes.

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

• Preparing slides with a script for every page
• Checking upcoming slides while presenting
• Rehearsing a talk with a script and timer

Plan and generate hand-drawn article illustrations that turn key ideas, processes, and metaphors into clear visual scenes. The skill suggests image placement, creates individual 16:9 images with an active central character, and checks composition and annotations.

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

• Plan illustration placement for an article
• Illustrate a workflow or abstract idea
• Generate hand-drawn images for blog posts

Analyze existing Stitch screens and document their colors, typography, components, and layout in DESIGN.md. The resulting design reference combines plain visual descriptions with precise color values to guide requests for new screens.

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

• Document design rules from an existing screen
• Prepare a design reference for new screen prompts
• Record color codes and their functional roles

Create and update shared design rules in Stitch, including colors, fonts, and corner shapes, then apply them to existing screens. Keep a DESIGN.md file and project metadata alongside the design system.

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

• Apply shared design rules across existing screens
• Turn a theme description into concrete design values
• Create or update a design system in Stitch

Create a DESIGN.md guide for generating screens in Google Stitch. Define colors, typography, asymmetric layouts, component states, and motion with precise values and explicit restrictions, giving the agent consistent instructions for a specific visual style.

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

• Set shared design rules for Google Stitch screens
• Define asymmetric page layouts
• Document typography, colors, and interaction behavior

Upload local images, HTML pages, and Markdown design documents to a Stitch project. The included Python script sends files directly over HTTP, avoiding the text output limits that can interrupt transfers through MCP tools.

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

• Upload local mockup images to Stitch
• Add extracted HTML pages to a Stitch project
• Upload Markdown design documents

Create and refine screen designs in Stitch from text descriptions or images. The skill clarifies layout requirements, edits existing screens, explores alternative designs, and saves HTML and screenshots for review.

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

• Create a screen from a written brief
• Turn a mockup image into a screen design
• Refine specific parts of an existing screen

Turn a rough interface idea into a structured prompt for Stitch, with clear page sections, colors, and component details. When available, existing design rules are included to guide consistent screens or focused edits.

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

• Turn a rough screen idea into a clear prompt
• Revise a prompt that produced an unsuitable design
• Include existing design rules in a screen request

Convert an existing frontend into a Stitch design by extracting a standalone HTML file and shared design rules, then uploading both to a project so you can revise the interface in Stitch.

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

• Move an existing web app into Stitch
• Review React or Vue component designs in Stitch
• Extract design rules alongside screen HTML

Read frontend source code to document colors, typography, spacing, components, and layout rules in DESIGN.md. Use it to understand an existing interface or prepare design guidance for Stitch without building or running the app.

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

• Document an existing app's design system
• Review styling when the app cannot run
• Prepare an existing visual identity for Stitch

Create pop-up book illustrations for educational, technology, and brand materials. The skill builds image prompts around layered paper textures, an open book, and warm colors, with optional digital effects, then checks the generated image against those visual requirements.

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

• Illustrating technology products with paper textures
• Showing learning paths as pop-up book scenes
• Presenting a brand story or product

Analyze webpage screenshots to extract colors, typography, and component styles. Generate structured JSON describing reusable design rules and an AI coding prompt, or convert the results into brand styling for a presentation video.

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

• Extract design rules from a webpage screenshot
• Prepare a coding prompt for a similar landing page
• Export webpage styling for a presentation video

Turn plain-language descriptions or Mermaid diagrams into interactive, standalone HTML diagrams of systems, workflows, API exchanges, data flows, and state changes. Validate layouts, explore relationships, switch themes, and export diagrams as images or video.

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

• Explain system components and their relationships
• Visualize workflows and approval steps
• Map API calls and data pipelines

Intended to generate icons in multiple sizes with a consistent visual style for apps, websites, and user interfaces. The supplied description outlines this purpose, but the skill file is a placeholder without operational instructions.

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

• Prepare icons for an app
• Create icons for a website
• Plan a consistent icon set across multiple sizes

Turn image briefs into structured prompts for GPT-Image-2 using reusable JSON templates, organized fields for visual requirements. Specify composition, text, lighting, and constraints for product images, posters, infographics, and other design work.

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

• Prepare prompts for product images
• Specify poster titles and layouts
• Structure infographic content

Create image generation prompts for portrait Xiaohongshu covers using supplied photos and post content. Choose from eight visual styles, then define large Chinese headlines, colors, poses, and supporting graphics in a detailed composition.

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

• Planning a cover for an AI tool tutorial
• Designing a cover for a product comparison
• Preparing a cover for podcast recommendations