디자인 스킬

Create working web pages, components, and application interfaces with a clear visual direction. The skill connects purpose and audience to typography, color, layout, and motion, producing cohesive designs implemented in frontend code.

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

• Build a landing page with a clear visual style
• Refine a dashboard's visual design
• Create a React component

Turn reference images into prompts for AI image generation by describing composition, lighting, colors, and materials. Receive a main prompt and a negative prompt that specifies unwanted features, tailored to the image’s visual medium.

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

• Recreating a reference photo’s composition and lighting
• Turning an illustration’s visual style into a prompt
• Describing materials and backgrounds in product images

Turn a prepared outline into consistently designed HTML slides, PNG previews, speaker notes, and a presentation page. The skill reviews rendered pages for visual issues and exports a PPTX file when the output settings require one.

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

• Produce presentation slides from an approved outline
• Deliver an HTML presentation with speaker notes
• Export a PPTX file alongside the HTML presentation

Turn text or structured data into infographics with selected layouts and visual styles. The skill can refine image prompts and, across multiple generation rounds, review the images and rank the results for selection.

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

• Turn a written explanation into a visual summary
• Create an infographic from structured data
• Review and rank several generated infographic candidates

Turn long Markdown reports into a single HTML page with a design shaped by the subject. Reorganize text, evidence, and charts for easier reading while preserving the source’s factual claims and the strength of its conclusions.

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

• Turning an industry analysis into a shareable web page
• Reorganizing research notes around findings and evidence
• Presenting weekly reports and retrospectives as web pages

Start a presentation from a topic and optional documents, choose research depth and visual richness, and coordinate outline creation and production through companion skills. Saved task records also support resuming interrupted presentation work.

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

• Start a presentation from a topic and documents
• Choose research depth and visual richness
• Review an outline before slide production

Turn a prepared presentation outline into full-slide 16:9 images with consistent visual styling. Generate a PNG for each slide, optionally package them into PPTX, and resume unfinished work using existing files.

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

• Turning an approved outline into visual presentation slides
• Creating slides with consistent colors and composition
• Packaging slide images into a PPTX file

Turn an approved slide outline into a browser presentation with animated backgrounds, transitions, and keyboard navigation. Build a fixed 16:9 HTML deck, checking each slide through rendered screenshots and reviewing the complete presentation.

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

• Create animated slides for a product launch
• Build restrained animations for a formal report
• Present data with animated charts

Generate a new image with different content while preserving a reference image’s style and layout. The skill describes the reference, rewrites that description, and can review generated layouts and retry within a set attempt limit.

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

• Creating an image with new content in a reference style
• Replacing infographic content while preserving its layout
• Generating an image at a specified aspect ratio and size

Turn resume text shared in conversation into a designed portfolio resume image. Apply a fixed layout, incorporate optional style and color preferences, and generate a vertical image presenting the supplied experience, skills, and projects.

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

• Creating a visual resume from text shared in conversation
• Presenting experience, skills, and projects in one image
• Styling a resume image with preferred colors and mood

Create PAGX vector graphics files from a visual description, HTML file, or public URL, including supported animations. Edit existing designs, check their appearance, and export them to SVG, HTML, or PPTX.

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

• Creating a poster or product card from a written description
• Converting an HTML file or public URL to PAGX
• Making an animated banner or loading animation

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

Add an animation that makes a finished interface look as though an AI agent is building it. It traces the element’s actual layout with dots, then reveals the interface, optionally alongside generation logs and CSS text.

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

• Reveal a result card when AI output arrives
• Show a component being built in a product demo
• Add generation logs to a landing page reveal

Guide visual changes to an existing documentation site and landing page. Apply defined limits for text width, spacing, navigation, and color so layout updates preserve readable content and a consistent visual style.

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

• Adjusting documentation page width and spacing
• Choosing where to place a new navigation link
• Updating landing page colors and typography

Turn written content into Excalidraw flowcharts, mind maps, and other diagrams. Save files for Obsidian, edit them on excalidraw.com, or add drawing order information for use with an external animation tool.

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

• Turn workflow descriptions into flowcharts
• Organize ideas in a mind map
• Create diagrams for Obsidian notes

Prepare scientific figures for papers, reports, and saved deliverables by checking data fidelity, chart choice, labels, axes, and color consistency. Verify exported figures for overlapping text and readability while keeping fonts, palettes, and framing configurable.

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

• Preparing scientific figures for a paper or report
• Checking excluded data and summary statistics
• Improving labels, axes, and color consistency

Turn concepts, processes, and system architecture into diagrams. Create a self-contained HTML file with SVG graphics for browser viewing, or an editable Excalidraw file for whiteboard sketches and flowcharts.

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

• Illustrating concepts and processes for teaching
• Mapping software and cloud architecture
• Creating editable whiteboard sketches

Design new interfaces or reshape existing ones with colors, typography, and layouts grounded in the subject and audience. Develop a visual plan, review it, and build a coherent interface with clear wording and purposeful motion.

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

• Designing a new website around its subject and audience
• Refreshing an interface that feels generic
• Planning colors, typography, and page layout

Build working web pages, components, and application interfaces around a clear visual direction. Shape typography, color, spacing, and animation to suit the audience and purpose, producing cohesive designs instead of repetitive, generic layouts.

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

• Creating a landing page with a distinct visual direction
• Designing and building a dashboard
• Styling React components consistently

Create original posters and static artwork by first defining a visual philosophy, then expressing it through color, shapes, spacing, and minimal text. Receive the artwork as PNG or PDF alongside a Markdown design statement.

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

• Create a poster with minimal text
• Express a theme through abstract artwork
• Develop several pages with a shared visual direction

Give slides, documents, reports, and HTML landing pages consistent colors and fonts. Choose from ten preset themes using a visual showcase, or create a custom theme from a description and review it before application.

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

• Making colors and fonts consistent across slides
• Choosing a theme for documents or reports
• Styling an HTML landing page

Create Excalidraw diagram files that explain workflows, architectures, and concepts through visual relationships. Technical diagrams include concrete code or data examples, while a rendering and review process checks readability, connections, spacing, and overall composition.

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

• Visualizing workflow steps and decision points
• Explaining system architecture with code and data examples
• Illustrating abstract concepts and relationships

Prepare setting and prop design guides for AI short dramas. Define recognizable visual features, lighting variations, prop states, and English image prompts, then review scripted checks in an HTML report to support a consistent appearance across episodes.

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

• Keep recurring locations visually consistent
• Define lighting variations for a setting
• Prepare reference prompts for story props

Create a single HTML file with a flowing, animated background and a prominent quote or headline. Use it for a video intro, a landing page's main visual, or a poster, with landscape and portrait layouts available.

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

• Creating a video intro with a short message
• Designing a landing page's main visual
• Making a poster with a flowing background