디자인 스킬

Build HTML slides for an OpenDesign live demo, showing how a short prompt becomes a runnable design. Organize the presentation, visual direction, speaker notes, and animations using the supplied deck template.

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

• Preparing an OpenDesign live demo for developers
• Explaining an AI workflow to prospective customers
• Building HTML slides with speaker notes

Create a mobile app prototype that presents habits or daily tasks as quests with experience points and levels. A single HTML page displays three phone screens: a cover, today's quest dashboard, and a quest detail with steps and rewards.

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

• Prototype a habit tracker with game elements
• Explore a daily quest dashboard with experience points
• Design quest details with steps and rewards

Create HTML slides about choosing and connecting AI models in OpenDesign using your own API key. Use a terminal-style template to explain costs, quality, and model routing decisions, with speaker notes and presentation controls.

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

• Explaining model choices to engineers and IT teams
• Comparing model costs, quality, and routing decisions in slides
• Preparing a terminal-style presentation with speaker notes

Creates HTML presentation slides for contemporary art exhibitions and biennales, using yellow, warm paper tones, and indigo typography. Organizes the curatorial theme, exhibition rooms, artworks, and visitor journey for museum boards and curators.

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

• Presenting a biennale proposal to a museum board
• Explaining exhibition rooms and visitor routes
• Preparing an arts institution's programme announcement

Apply WordPress's official design system to themes and sites. Use design tokens, shared visual settings, along with typography and component patterns to guide how text and interface elements are styled.

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

• Applying official WordPress styling to a theme
• Aligning site typography with WordPress patterns
• Using WordPress component patterns in site design

Create 16:9 HTML presentations for project debriefs, security reviews, and incident reports. A dark CRT terminal style combines monospaced text, red alerts, data grids, timelines, and audit logs to present dense operational information.

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

• Presenting project debriefs
• Reporting infrastructure incidents
• Organizing security review findings

Create a desktop admin or analytics dashboard prototype in one self-contained HTML file. Follow an existing design system to arrange navigation, key metric cards, charts, and a supporting table or chart.

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

• Prototyping a sales dashboard
• Exploring a traffic or usage analytics screen
• Designing an operations control panel

Rework a messy startup presentation into a coherent HTML slide deck for decision makers. Organize the narrative and evidence, then apply a consistent visual system of pastel-neon blocks, bold black borders, and coordinated layouts.

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

• Rework a startup deck for a board meeting
• Create agency credentials slides
• Present a brand redesign for review

Build a FlowAI-style team management dashboard with member tables, activity history, summary metrics, and charts. The result is a self-contained HTML prototype with working tabs, light and dark themes, panel zoom, chart tooltips, and CSV export.

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

• Prototyping a team management dashboard
• Presenting role distribution and online presence
• Reviewing member details and activity across tabs

Prototype a documentation page in one HTML file, with navigation, an article, and a linked table of contents. Includes realistic explanatory text, command examples, code, and tables, plus layouts that adapt to narrower screens and right-to-left text.

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

• Prototyping an API reference page
• Designing a tutorial with commands and code
• Planning a guide with navigation and a table of contents

Create an HTML slide deck that turns a hobby or collection into a story for friends and fellow enthusiasts. The supplied template uses dark navy backgrounds, neon colors, and pixel art inspired by retro arcades.

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

• Sharing the story behind a retro arcade collection
• Presenting a hobby journey to friends
• Creating slides for a gaming community

Review HTML pages, presentations, or prototypes across five design dimensions. Receive evidence-backed scores, a radar chart, and practical lists of what to keep, fix, or improve quickly, all packaged in a single self-contained HTML report.

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

• Reviewing a landing page before delivery
• Checking the readability and navigation of an HTML presentation
• Comparing two versions of a design

Review web interface code against Vercel's Web Interface Guidelines, covering layout, typography, color, motion, and accessibility. Receive concise findings with file names and line numbers, using a bundled guideline snapshot for a consistent review baseline.

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

• Reviewing product interface code
• Checking accessibility against interface guidelines
• Checking layout, typography, color, and motion

Create an HTML preview of a digital guide with a cover and an inside page shown side by side. Arrange titles, contents, quotes, steps, and an exercise in a spacious editorial layout suited to lifestyle creators.

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

• Previewing a creator guide
• Exploring a lookbook layout
• Mocking up a downloadable marketing guide

Write and lay out a long article as a single HTML page. Combine clear headings, image placeholders, highlighted quotations, author information, and related posts, using the active design system to create a magazine-style reading experience.

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

• Prototyping a long-form blog article page
• Presenting a case study with figures and quotations
• Designing an article page around an existing design system

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

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

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

Guide SwiftUI interface design with rules against generic AI styling, advice on design direction, guidance for handling brand assets, and reviews across five dimensions. Use it to shape and assess native app interfaces.

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

• Choosing a design direction for a SwiftUI interface
• Reviewing an interface for generic AI styling
• Checking how brand assets are handled

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

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

Audit and improve an existing website or app's interface while preserving its functionality and technology stack. Refine typography, colors, layout, and interaction states through focused changes, checking functionality after each update.

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

• Audit an existing website's visual design
• Replace repetitive, generic interface patterns
• Improve loading, empty, and error states

Turn a song, podcast, or personal introduction into a Spotify-style now-playing card. Generate a single HTML file with CSS-drawn cover art, a progress bar, and playback-style icons for video overlays or personal homepages.

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

• Adding a now-playing card to a video overlay
• Introducing a favorite song on a personal homepage
• Presenting a podcast title and creator

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