스킬 찾기

Review a screen, user flow, or component against the user's task. Assess visual hierarchy, interaction cues, error handling, accessibility, and consistency, then provide prioritized fixes with reasons and identify strengths worth preserving.

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

• Getting feedback on a screen or mockup
• Checking usability before a feature launches
• Reviewing a flow where users may drop off

Build and update Paperclip interfaces using shared rules for colors, typography, status indicators, layouts, and interactions. Reuse existing components and keep the component catalog and showcase page aligned with new or changed interface elements.

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

• Add pages that follow Paperclip UI conventions
• Create reusable interface components
• Standardize status colors and priority icons

Draft simple black-and-white screen layouts as standalone SVG files, with numbered explanations of each area. For multiple screens, create a flow overview and an optional static viewer page for browsing and zooming during review.

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

• Sketch a screen layout before implementation
• Review mobile and desktop screen structure
• Map a flow across multiple screens

Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.

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

• Adding a ripple effect to button clicks
• Giving a heading a typewriter animation
• Revealing elements as the page scrolls

Build a creative studio website with classical illustrations, cobalt colors, serif headings, and cinematic scrolling. Adapt the supplied HTML template to a brand while retaining chapter navigation, service sections, FAQs, and mobile layouts.

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

• Create an architecture studio website
• Build a classical art portfolio
• Present studio services and FAQs

Design new web pages, review existing interfaces, or analyze references from URLs and screenshots. The skill guides page structure, colors, typography, and interaction states while respecting an existing project's design system and implementation boundaries.

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

• Designing a new landing page
• Prioritizing improvements to an existing interface
• Analyzing a reference page or screenshot

Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.

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

• Prototype a SaaS marketing page
• Explore a documentation page design
• Build an introduction page for a knowledge product

Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.

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

• Prototyping a product landing page
• Creating a pricing comparison page
• Designing a documentation index

Extract a Figma file into local project files containing its element hierarchy, reusable color and typography settings, and exportable assets. The structured snapshot supplies source data for later design mapping and implementation steps.

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

• Extract a Figma file's element hierarchy
• Collect color, typography, and spacing settings
• Prepare assets for later implementation steps

Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.

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

• Collecting design values scattered across source files
• Preparing Figma design data for migration
• Extracting design settings from screenshots

Create a desktop landing page wireframe, a simple layout made of grey boxes, with numbered markers and a matching specification panel. The result shows page structure alongside short implementation and user experience notes.

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

• Planning a desktop landing page layout
• Sharing implementation notes with developers
• Reviewing navigation, hero, and feature placement

Review a design across five areas: visual execution, fit to the user's problem, brand consistency, accessibility, and wording. It guides the agent to fix concrete defects and explain any issues that remain unresolved.

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

• Reviewing a design before delivery
• Checking consistency with brand guidelines
• Checking keyboard access and readable contrast

Create a hand-drawn HTML wireframe for exploring screen layouts before detailed design. Graph paper, sticky notes, sketch tabs, and rough chart placeholders present an early concept with annotations for discussion and review.

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

• Sketching an initial portal or dashboard layout
• Presenting layout options with labeled sketch tabs
• Adding review notes to an early screen concept

Create an HTML prototype of a social media analytics dashboard for creators. It uses consistent sample data to show platform metrics, follower growth, a top post, trending topics, and comments, with styling drawn from your design system.

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

• Prototyping a creator analytics dashboard
• Designing a screen for metrics across social platforms
• Displaying follower growth and a top post

Create an HTML pricing page with plan cards, a feature comparison table, expandable FAQs, and action buttons. The skill adapts the number of plans to the brief and follows the project's colors, typography, and component patterns.

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

• Prototyping a subscription pricing page
• Comparing features across service plans
• Presenting personal and business options

Choose one visual direction before building, using an existing design system, supplied brand references, or the project brief. Record the choice and define the colors, typography, and other visual settings that guide implementation.

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

• Set a visual direction before implementation
• Apply an existing design system to a new project
• Turn brand references into a clear design direction

Creates web prototypes inspired by Swiss industrial print, using newsprint backgrounds, oversized black type, fine grid lines, and red accents. It suits editorial pages, agency portfolios, and manifesto sites with a precise, assertive visual style.

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

• Prototyping a newspaper-style editorial page
• Designing an agency portfolio
• Building a manifesto site

Create full-screen animated visuals with WebGL, a browser technology for GPU rendering. Combine shaders, 3D scenes, or particles with a text overlay, and deliver the result as one self-contained HTML file without external requests.

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

• Create a website hero animation
• Build generative art with a headline
• Prototype a 3D scene or particle field

Create a single HTML wireframe for a desktop dashboard using grey blocks, placeholder text bars, and crossed image boxes. Review navigation, information hierarchy, and panel placement before choosing final colors, copy, or imagery.

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

• Reviewing a desktop dashboard layout
• Checking navigation and information hierarchy
• Planning KPI, chart, and table placement

Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.

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

• Fine-tune a landing page’s colors and spacing
• Demonstrate brand or design system variations
• Add adjustable appearance controls to a standalone demo

Create an animated HTML scene for history or trivia explainers, combining pixel art, a prominent year, moving text, and a scrolling timeline. CSS loops provide motion, making the scene suitable for screen recording.

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

• Creating an animated scene for a history explainer
• Presenting trivia with pixel-art characters
• Preparing a retro animation for screen recording

Build a trading analysis dashboard as a single HTML file, with dense market panels and interactive charts. Include light and dark themes, Live/Demo controls, chart focus views, and a keyboard command menu for navigating the interface.

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

• Prototyping a financial analysis terminal
• Presenting a dashboard with dense market panels
• Demonstrating chart tooltips and focus views

Map a mobile app journey across three or four phone frames in one HTML board. Simple gray content blocks, dashed arrows, numbered actions, and short annotations show how users move between screens before detailed visual design.

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

• Mapping onboarding through the home screen
• Reviewing the path from item details to confirmation
• Discussing screen transitions before visual design

Create soft, polished web prototypes with silver or cream backgrounds, nested card borders, rounded surfaces, and carefully specified motion. The skill defines page sections, buttons, navigation, and mobile layouts for a consistent visual style.

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

• Prototyping a calm SaaS website
• Creating a soft visual style for a consumer product site
• Building a feature page with cards and prominent action buttons